Springshot WEB REPORT DESIGN

Team Projects: Mainly work with Josephine Courant, Doug Kreuzkamp

Role: Product Designer

Year: 2016.10 - Now

 

Springshot is a San Francisco-based software company that transforms airport operations and improve workforce productivity.  It mainly help airlines, hotels manage their workforce by assigning missions to their phones and providing real-time visibility.

As a product designer in this small wonderful team, my work cover all parts: web product design, mobile app design (Android and IOS),animation and illustration. In this page, I will mainly introduce some web projects - Web Observation Report Design, Web Mission Control Flow Design, and Delta Web projects. You can  also find the mobile projects here.

WEB OBSERVATION REPORT

Problem:

Before Alaska Airlines using Springshot product, they were using paper and pen to record tasks and using Excel to make report. It's very inefficient and hard to make it up to date. As they have more workers using our app everyday, they need a report page to reflect how their observers work and what problems need to be paid attention to. This report needs to reflect how each question performs, what questions have higher failure rate and what questions perform the best. 

Challenge:

The biggest two challenges I had in this project were:

1. Determine the best way of showing and comparing the data.

2. Simplify the design to make it easy to use by non power users.

When I just started, I thought weigh too complicated. For example, in Alaska Airlines's observation list, a question asks if the baggage room has been locked 30 mins before the plane departs. Just for this question, we can show the data about how many people observe this question in one airport, in all airports and how many times it failed in a past time period. We can also compare how this question performed in different airport, in different region, in different time of a year and in the same time of different years etc. Choose what data they want to see and organize them in a clear way was what I focused in this project.

Solution:

With the help from my previous design manager, I created a report that can show best and worst performing questions over time, details of worst performing questions, improving questions and declining questions. Users can have a general idea of how their observation run and find out where has the problem quickly. 

Process:

1. Research

Before I started this report design, I read the PDF reportI (54 pages) from Alaska Airlines. I listed the data they care about and what data they used to compare. 

2. Whiteboarding and brainstorming 

My design manager drew some graphs to show me how observation process works and we had several brainstorming sessions to identify the data contents and initial design approaches.

3. Wireframe iteration and feedback

The first iteration of the report was ambitious. I tried to categorize the data in 4 categories and each category had a full report.  After getting feedbacks from design manager and other team members, I tried to make it much more simpler while still show the most important data. I did 4 iterations, during this process, I explored many approaches for showing the data.

These are some of my crazy early concept sketches

 

These are some main pages of the 1st iteration

These are some main pages of the 2nd iteration

The biggest change was replacing all the graphs with question list in homepage. I also removed all those categories.

These are some main pages of the 3rd iteration

After getting feedbacks, I knew most of the users are non-power users, and most of their attention are on worst, best, improving and declining questions. So I added trending graphs back but removed custom graph functions in order to make it easier to use. The default setting was showing the worst and best questions.

These are some main pages of the 4th iteration

The new feedbacks I got from V3 design was we need connect bar graph and line graph together. So when user deselect the bar graph, the line graph will also disappear. I also started doing some details about multi-select style.

4. Final visual design

The last step was to transfer wireframe to visual mockup. The biggest challenge here was about the color. The report had a lot of information, so simplify the visual choice was very important. 

After sketching, iterating and polishing for many times,

our final product dashboard looks like this:

Result:

We showed our clients the wireframe first, they were really happy with what it looked like and the power it had. From a business perspective, the report has allowed Springshot to explore more cooperation opportunity with other clients.