Roam is a speculative On-Board Diagnostics device (OBD-II) that tracks the health of a car while providing real time engine health diagnostics.

ROLE

Product Design
Ideation
Animation

TIMELINE

September 2019 —
December 2019
[12 Weeks]

COURSE

Advanced Topics in Interactivity with Philippe Jean

TOOLS

Figma
Principle
Illustrator

Design Objective

The goal of this project was to explore a topic and personal modes of visual expression through the creation of a screen-based interface. The topic I chose was automobiles and went with a speculative route.

The goal of this project was to explore the limits of data visualization through the implementation of speculative design.

IDENTIFYING THE PROBLEM

Cars are undoubtedly very expensive, and many drivers are unaware of proper car maintenance. Drivers tend to have anxiety around engine related issues with fears of expenses and being taken advantage of by mechanics.

Proposed Solution —
Roam

The idea of this app is to use an On-Boarding Diagnostics (OBD-II) scanner that plugs into a car's data port in order to collect auto-related data, which will then be utilized to determine the car's health. This trackable data will also use algorithms that can be used to determine when maintenance is required, while also determining the severity of an engine light code. OBD-II ports are found in all cars that were manufactured after January 1, 1996, which makes this device accessible and practical for most cars.

Roam is a smart device with a companion mobile app that allows the common user to track their car’s health (engine light diagnostics, wheel alignment warnings, battery issues, coolant temperatures, etc) based on data from their driving habits.

PHASE ONE —

Brainstorming

Ideation & Visual Inspiration

After performing a benchmark analysis of current apps on the market such as Car Scanner ELM OBD2 and OBD2 Expert, I realized that most car related apps follow a dark and neon style, and are quite clunky which makes it difficult for the common user to understand. My visual inpsiration was based on simple and light apps, and my goal was to visualize it in a minimal manner, similar to how Tesla designs their car and mobile apps so that the information is clear and straight forward.

How Might We & Crazy 8's Workshop

After pitching my idea to fellow peers, each of us participated in a How Might We workshop in which we received suggestions and identified areas of opportunities for our projects. Some key priorities the app should have include:

+ Being easily understandable for the common user
+ Customization for what information is being provided
+ Being able to connect users with one another
+ Empowering the user so they aren't taken advantage of by dealerships and mechanics

The following week, each of us participated in a Crazy 8s workshop where we began brainstorming for the wirefaming phase of the app. This gave me a better idea of how I should be designing the overall navigation of the app. Some key elements of the wireframes the class drew include:

+ Ensuring that the content displayed is specific to the car model
+ Adding a guide with any solution based engine light diagnostic
+ Display the car in an overhead or wireframe view to help display where an issue is
+ Incorporate data visualization with gas mileage information, fluid levels, and so on

PHASE TWO —

Wireframes

SKETCHING IT OUT

Mid-Fidelity Prototype

A mid-fidelity prototype to have a better understanding of how the design system should be designed and implemented.

PHASE THREE —

Interactive Prototype & Assets Catalog

Interactive Prototype & Assetts Catalogue

Design System

I designed an assetts catalogue on Figma in order to seamlessly design the high fidelity prototype. The design is "light" in a sense that the information is clear for a user to understand, and uses red and orange colours to determine errors.

View full design system here →

FINALIZING THE DESIGN

High-Fidelity Prototype

A walkthrough of the high-fidelity prototype that uses the design system created in Figma.

PHASE FOUR —

Final Vision & Animations

EASY TO CONNECT —

Simple Bluetooth Connection

The OBD II scanner simply connects to your phone through Bluetooth. All of your car's data is saved onto the cloud through your Google account, and you can sign in on multiple devices.

GET REAL TIME UPDATES —

Code Scanning

View full details on engine codes, including symptoms and tips on fixing the code, as well as top rated mechanics nearby.

MAINTENANCE MADE EASY —

View Vehicle History

Download and send your car's collected data on an engine code for a confident visit to a top rated mechanic near you.

SMART DRIVING —

Engine Health Diagnostics

Access your car's engine health diagnostics to keep track of its health for easy maintenance.

QUICK OVERVIEWS —

Track Multiple Vehicles

Easily add multiple vehicles and view engine health diagnostics, gasoline milleage and personal driving patterns to improve its lifespan.

Project Takeaways

This project was done quite differently in comparison to the other interactivity courses that I've taken. During the beginning, there was an emphasis on collaboratively working with my classmates by doing workshops such as How Might We and Crazy 8s. These workshops allowed me to gain insight on what users may find important, especially if they don't know much about cars, and it helped me prioritize the features of the app. Another aspect that I haven't done in my other courses was incorporating animation to the high fidelity prototype. This was a challenging experience as this was my first time using Figma, and and it was also my first time using Principle.

This project was my first time working on a semester long project without conducting user testing. If I were to come back to this project, I would user test it with amateur and experienced drivers to see which features can be added or removed. Even though the workshops in the beginning were extremely insightful, user testing would help push this project even further.

View Full Prototype Here →

Index | Next →

Let's chat —
[email protected]