ThumbUp: Carpool App UI Design
PROJECT OVERVIEW
- Individual course project for INF2191: User Interface Design
- Platform used: Figma, Canva, Miro
- Developed user flow
- Created and refined the design system
- Create wireframes & Prototypes
- Developed the mobile interface for Thumb-Up, an activity based carpool app using design system and includes both light mode and dark mode
- Established design system
- High-fidelity wireframes & prototypes
BACKGROUND
About Thumbup
Thumbup is imagined as a carpool platform that connects drivers and travellers based on their routes and shared events/activities for which they might be travelling for. This allows them to find buddies to do fun activities together while saving the travel costs & offsetting environmental guilt.
The existing carpool apps in the market focus on connecting people based on their shared route, but few of them explore the shared activity they might be both travelling to. Therefore, Thumb-up has two differentiate features:
- Combines the feature of car-pool and & making friends/finding buddies with people with similar interests
- Like a combination of Uber & Meet-up.
- Allows users to document their trip customization officially (e.g., pick-up/drop-off location)
- Beyond informal chat/messages between the drivers and passengers.
Target Audience
- 25 years old
- Live in the City
- Enjoy outdoor sports
- Still in the process of getting a driver’s license
- “Most places I want to go are in small towns, and they are unreachable without a car.”
- “My friends are not interested in those types of activities, so no one wants to go with me.”
- “It’s always a headache to find a carpool that actually matches my route and time.”
- 35 years old
- Travel between the city and towns
- Enjoy outdoor sports
- Have leased a car recently
- “The oil price is skyrocketing now!”
- “Long drives are boring. I would love to have som companies during the long drive.”
- “Even I can drive myself there, it's boring to do those activities myself”
USER FLOW
Browse the trips that they might like
Review trip detailed information such as activity, driver, and passenger
Fill out basic information such as name, email, phone number in order to book the trip
Receive information that the trip is booked successfully
Review information that has been entered to make sure they are accurate
[Potential Error State] Correct the incorrect information
[Potential Error State] Review the information again and ensure information is accurate this time
Enter card information and confirm payment
Receive information that the trip is booked successfully
DESIGN SYSTEM
To make my design more systematic, repeatable and easy to create both light/dark modes, I developed a comprehensive design system in Figma. The below are some snippets of the design system, to see details of the design system, please visit the Figma Link.
Design System Quick Guide
Color Variables
Components
Results
Main Screens
Main Screens (Dark)
Prototypes
REFLECTIONS
I am very excited to share that a few things that I've learnt from this project, including:
1. Working with Figma Variables: Before this project, I hadn't have the chance to operate this new exciting Figma feature. Completing this project enables me to understand how to structure different levels of variables to make changing values systematically easier - especially when working with both dark and light mode.
2. How to work with a (fairly) large design system: Although the scope of the project isn't overly large, given that it is an individual project, there is still some work for me to handle! Therefore, I learnt some strategies - for example, create a excel spreadsheet to help me keep track of all the components that I wanted to create and the use of them.
