#designsystem
#designsystem
#designsystem
#web
#web
#web
#Figma
#Figma
#Figma
Yello Taxi – UX/UI Case Study
Yello Taxi – UX/UI Case Study
Yello Taxi – UX/UI Case Study
Yello Taxi – UX/UI Case Study
Yello Taxi – UX/UI Case Study
Yello Taxi – UX/UI Case Study
Yello is a transportation app made for Madar Consulting company, this app allows passengers to take a ride with taxi drivers charge fares and get paid. More specifically,
Yello is designed to faciliate and improve the transport service. My mission was to define and make some research on taxi services also to design the app interfaces.
Yello is a transportation app made for Madar Consulting company, this app allows passengers to take a ride with taxi drivers charge fares and get paid. More specifically,
Yello is designed to faciliate and improve the transport service. My mission was to define and make some research on taxi services also to design the app interfaces.
Yello is a transportation app made for Madar Consulting company, this app allows passengers to take a ride with taxi drivers charge fares and get paid. More specifically,
Yello is designed to faciliate and improve the transport service. My mission was to define and make some research on taxi services also to design the app interfaces.
Yello is a transportation app made for Madar Consulting company, this app allows passengers to take a ride with taxi drivers charge fares and get paid. More specifically,
Yello is designed to faciliate and improve the transport service. My mission was to define and make some research on taxi services also to design the app interfaces.
Yello is a transportation app made for Madar Consulting company, this app allows passengers to take a ride with taxi drivers charge fares and get paid. More specifically,
Yello is designed to faciliate and improve the transport service. My mission was to define and make some research on taxi services also to design the app interfaces.
Yello is a transportation app made for Madar Consulting company, this app allows passengers to take a ride with taxi drivers charge fares and get paid. More specifically,
Yello is designed to faciliate and improve the transport service. My mission was to define and make some research on taxi services also to design the app interfaces.
Feb 2020 - Aug 2020
Timeline
(Brand Identity, UX/UI, Web Design)
Role
Feb 2020 - Aug 2020
Timeline
(Brand Identity, UX/UI, Web Design)
Role
Background
Background
In Tunisia, the taxi industry remains a vital part of urban and suburban mobility. However, both drivers and passengers often face challenges such as lack of ride transparency, inefficient communication, no real-time tracking, and outdated interfaces.
Yello Taxi was designed as a modern solution tailored to Tunisian users, aiming to digitize and streamline the traditional taxi experience while respecting local behaviors and expectations.
In Tunisia, the taxi industry remains a vital part of urban and suburban mobility. However, both drivers and passengers often face challenges such as lack of ride transparency, inefficient communication, no real-time tracking, and outdated interfaces.
Yello Taxi was designed as a modern solution tailored to Tunisian users, aiming to digitize and streamline the traditional taxi experience while respecting local behaviors and expectations.
Our Approach
Our Approach
1
The project followed a structured 4-week sprint, emphasizing user-centered design and clear task breakdown: 🔹 Week 1 – Research & Task Planning Identified problems faced by Tunisian taxi drivers and passengers through user interviews and competitor analysis (Bolt, OTO, InDrive). Defined dual user roles: Driver and Client, each with unique goals and pain points. 🔹 Week 2 – Wireframes & User Flows Created low-fidelity wireframes and defined a smooth booking and ride-tracking experience for both parties. 🔹 Week 3 – UI Design & Visual Identity Established a bold, recognizable visual language using: - Yellow (#FDE047): visibility and local relevance (matches Tunisian taxis) - Dark Blue & Black: contrast and clarity - Chose Poppins for a clean, modern feel - Designed a full icon set aligned with key features like maps, history, checkout, and navigation. 🔹 Week 4 – Final Screens & Prototyping Delivered high-fidelity screens for: - Onboarding - Ride request - Map tracking (with driver/client views) - Checkout - History and report screens - Prepared for responsive mobile implementation.
1
The project followed a structured 4-week sprint, emphasizing user-centered design and clear task breakdown: 🔹 Week 1 – Research & Task Planning Identified problems faced by Tunisian taxi drivers and passengers through user interviews and competitor analysis (Bolt, OTO, InDrive). Defined dual user roles: Driver and Client, each with unique goals and pain points. 🔹 Week 2 – Wireframes & User Flows Created low-fidelity wireframes and defined a smooth booking and ride-tracking experience for both parties. 🔹 Week 3 – UI Design & Visual Identity Established a bold, recognizable visual language using: - Yellow (#FDE047): visibility and local relevance (matches Tunisian taxis) - Dark Blue & Black: contrast and clarity - Chose Poppins for a clean, modern feel - Designed a full icon set aligned with key features like maps, history, checkout, and navigation. 🔹 Week 4 – Final Screens & Prototyping Delivered high-fidelity screens for: - Onboarding - Ride request - Map tracking (with driver/client views) - Checkout - History and report screens - Prepared for responsive mobile implementation.
1
The project followed a structured 4-week sprint, emphasizing user-centered design and clear task breakdown: 🔹 Week 1 – Research & Task Planning Identified problems faced by Tunisian taxi drivers and passengers through user interviews and competitor analysis (Bolt, OTO, InDrive). Defined dual user roles: Driver and Client, each with unique goals and pain points. 🔹 Week 2 – Wireframes & User Flows Created low-fidelity wireframes and defined a smooth booking and ride-tracking experience for both parties. 🔹 Week 3 – UI Design & Visual Identity Established a bold, recognizable visual language using: - Yellow (#FDE047): visibility and local relevance (matches Tunisian taxis) - Dark Blue & Black: contrast and clarity - Chose Poppins for a clean, modern feel - Designed a full icon set aligned with key features like maps, history, checkout, and navigation. 🔹 Week 4 – Final Screens & Prototyping Delivered high-fidelity screens for: - Onboarding - Ride request - Map tracking (with driver/client views) - Checkout - History and report screens - Prepared for responsive mobile implementation.
1
The project followed a structured 4-week sprint, emphasizing user-centered design and clear task breakdown: 🔹 Week 1 – Research & Task Planning Identified problems faced by Tunisian taxi drivers and passengers through user interviews and competitor analysis (Bolt, OTO, InDrive). Defined dual user roles: Driver and Client, each with unique goals and pain points. 🔹 Week 2 – Wireframes & User Flows Created low-fidelity wireframes and defined a smooth booking and ride-tracking experience for both parties. 🔹 Week 3 – UI Design & Visual Identity Established a bold, recognizable visual language using: - Yellow (#FDE047): visibility and local relevance (matches Tunisian taxis) - Dark Blue & Black: contrast and clarity - Chose Poppins for a clean, modern feel - Designed a full icon set aligned with key features like maps, history, checkout, and navigation. 🔹 Week 4 – Final Screens & Prototyping Delivered high-fidelity screens for: - Onboarding - Ride request - Map tracking (with driver/client views) - Checkout - History and report screens - Prepared for responsive mobile implementation.
1
The project followed a structured 4-week sprint, emphasizing user-centered design and clear task breakdown: 🔹 Week 1 – Research & Task Planning Identified problems faced by Tunisian taxi drivers and passengers through user interviews and competitor analysis (Bolt, OTO, InDrive). Defined dual user roles: Driver and Client, each with unique goals and pain points. 🔹 Week 2 – Wireframes & User Flows Created low-fidelity wireframes and defined a smooth booking and ride-tracking experience for both parties. 🔹 Week 3 – UI Design & Visual Identity Established a bold, recognizable visual language using: - Yellow (#FDE047): visibility and local relevance (matches Tunisian taxis) - Dark Blue & Black: contrast and clarity - Chose Poppins for a clean, modern feel - Designed a full icon set aligned with key features like maps, history, checkout, and navigation. 🔹 Week 4 – Final Screens & Prototyping Delivered high-fidelity screens for: - Onboarding - Ride request - Map tracking (with driver/client views) - Checkout - History and report screens - Prepared for responsive mobile implementation.
Solutions
Solutions
1
✅ Dual Role App
- Clear split between Client and Driver interfaces - Optimized for local mobile users and familiar behaviors
1
✅ Dual Role App
- Clear split between Client and Driver interfaces - Optimized for local mobile users and familiar behaviors
1
✅ Dual Role App
- Clear split between Client and Driver interfaces - Optimized for local mobile users and familiar behaviors
1
✅ Dual Role App
- Clear split between Client and Driver interfaces - Optimized for local mobile users and familiar behaviors
1
✅ Dual Role App
- Clear split between Client and Driver interfaces - Optimized for local mobile users and familiar behaviors
1
📍 Live Ride Tracking & Interactive Maps
- Dark/light mode map UIs for different user contexts - Real-time feedback and movement visuals
1
📍 Live Ride Tracking & Interactive Maps
- Dark/light mode map UIs for different user contexts - Real-time feedback and movement visuals
1
📍 Live Ride Tracking & Interactive Maps
- Dark/light mode map UIs for different user contexts - Real-time feedback and movement visuals
1
📍 Live Ride Tracking & Interactive Maps
- Dark/light mode map UIs for different user contexts - Real-time feedback and movement visuals
1
📍 Live Ride Tracking & Interactive Maps
- Dark/light mode map UIs for different user contexts - Real-time feedback and movement visuals
1
💬 Simplified Booking & Confirmation Flows
- Instant ride requests and confirmations - Transparent fare display before checkout
1
💬 Simplified Booking & Confirmation Flows
- Instant ride requests and confirmations - Transparent fare display before checkout
1
💬 Simplified Booking & Confirmation Flows
- Instant ride requests and confirmations - Transparent fare display before checkout
1
💬 Simplified Booking & Confirmation Flows
- Instant ride requests and confirmations - Transparent fare display before checkout
1
💬 Simplified Booking & Confirmation Flows
- Instant ride requests and confirmations - Transparent fare display before checkout
1
📊 Driver Dashboard & Reports
- Daily, weekly, and monthly performance metrics - Clean history screen for client ride reviews and rebooking
1
📊 Driver Dashboard & Reports
- Daily, weekly, and monthly performance metrics - Clean history screen for client ride reviews and rebooking
1
📊 Driver Dashboard & Reports
- Daily, weekly, and monthly performance metrics - Clean history screen for client ride reviews and rebooking
1
📊 Driver Dashboard & Reports
- Daily, weekly, and monthly performance metrics - Clean history screen for client ride reviews and rebooking
1
📊 Driver Dashboard & Reports
- Daily, weekly, and monthly performance metrics - Clean history screen for client ride reviews and rebooking
Tools
Tools
Figma
Google Slides
Conclusion
Yello Taxi demonstrates how thoughtful UX/UI design can elevate a traditional industry through modern, intuitive solutions.
Through this project, I gained deeper insights into:
Designing for dual user roles (driver/client)
Creating culturally relevant visual identities
Building functional, beautiful, and usable interfaces from scratch
This project showcases my ability to take a real-world, local problem and solve it with design that’s both strategic and human-centered.
We've worked with Aymen multiple times, and it has always been a pleasure! He helped us craft engaging landing pages that convert well. Aymen works in a very timely manner and always ensures that you are fully satisfied with the results!
Khalil Slimi
Co-founder Madar Consulting
We've worked with Aymen multiple times, and it has always been a pleasure! He helped us craft engaging landing pages that convert well. Aymen works in a very timely manner and always ensures that you are fully satisfied with the results!
Khalil Slimi
Co-founder Madar Consulting
We've worked with Aymen multiple times, and it has always been a pleasure! He helped us craft engaging landing pages that convert well. Aymen works in a very timely manner and always ensures that you are fully satisfied with the results!
Khalil Slimi
Co-founder Madar Consulting
We've worked with Aymen multiple times, and it has always been a pleasure! He helped us craft engaging landing pages that convert well. Aymen works in a very timely manner and always ensures that you are fully satisfied with the results!
Khalil Slimi
Co-founder Madar Consulting
We've worked with Aymen multiple times, and it has always been a pleasure! He helped us craft engaging landing pages that convert well. Aymen works in a very timely manner and always ensures that you are fully satisfied with the results!
Khalil Slimi
Co-founder Madar Consulting
