Alaska observation REPORT DESIGN
Team Projects: Mainly work with Josephine Courant, Doug Kreuzkamp
Role: Product Designer
Year: 2016.07 - 2016.10
Springshot is a San Francisco-based software company that transforms airport operations and improve workforce productivity. It mainly help airlines, airports manage their workforce by assigning tasks to their phones and providing real-time visibility.
This is a data visualization design project that requested by Alaska Airline to help them review their observation job performance and export data . My job in this project including research, wireframe prototype and visual design.
Final dashboard looks like this:
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.
The biggest two challenges I had in this project were:
1. Choosing 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.
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.
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 needed 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
Transform the sketches to high-fidelity wireframes.
These are some main pages of the 2nd iteration
The biggest change was simplify the whole experience and only show the most basic information.
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 identity. We wanted to make it like Springshot style but we were changing the old style. At that moment, I chose to keep button and top bar as original color while adding more bright color to show graph.
After sketching, iterating and polishing for many times,
our final design looks like this:
These are some visual elements and their iterations:
We showed our clients the wireframe first due to time limit, 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.