UX

prototyping

research

design system

visual design

RideFair

RideFair

RideFair

RideFair

RideFair

RideFair

Designing a web 5 ride-sharing app for a hackathon organized by TBD5.

Designing a web 5 ride-sharing app for a hackathon organized by TBD5.

Designing a web 5 ride-sharing app for a hackathon organized by TBD5.

Designing a web 5 ride-sharing app for a hackathon organized by TBD5.

Designing a web 5 ride-sharing app for a hackathon organized by TBD5.

Designing a web 5 ride-sharing app for a hackathon organized by TBD5.

4 weeks

Timeline

Product Designer

Role

1 Designer, 1 Dev

Collaborators

4 weeks

Timeline

Product Designer

Role

1 Designer, 1 Dev

Collaborators

Background

Background

RideFair stands as a decentralized ride-sharing mobile app. Our platform utilizes Web5 technology, granting users full control over their data. This effectively eliminates interference and misuse of your information by central entities and big corporations. No more targeted ads or unauthorized sale of your data. With RideFair, your data is safe and in your control; empowering you with privacy and protection.

RideFair stands as a decentralized ride-sharing mobile app. Our platform utilizes Web5 technology, granting users full control over their data. This effectively eliminates interference and misuse of your information by central entities and big corporations. No more targeted ads or unauthorized sale of your data. With RideFair, your data is safe and in your control; empowering you with privacy and protection.

Problem

Currently, web2 ride-sharing companies are harvesting user data and potentially selling it to third parties which make users targets for data breaches, hacking, ads, and more.

How might we develop a ride-sharing application that empowers users to maintain control over their personal data, ensuring a secure and confident travel experience?

Solution

Solution

1

Protect user data

Using web 5 technologies, we decentralized user data; giving them access to our app without forcing them to surrender their data to a centralized entity. Users have full privacy and control of their data.

1

Protect user data

Using web 5 technologies, we decentralized user data; giving them access to our app without forcing them to surrender their data to a centralized entity. Users have full privacy and control of their data.

1

Protect user data

Using web 5 technologies, we decentralized user data; giving them access to our app without forcing them to surrender their data to a centralized entity. Users have full privacy and control of their data.

2

Maximize rider safety

We enhance safety for riders, empower them with more control, and minimizing the amount of data they are required to share at each point in the process. We also notify them of who will have access to it and when.

2

Maximize rider safety

We enhance safety for riders, empower them with more control, and minimizing the amount of data they are required to share at each point in the process. We also notify them of who will have access to it and when.

2

Maximize rider safety

We enhance safety for riders, empower them with more control, and minimizing the amount of data they are required to share at each point in the process. We also notify them of who will have access to it and when.

3

Champion driver equity

Giving riders more control also opens the door to unfair biases. We protect drivers from rider discrimination and bias, that would otherwise perpetuate systemic inequality and hurt their income.

3

Champion driver equity

Giving riders more control also opens the door to unfair biases. We protect drivers from rider discrimination and bias, that would otherwise perpetuate systemic inequality and hurt their income.

3

Champion driver equity

Giving riders more control also opens the door to unfair biases. We protect drivers from rider discrimination and bias, that would otherwise perpetuate systemic inequality and hurt their income.

Discover and Define

The travel & transport industry is one of the least trusted industries regarding sharing data (BCG 2022). Knowing that users are most concerned about the misuse of their data by products in the travel and transportation industry, we wanted to tackle this problem space.

Tools

Tools

Figma

Maze

Defining 2 User Types: Rider and Driver

While our primary focus for the MVP app was centered on the rider’s perspective, we wanted to acknowledge the driver’s pain points and goals. We wanted to include the drivers as a key stakeholder group that we would need to develop and cater to in future iterations.

User Journey Mapping

We determined two major pain points in the user journey to focus on.

  1. Setting up an account. Because users information is sensitive, this is one barrier to entry preventing more users from engaging with ride-sharing apps.

  2. Selecting a driver. People are apprehensive about meeting strangers, much less getting into a car with them. We want to alleviate this stress as much as possible.

User Flows

Testing Wireframes

After creating a low-fidelity prototype, we set up a guided usability test using the tool Maze. We focused on two flows:

1. Onboarding: Were people able to understand our app’s onboarding (In the sense, that do they feel more or less secure with their data privacy with our app being decentralized)? Are they able to sign up without friction?
2. Booking a ride: Did our hypothesis of matching drivers to riders make them more secure? If so, how should we optimize it? Where did they have the most friction when booking a ride?

Design Improvements

Improvement #1 - Easier login

Initially, we restricted users to selecting only one driver, resulting in slower wait times. To empower riders in their choices and mitigate bias, we introduced the option for users to filter based on preferences, including ratings and a specific category for women and non-binary drivers. Because we recognized the potential for bias or profiling against certain drivers in our initial approach, we opted for a direction that not only provides an alternative path to narrow selection but also upholds ethical standards.

Improvement #2 - Driver matching to improve safety, speed, & equity

Our initial approach allowing users to choose their driver resulted in two issues:

1. If that driver isn't available, the rider must rematch with another driver, leading to slower wait times.
To solve for this, we established a driver queue. Riders confirm sharing their ride request with all drivers in the queue. The first driver has 10 seconds to accept; if not, the queue moves to the next, streamlining the process.

2. This method had the potential for bias or profiling against certain drivers.
We knew that allowing for user choice would come at a cost. We also discovered that 91% of rape victims were riders and of these, 81% were women (CNN.com, 2022). So, we decided to prioritize these groups. We created two filters: one that allows users to filter for higher ratings and one for women and LBGTQ+ drivers.

Final Screens

Visual Design

While building our design system, we focused on 3 main aspects:

