ROLE : Lead Product Designer (Freelance)

SUPPORT : Co-founders, Engineering

WEBSITE : RIDE HUB

 

The Ride Hailing App

RideHub is a new ride hailing app that provides users with a one-stop-shop for ride-hail and taxi fare comparisons. The app covers all major providers across London including Uber, Free Now, Bolt, OLA and Gett.

I was approached by the founders to take on the project to help them achieve their vision.

After just launching the app in June 2020. The app needed an overhaul to help increase its DAU, improve its brand, product and UX.

In the news

Onboarding Flow

Onboarding Flow

Approach

After the user testing the app on maze I uncovered a number of issues that the users were facing while navigating the app. Based of the feedback we decided to redesign the whole app including a new identity and branding to help build a better sense of trust and reliably for the app. In particular I focussed on the following things.

Search optimisation : A smoother transition between entering the destination and pickup to search results. With the option of quickly selecting previous and common trips.

Saved destination : One of the most requested features by the user base, this was designed with the capability of editing your saved destinations.

Better search results : A clearer way of displaying results, which highlight cheapest and quickest options, with better filtered results.

Budgeting : A more in-depth way to show users how much money they have saved on each trip and a way to track their spend throughout the year.

General UX / UI upgrades : these included faster load times, better UX copy, modals to inform user behaviour, consistent UI through out the app.

4d's-ridehub.png
Current App Breakdown

Current App Breakdown

Experimentation

After some initial research and discovery, I mocked up some low-fed wireframes to work out the general flow of the app, in particular things like the search flows and the budgeting feature.

I was looking closely at how icons would be displayed for surge pricing for example. I also wanted to highlight the cheapest and quickest options, so was exploring ideas around how I could make these options more prominent. I was also exploring dark layout combinations, with bright purples and greens as high contrasting colours.

Search Exploration

Search Exploration

Layout Options

I started exploring UI around the search results page - as I felt this one of the most important pages of the app. The option on the left was more of comparative layout where it gave equal weight to both the cheapest and quickest options.

The layout on the right stacked the options to make it more legible and more in tune with a list type layout with filtering.

Layout Exploration

Layout Exploration

The Minimal Design

After a few iterations - I decided to focus the UI into more of a minimal design and layout. When testing, the design on white background performed much better, making it more legible at the same time.

I found that I could still make the design work with highlights of purple and green to create prominence for specific areas.

Final Design

Final Design

Prototype Interaction

 
Previous
Previous

The Made Homepage

Next
Next

The AR Feature