Project: Innova OBD Screen
Role: UX Designer
Duration: March 2019 (1 week)
Car OBD app for mechanics who diagnose car’s for repair.
Project Vision
This was freelance work for a screen for an OBD application. So the project vision was for creating an iteration of this screen that helped their users complete their goals.
Challenges
1. Develop a page that is easy for the user to comprehend.
2. Have all relative information easily accessible.
3. Don’t overwhelm the user with too much information.
4. Organize the information within an order that makes the most sense to the user.
Kickoff
In this project, I took a goal-direct approach as to not lose focus on the purpose of the project. I asked myself a few questions. Using these question helped me start my designs as well as inform me as to what I should be asking during research.
“What is the product and who is it for?”
“How should the information be organized?”
“How should the information be portrayed?”
The largest concern
The main problem the team mentioned is that there’s too much information on the screen. Even though much of it is important for the user, there’s just too much below the fold.
Meet the User
Name: Jacob
Age: 40
Occupation: Auto Mechanic
Jacob is an auto mechanic working at a automobile repair shop. He diagnoses many problems with vehicles to later direct to the team to fix.
Competitive Analysis
The nearest competitors provided comparable solutions and hardware. The most notable distinction between Innova and its competition lies in Innova’s capability to not only recommend suitable substitutes for specific components but also suggest viable purchasing options for these components at competitive prices.
Preparing the Journey
I constructed a user flow chart of the app. This helps me understand way the users can interact with the product. This also helps me see navigation through user goals.
Wireframes
Creating the wireframe made me realize the best way to work with the large amount of data presented to the users was to use accordions to help keep all relevant titled information accessible.
Home Header
Global OBD
Color Iteration
I created multiple version with different color while making the wireframes to get an idea of what is the best palette for the consumer.
Develop a page that is easy for the user to comprehend. Using the breakdown of shapes for each category of data helps users break down the information. Using colors to break down positive and negative also helps reinforce easy comprehension.
Have all relative information easily accessible. Having the basic report information respective to each vehicle helps users distinguish what vehicle diagnostics they are always on.
Don’t overwhelm the user with too much information. Having the 4 circles break down the Total DTCs, scheduled maintenance, predicted failures, and Recalls. Helps keep the most important information summaries above the fold.
Organize the information within an order that makes the most sense to the user. Right below the fold we have the system status of the vehicle. This is broken down the air pressure, various liquids, and battery charge. All of this information is displayed differently through iconography and data information.
Style Guide
Exploring a spectrum of color possibilities was a difficult process, with the ultimate decision marked by its inherent challenge. Ultimately, I opted for a restrained palette, predominantly embracing shades of blue while preserving darker elements to facilitate a compelling contrast against a white text. This color scheme served as the foundation for the style guide. Moreover, I found the green and red particularly advantageous, as they intuitively convey positive and negative feedback to the user.
Takeaways
Working on this project provided valuable insights into effectively managing an abundance of information within a single screen interface. Prioritizing content above the fold made me rethink what users truly need to see at first glance. Additionally, I gained a deeper understanding of diagnostic processes and the interactions between OBD systems and vehicles.
