Navigation Feature Changes
Client: CAMP Systems International
Problem Statement: A user that owns and operates only one aircraft doesn't necessarily need all the information provided by CAMP System's desktop application. They only want a quick overview of their aircraft and engine to ensure they are safe to fly
Plan: Redesign the Aircraft Overview page to provide necessary information at a glance. Incorporate engine health attributes to give a more in depth overview of the aircraft features.
Process
-
Internal stakeholder research and project scope
-
Interaction Design, Layout Design and Visual Design
-
User Feedback
Internal Research and Project Scope
During our initial research received the following user feedback
-
Users want just enough information to know if they are safe to fly
-
Users want an overview where they can drill in to get more in depth information about their aircraft
Design
Based on our research and newly established design standards the team decided to made the following decisions
Dashboard & Status
-
The dashboard will provide a quick at a glance overview of information
-
Each dashboard 'widget' will have a status associated with it to allow users to see what is most urgent
Information Cards
-
When a user clicks on a widget it will bring them to a card view that will provide more detail on the status of their aircraft
Research & Iterations
The dashboard and information cards received critiques in early meetings with stakeholders. We were concerned users would have problems with:
-
Visibility into what they wanted to see when they opened up an overview page
-
The new dashboard's location in the existing application
-
Consistency of status colors throughout the mobile and desktop applications
Once we released this updated dashboard we followed up with users to provide feedback on the new solution and received generally positive feedback.
Challenges and Insights
Typographical hierarchy
Since we were working with limited space on a mobile screen it was important that we utilized font size, weight and color to show typographical hierarchy.
Colors
Standardizing the status colors was a challenge as we are working across several different applications, which each have their own status color codes.
Shadows
To further define the cards against the grey background we added shadows.
Iconography
We had to consider that users of our application could be color blind. We decided to use a notification icon on the dashboard to draw attention to any issues
User interaction
All of these design decisions affect how the user interacts with the application. Spacing between the cards on the dashboard and the at a glance information all assist in providing an optimal user experience.