PROBLEM
Current generation car systems have always felt clunky when searching for points of interest, causing drivers to prefer the use of their phone for navigation both outside and inside the car.
ROLE
Designer responsible for the iPhone and Apple Watch experience.
Collaborate with another Designer and Engineer.
Collaborate with another Designer and Engineer.
Tools: Sketch, InVision, Photoshop
SOLUTION
We designed an app that takes advantage of the driver's devices and connection to the car, allowing the driver to seamlessly navigate from point a to point b with driving directions and walking directions.
After learning the requirements and technical capabilities, we started our design process by reading the companies most recent user studies and developing personas and journey maps to understand our customers better.
JOURNEYMAPS
Developing journey maps provided us with multiples scenarios a driver goes through with all the positive and negative experiences they have. These experiences helped us shape the information architecture and user flow.
INFORMATIONARCHITECTURE
While this app was always meant to be minimal, it was important to map out the information and the steps it takes to go through it. As it not only provides a blueprint of the system but, also helps us keep the user's tasks to a minimum.
SCREENFLOWS
During our wireframes, we realized how simple the UI was so we opted to create high-fidelity screens, which allowed us to move more quickly in the design process. These screens enabled us to map out the flows, generate prototypes, and visually communicate the system to the engineer and management.
MOODBOARDS
When starting the visual design, I always begin by finding inspiration and Mercedes-Benz has a lot of inspiring imagery. I was mainly a huge fan of the diamond grill on the front of the cars. It's a beautiful element that, along with the emblem, exemplifies the Mercedes-Benz brand.
VISUALEXPLORATION
Visual design is one of my greatest strengths, and I love the process of getting to the final visuals. Taking the inspiration of the diamond grill, I created some beautiful explorations.
Visual Exploration
VISUALDESIGN
For the final visuals, I decided to subdue the graphical element to balance the UI and overall look of the home screen. We decided on using a bright green as our main call-to-action color to symbolize forward movement, similar to the green of a stop light.
ICONDESIGN
Designing an app icon requires a blend of keeping it on brand and standing out amongst the other apps on the phone. We knew the final name of the app would be called Companion so I wanted to create an element that showed movement, progress and played off the named.
REDESIGN
After we completed this for the hack-a-thon and received feedback, I redesigned the app to have more consistency to the new UI in our cars. This provided inspiration for future development of this application.
FINALOUTCOME
This app was the first iteration of the Companion app for Mercedes-Benz. For us, it was the start of better connecting the driver to the car, allowing us to design more seamless user experiences in the future.
LESSONSLEARNED
Creating an app in three days is doable with clear communication and extremely close collaboration. Being a car company, we shouldn't start and end our user's experience in the car. We should strive for designing a better, more complete journey.