We made some major upgrades to our smart driving app, so we asked our Director of Product Design, Matt Stein, to share the inspiration behind everything.
I’m excited to see the newly redesigned Metromile app in the wild today, now available on iOS and Android. The primary goals of the redesign were to create a foundation that could be built on in the future, delight our growing user base, and provide the best experience possible for getting a holistic view of everything to do with your car.
A key component of the redesign process was understanding how the current app was being used. We ran a focused qualitative user study as well as a broader quantitative survey to give insight into what was working well and what could be improved. The primary theme was that our users want to have peace of mind about their car. They want to know where they last parked, what an engine light means, and the ability to dig into the details on a recent trip.
The Metromile app can be used by either our per-mile insurance customers or people who use the free app version. The app will track your trips, show you where you’re parked and alert you to street sweeping (select cities). For insurance customers, it decodes engine code warnings and allows them to contact our in-house mechanic.
All of the aforementioned features are fairly distinct, and one of the challenges in designing the app was coming up with a consistent pattern for the user to consume information, such as viewing trips, decoding warnings, or understanding how to get roadside assistance.
The following three principles guided the design:
- Create a scalable framework
- Provide information at a glance
- Make it fun
Create a scalable framework.
The app itself is split across four distinct areas: Car Health, Parking, Trips and Insurance. These four areas are displayed on the app’s main view via separate cards that allow the user to drill into a more detailed view. Because most of the app’s features are distinct and don’t overlap (e.g. Trips won’t overlap with Car Health), this design choice gave us the most flexibility when considering new product capabilities. Although our app contains a hamburger menu, it is mostly supplementary because 80% of the app’s functionality can be accessed through the overview. Settings and vehicle switching are the two exceptions.
One of the biggest challenges was ensuring the same design framework could be used across each view. After exploring various options, the team arrived at a card pattern that is fairly prevalent today. Users understand how to interact with cards, and they are easily accessible. Each of the primary views has a “hero” section highlighting the most important information as well as child cards that allow the user to dive deeper into an area.
For example, on the Trips view, the “hero” section shows an aggregate view of the current month’s trips: totals for mileage, number of trips and projected fuel cost. Below this section are expandable cards showing detailed information for each trip taken. Other views follow the same framework with the exception of the Parking view which is a more immersive and full-screen experience.
To keep things consistent from view to view, a number of different card types were designed to scale for future needs. All cards share a common visual language and overall information hierarchy.
Provide information at a glance.
It was necessary to provide the user with the most important information at a glance. Adopting a card pattern allowed us to easily display the most relevant and timely information to the user. For parking, it is the car’s location, for trips, it is the last trip of the month, for car health, it shows if there are any engine issues, and for insurance, it shows potential savings.
Each of the four main feature areas of the app have a hero section following the same principle. We asked ourselves what the most important information was for each area. If the user has drilled into Trips, they want to look at their trip data in more detail, so the card shows an aggregate view of their trip totals for the current month. It’s a level deeper than what is on the Overview.
Make it fun.
One often overlooked area of design and development for an app – and typically one that is rushed – are the empty states, loading states, error states, etc. We realized early on when working with development that there would be ample opportunity to inject a little bit of fun and personality into the app during these various states.
Pictured below are images of the app during the Overview screen loading state. The design team had a lot of fun creating these and have more ideas for similar states in the future. Instead of empty cards and blank canvases, the user is greeted with fun illustrations that reflect our brand.
Transitions are another area the team spent a lot of time on. Transitions not only make moving through the app a more fluid experience, but when used appropriately, will delight the user. One we are really proud of is the trips scrolling experience. While scrolling through a month’s trips, the month and year information subtly fades out and the aggregate trip stats for the month fade in. It’s a small touch that has a big effect.
We really hope you enjoy the new app experience. It sets the foundation for the future of the Metromile app and we are excited to build upon it. If you have any feedback about the app feel free to email us at [email protected].
Matt Stein / Director of Product Design
Metromile Design Team