Cloud Processing Service

Spring 2015
Design Manager
A webpage with a dark blue header and sub header. A table of project name, description, modified date, and list of services. Three charts on a white background: a line chart of amount of services used vs time, a histogram of job status and minutes of computation used.

Focusing on the user

When the design team started on the project the existing application was not aligned to the end user goal of viewing the results of computationally intensive simulations. The main page contained statistics about processing time. Viewing the data generated from the simulations required clicking through several levels of hierarchy.

A site map tree. Pages are colored differently to represent the different levels in the navigation structure.

Design

I worked with the product manager to identify the core concepts in the application. This information was used to produce a site map. It also informed the creation navigation design patterns for the site.

A photograph of paper with several pencil sketches on it. The sketches show different ideas for how to lay out a list of projects.

Sketches were made to brainstorm different potential layouts. The team compared notes and decided on which of the sketches were promising enough to move to the next level.

Black and white wireframes showing the basic layout of a page with a list of projects and a notifications side bar.

The team created wireframes to document out the interaction concepts we had sketched out earlier. These wireframe diagrams were used later in the process for creating high fidelity comps and an clickable prototype in Axure.

A webpage with a dark blue header. The heading is Recent solutions. Below are grid of colorful graphs on gray tiles with the names of projects. Some charts show the progress of computations for the project, other show bar charts.

The visual designer applied styling and color to the wireframes to create high fidelity comps. Using these high quality images another designer on the project created an interactive prototype in Axure. This prototype was used to explain the design to the development team.

A webpage showing a comparison table. Different solutions are listed across the top row. Different metrics are listed down the first column. In the cells are numbers and charts representing the performance of the different solutions for each metric.