Logo

HeroIcons

There’s 4 types: micro (16px), mini (20px), outline (24px), and filled (24px)

user-circle

user

chevron-down

chevron-left

chevron-right

chevron-up

adjustments-horizontal

arrow-down

arrow-left

arrow-right

arrow-up

arrow-uturn-down

arrow-uturn-left

arrow-left-circle

arrow-right-circle

check-circle

lock-closed

information-circle

question-mark-circle

star

magnifying-glass

map

map-pin

cog-8-tooth

home

eye

eye-slash

car

x-mark

Neutrals

50

#F4F7F7

100

#E2E9EB

200

#C9D5D8

300

#A3B7BD

500

#5A7680

700

#363E43

800

#252b2f

900

#0f1214

Blue

300

#71C4F4

500

#1976D2

700

#0D3B69

900

#061E35

Gradient-Blue

#63d3ed

#71C4F4

Body

Name

Weight

Pixels

Line Height

Aa —Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam, vivamus duis laoreet amet. Aliquet elementum ultrices molestie netus donec pellentesque quis.

text-xs

Normal

12px

0.75rem

18px,

150%

Aa — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam, vivamus duis laoreet amet. Aliquet elementum ultrices molestie netus donec pellentesque quis.

text-sm

Normal

14px, 0.875rem

21px,

150%

Aa — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam, vivamus duis laoreet amet. Aliquet elementum ultrices molestie netus donec pellentesque quis.

text-base

Normal

16px,

1rem

24px,

150%

Aa — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam, vivamus duis laoreet amet. Aliquet elementum ultrices molestie netus donec

text-base

Semi-Bold

16px,

1rem

24px,

150%

Headings

Name

Weight

Pixels

Line Height

Aa — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam, vivamus duis laoreet amet. Aliquet elementum ultrices molestie netus

text-lg

Semi-Bold

18px

125%

Aa — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam, vivamus duis laoreet amet. Aliquet elementum ultrices

text-xl

Semi-Bold

20px

125%

Aa — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam, vivamus duis laoreet amet.

text-2xl

Semi-Bold

24px

125%

Aa — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam, vivamus

text-3xl

Semi-Bold

30px

125%

Aa — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam,

text-4xl

Semi-Bold

36px

125%

Aa — Lorem ipsum dolor sit amet, consectetur

text-5xl

Semi-Bold

48px

125%

Navigation

Navigation Items

Home

Rides

Profile

Home

Rides

Text Inputs

4 states: standard, hover, active, and filled.

4 types: textfield, search error, disabled. There’s currently no use-case for a success type button.

2 sizes: Large (height: 56px) and Small (40px)

First Name

First name

First Name

First name

First Name

First Name

First Name

First Name

First Name

* Description

First name

First Name

* Description

First name

First Name

* Description

First Name

Standard

Textfield

Search

Error

Disabled

Active

Filled

Imagery

Imagery includes photograph, illustrations. We use crafted car illustrations from Storyset (Rafiki), and photography from Unsplash.

Ride Options

Drivers

Profile Avatar

Onboarding Illustrations

Buttons, Chips, Toggle

Buttons

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Button field

Standard

Primary

Secondary

Tertiary

Pressed

Disabled

Icon Buttons

Toggle switch

Filter Chip

Filter (2)

Reflections

Balancing the needs of conflicting user groups

We realized how challenging it was to balance the needs of riders and drivers, especially regarding ethics and product objectives. We wanted to champion rider safety and privacy, leading us to explore allowing users to choose their own drivers. However, we realized that this left too much room for bias and discrimination against drivers. Ultimately, equity benefits everyone, and that had to take priority over the initial vision of user choice. If we had more time, I would have wanted to run a usability testing experiment to see what patterns emerge when riders choose their own driver given a selection of diverse profiles.

Imagining a new generation of the web

Because web 5 is a new generation of the web, it proved especially challenging to imagine how various aspects of our product should look. As a result, designing for web 5 required a lot of creativity and flexibility.

Reflections

Balancing the needs of conflicting user groups

Balancing the needs of conflicting user groups

We realized how challenging it was to balance the needs of riders and drivers, especially regarding ethics and product objectives. We wanted to champion rider safety and privacy, leading us to explore allowing users to choose their own drivers. However, we realized that this left too much room for bias and discrimination against drivers. Ultimately, equity benefits everyone, and that had to take priority over the initial vision of user choice. If we had more time, I would have wanted to run a usability testing experiment to see what patterns emerge when riders choose their own driver given a selection of diverse profiles.

We realized how challenging it was to balance the needs of riders and drivers, especially regarding ethics and product objectives. We wanted to champion rider safety and privacy, leading us to explore allowing users to choose their own drivers. However, we realized that this left too much room for bias and discrimination against drivers. Equity had to take priority over the initial vision of user choice. If we had more time, I would have wanted to run a usability testing experiment to see what patterns emerge when riders choose their own driver given a selection of diverse profiles.

Balancing the needs of conflicting user groups

We realized how challenging it was to balance the needs of riders and drivers, especially regarding ethics and product objectives. We wanted to champion rider safety and privacy, leading us to explore allowing users to choose their own drivers. However, we realized that this left too much room for bias and discrimination against drivers. Ultimately, equity benefits everyone, and that had to take priority over the initial vision of user choice. If we had more time, I would have wanted to run a usability testing experiment to see what patterns emerge when riders choose their own driver given a selection of diverse profiles.

Imagining a new generation of the web

Imagining a new generation of the web

Imagining a new generation of the web

Because web 5 is a new generation of the web, it proved especially challenging to imagine how various aspects of our product should look. As a result, designing for web 5 required a lot of creativity and flexibility.