otto
branding / ui / ux
THE CHALLENGE:
The challenge was to build a smartphone app that worked in tandem with a smart device. Using the agile development framework, the device was to be wireframed, user tested, and ultimately delivered in prototype form.
THE SOLUTION:
We built Otto, a smartphone app that uses an OBT2 device to diagnose car problems. We studied competitors in the market and conducted surveys with our potential demographic. This guided our design choice to keep Otto simple, clear, compact and accessible.
WHAT IS OTTO?
Otto is a smartphone app that uses a Bluetooth enabled OBT2 device to diagnose car problems. You start by plugging Otto into your OBT2 port. The device will transmit information about your car to your smartphone Otto app. With just a few button presses you can diagnose car problems and find the best solution. It’s compact, affordable, and easy to use.
OUR DEMOGRAPHIC
We started by identifying our demographic. It was decided to target female drivers in particular (although not exclusively). Many in this group were not interested in knowing the mechanics of automobiles, but all were interested in an app that could clearly diagnose car problems. In replying to our questionnaires, they cited safety, affordability, ease-of-use and clarity as their top priorities.
USER personas
User personas and profiles guided the design process from the beginning. Understanding their lives helped us understand our product.
KATY, 37
Katy is a middle-class mother of two who spends a lot of time transporting the kids between school, home and soccer practice. She’s not mechanically inclined and wants an app that can clearly diagnose and solve any potential car trouble.
Jeanne, 16
Jeanne is a young driver whose parents want her to have every safety advantage on the road. She’s a digital native who uses smartphone apps every day. Otto is a natural fit to help her understand her new car.
SAM, 46
Sam is a middle-aged car owner who wants to be able to diagnose car problems and fix them himself without depending on a mechanic. Although we aimed the app at female drivers, we wanted to broaden our demographic to include men, as well.
PROCESS: from idea to creation
User Feedback
A survey of 15 questions was sent out to potential users. Their feedback guided the features we included, the colors we chose, and the revisions we made along the way.
CLARITY VS. CLUTTER
Clarity and ease-of-use was foremost in our feedback. We wanted Otto to look softer, cleaner and more welcoming than similar car apps on the market. For example, an app like Torque was dark, cluttered and clogged with information and dials. We instead chose colors and fonts that were light, warm, and open. We eschewed dials and added space.
Similarly, the design of the OBT2 device was built in reaction to the bulky, cumbersome models already on the market. We wanted our Otto device to be compact and discreet. Bluetooth technology made it possible to shrink our design to smaller than palm size.
CONTINUOUS ITERATION
Our original prototype device lost a couple of inches after user tests revealed it was bumping into their knee while behind the wheel. Obviously, there are things you can’t know until you test them. In an agile framework, you can - and must - continuously iterate and revise your designs as your users direct you.
Prototyping
Paper prototypes were made to map out task-flows. They started as sketches, grew more detailed, and were then placed in front of users for further feedback
WIREFRAMES
After some user-testing refined the task-flows, we built a wireframe map of the app.
DIGITAL PROTOTYPE
We began digital prototyping using Adobe XD to build out the buttons and screens.
OTTO PROMO
This quick Otto promotion video was created in After Effects to demonstrate the apps simplicity.
