mph

My role

mph is a startup looking to compete in the peer-to-peer car rental marketplace. Here I'm currently working as their Lead Product Designer. Creating high-level user flows, wireframes, prototypes, and design system for their iOS and Web platform. I also work closely with the front-end team to help implement UI components with CSS, HTML, and React.

Creating a design system that can be used across both iOS and Web

One of the goals was to build out a native iOS app and a responsive web application in parallel. We couldn't afford to design for each platform in a silo. This meant coming up with a design system that can be used for both platforms while still keeping in mind all the best practices and native behaviors for each platform.

sign up and log in wireframe 1

Designing the sign up and log in experience for iOS

In this user flow, we break down the sign up and login flow into all it's corresponding actions. From verifying a phone number to helping a user out when they can't figure out their password. Even more important, we make sure to design for any errors the user may encounter during this process. We're using Amazon Cognito which comes with standard developer savvy error messages. We wanted to translate as many of those into plain English for our users to quickly know where they stand and take action.

High level user flow

Download to get a closer look.

high level user flow

Wireframes

I didn't spend too much time wireframing this flow. I already had a few patterns and design elements I had established on previous flows that I wanted to incorporate. Instead, I quickly mocked up a few screens to help give me a slight nudge in the right direction.

sign up and log in wireframe 1
sign up and log in wireframe 2

UI/UX

We wanted to really simplify the very first screen a user sees right after the app launches. You can simply either sign up or log in. But, at the same time, we wanted to give the user some context as to what exactly we offer. Three simple pillars to the product - you can rent a car from hundreds of local hosts, you're automatically insured, and or you can make money by listing your car.

Using Framer X, I enhanced the on-boarding experience from a simple image to a background video with content scrolling horizontally. The video itself is to be determined. We eventually want to use a video that showcases briefly the whole booking and listing experience.

On-boarding experience - prototype

Throughout the rest of the flow, whether you sign up or log in, all the screens are very much straight forward. Using white space to help separate elements, and hints of colors to call out any tertiary actions - for example, "Forgot your password".

Log in & forgot password - prototype

When there's an error a subtle slider appears from the bottom up pointing out the error along with the field it corresponds to.

Sign up with error - prototype

Designing the booking your car experience for iOS

The booking experience is broken down into four sections — explore page, search results, car details, and checkout. Each of these sections is then broken down into smaller sub-sections of actions a user can take — which is what made this user flow an interesting challenge.

High level user flow

Download to get a closer look.

high level user flow

Wireframes

users first time booking a car wireframe

UI/UX

For the explore page we wanted to keep the search action front and center with a clear message as to what you can do on this screen, "Search and rent a car from hundreds of local hosts". We divided the page into four sections highlighting the type of cars on our platform. Towards the end, we provide the user with a secondary action "List your car".

Explore page

Explore page

When a user does a search they'll be able to see their results with a more advanced search bar. Here you can refine your date, or filter through specific options.

We also wanted the search bar to get out of the user's way when not in use. Which is why as a user is scrolling down his feed the bar slides up and out of view. And comes back down once a user starts scrolling back up. Again, we still keep the secondary action of listing your car towards the end.

Search results - prototype

When a user clicks on a specific car they'll be taken to that car's details page. Here a user will be able to see a more granular breakdown — miles included, a brief description, features, past trip reviews, car owner information, guidelines, the ability to report the listing, other additional cars the user might like, and the price per day. The price per day always stays within the user's sight while scrolling.

Car details page

Car details

When a user decides to move forward with the price they'll be taken to a checkout screen. Here you get a summary of what you're about to confirm and pay for. The two most important themes on this screen are the full price breakdown, and the verification steps before a user can rent a car. Once the user completes all the verification steps their primary button now displays "Request to book this car". From here on out the user has to wait for the host to approve the booking. Typically the host has 8 hours to respond back.

Checkout

Checkout

Checkout - all verified

Checkout all verified

Booking a car - prototype

Designing the listing your car experience for iOS

The listing your car experience was a bit challenging because we had to take this long process and try to make it as seamless as possible to the user. We definitely wanted to avoid long drawn out forms.

In the user flow we ask for location of the car, the type of car your listing, verify that we accept that type of car, verify your identity—through the use of phone verification, license verification, entering any additional car information, taking a profile picture, pricing, reviewing & accepting our terms of service, and publishing your listing. With all this, of course, we had to take into account any errors a user may encounter.

High level user flow

Download to get a closer look.

high level user flow

Wireframes

listing your car wireframe listing your car wireframe

UI/UX

The challenge for "listing your car" flow was how long it was. We're asking for all this information but at the same time promising that it wouldn't take more than just a few minutes. To address this we broke down the process into smaller chunks and provided the user only a few questions and actions to take at once.

Before the user even gets started we provide a few "peace of mind" slides. Hopefully, this helps nudge the user into moving forward by addressing any doubts they may have and showing the benefits of listing with us.

Peace of mind

We break the rest of the process into three main action steps — check to see if your car is eligible, I.D. verification, and Last step. Once a user completes each of these steps they'll see a green checkmark. As the user is filling out specific actions and questions they'll see a progress bar above their navigation tab. Again, the goal with these design elements is to help reduce a user's anxiety and stress of filling out forms. This way the user always knows where they are in the process.

Progress

Listing your car - prototype