Written by Matt Stein, Director of Product Design at Metromile
I’ve been at Metromile for about ten months now. It’s my first startup and in short I love it. Previously, I led design for the Salesforce Community Cloud and was all things AutoCAD during my time at Autodesk. The biggest thing between the two previous companies and Metromile is size and maturity. They are big goliaths! Metromile is small and nimble. I joined Metromile as employee 65. There was an existing design team doing great work and my primary goal was (and is) to elevate design at the company, incorporate strong design processes, and be the champion for the user.
In my relatively short time here we have accomplished a lot; an app redesign, refreshing our quote and enroll flow (have you got a quote yet?), new processes, visioning weeks, new state launches, and hiring hiring hiring (which deserves a blog post unto itself). It’s been an amazing whirlwind that I could not be more proud to be a part of.
Looking for a tech job near you? Check out the Tech in Motion job list.
Along the way I have learned a lot and have tons more to learn. Every day poses new and interesting challenges. Below is a little insider info into UI/UX design from me, and teaser of some of the topics we will be discussing at the panel event on Feb. 25 hosted at Metromile’s offices.
What are the three UX principles that are most important to a transportation startup? Why?
Three principles, beyond the core principles of intuitiveness, ease-of-use, and others, that we keep in mind are “Glanceable”, “Clarity”, and “D.E.F.”:
- Glanceable - People aren't using our app like Facebook or Instagram. They open the app to see where there car is, view their last trip, check their fuel gauge, etc. That information needs to be at their fingertips.
- Clarity - Secondly, it needs to be clear. There is a lot of data about your trip. What do we show you, what do we not show you. What's that sweet spot. Don’t show information just because we have access to it. Less is indeed more.
- Delightful. Engaging. Fun.- This is kind of three in one, but how do we make using the app a delightful, engaging, and fun experience. How do we get the user to like the app so much they want to go and tell their friends. This comes down to both features in the app and how we go about design. Our street-sweeping feature is a great example. People are alerted to a possible ticket and are delighted that we have saved them money.
How do you delight and engage your users?
Taking a step back, we’re taking something like car insurance, which is typically dry, and making it fun and engaging. Our first goal is always to get you the information you need or enable you to complete a task. Many Metromile customers are actually delighted by our feature set alone. Street sweeping, which I already mentioned is a great example. The ability to see the amount of fuel left in your car is another. Outside of specific features, the design team looks for touch points where we can add delightment and engagement. One opportunity we had with the Metromile app was our use of illustrations for empty and loading states. These illustrations are fun, reflect our brand, and tie together the online and app experiences.
In an exploration of our dashboard redesign, we’ve been able to do some really fun stuff that infuses our brand with your car. If you drive a Prius, you will see your Prius in our illustrative style above your policy info. If you have a Mustang, you will see your Mustang in our illustrative style. It’s not realistic that every car will have a specific illustration, but we are hitting the most popular among our user base. We could have just had a generic car avatar and left it at that - but in user testing, the look you see on people’s faces when they see their own car pictured is just awesome (that’s the delight factor!).
What is the most recent change you have made to your design process? Why?
The team recently read a great article by Scott Hurff about designing for the whole user interaction stack - basically every state of a user's interaction. You might be thinking, “Yes, this is obvious,” but too often anything other than the base or ideal state is overlooked. It is an afterthought for design and development. Scott goes into great detail about many examples of Partial, Empty (Blank), Error, and Loading states.
We brought this idea into our design process for a new project and changed this around a bit. We call it BLEEP, which stands for Base, Loading, Error, Empty, Partial. It guides the designer and team to think about all of these different states from the beginning. Too often everything but the Base state is overlooked or an afterthought. This puts it in the forefront. It has also helped to develop a common language between design and development. BLEEP is just part of our product development process now. Plus the name is cool.
If you’re interested in hearing more about UX/UI Design in the Transportation Space, join me at the next Tech Talk, Feb. 25 from 6-8:30 p.m. at Metromile (690 Folsom Street). RSVP here.
Attend an event on UI design or other tech topics in a city near you.
About Author
Matt Stein, Director of Product Design, Metromile
Matt champions the user's needs across mobile and web products as the Director of Design at Metromile. Before that, he was the Director of UX at Salesforce for the Community and Chatter products. Matt has a Bachelor's in Computer Science from University of California at Santa Barbara.