UX/UI Project: Favio
Same-day delivery progressive web app platform that promotes sustainable delivery options, giving the user the choice of a more affordable and environmentally friendly alternative.
Visit Favio
Client: Langara College 2023
UX/UI Project: Favio
Same-day delivery progressive web app platform that promotes sustainable delivery options, giving the user the choice of a more affordable and environmentally friendly alternative.
Visit Favio
Client: Langara College 2023
Project Scope
Develop a responsive mobile/desktop progressive web app (PWA) utilizing camera and map feature.
My Role:
Team Members:
Timeline:
Tool:
Lead UX UI Designer,
UX Research, Branding
4 Developers, 3 Designers
12 weeks (Design 6 weeks)
Project Overview
Opportunity
Nowadays, same-day delivery services are common; however, there are few options in the market, and using cars to deliver small packages is expensive and not environmentally friendly.
High delivery cost per package
1
Lack of package sizes option
2
No sustainable delivery option
3
Our Solution
Favio offers peer-to-peer delivery services for small businesses and casual users who want to quickly deliver their packages within the city.
Cheaper
base-fare
Eco-friendly options
Package size customization
Timeline: May - July 2023
User Research: Competitor Analysis, User Persona
1
Week
Userflow, Sitemap
2
Week
Wireframes
3
Week
Branding, Logo
5
Week
Mock Ups & Ui kit
7
Week
Product Launch
12
Week
Userflow
Our application has different flow for package sender and rider.
The rider flow can pickup packages and schedule deliveries, while the senders can make delivery requests. Both users can also view delivery history and setup their profile.
Design Process
Competitor Analysis
Competitors in small package delivery space are: Uber, TaskRabbit, and Doordash. They offer similar services, but none of them includes all the listed features.
For affordability, Uber and TaskRabbit are on the expensive side, charging 14 CAD for a 10-minute delivery regardless of package size. Doordash is more affordable but only drop off packages at local service offices. Non of our competitors offer e-vehicle options for delivery.
User Persona
We have 2 types of users, the package senders and Favio riders.
Sender Persona
Rider Persona
Visit Favio
Client: Langara College 2023
Client: Langara College 2023
Client: Langara College 2023
Same-day delivery progressive web app platform that promotes sustainable delivery options, giving the user the choice of a more affordable and environmentally friendly alternative.
UX/UI Project: Favio
Same-day delivery progressive web app platform that promotes sustainable delivery options, giving the user the choice of a more affordable and environmentally friendly alternative.
UX/UI Project: Favio
Visit Favio
Project Scope
Develop a responsive mobile/desktop progressive web app (PWA) utilizing camera and map feature.
My Role:
Team Members:
Timeline:
Tool:
Lead UX UI Designer,
UX Research, Branding
4 Developers, 3 Designers
12 weeks (Design 6 weeks)
Project Overview
Opportunity
Nowadays, same-day delivery services are common; however, there are few options in the market, and using cars to deliver small packages is expensive and not environmentally friendly.
High delivery cost per package
1
Lack of package sizes option
2
No sustainable delivery option
3
Our Solution
Favio offers peer-to-peer delivery services for small businesses and casual users who want to quickly deliver their packages within the city.
Package size customization
Cheaper
base-fare
Eco-friendly options
Timeline: May - July 2023
User Research: Competitor Analysis, User Persona
1
Week
Userflow, Sitemap
2
Week
Wireframes
3
Week
Branding, Logo
5
Week
Mock Ups & Ui kit
7
Week
Product Launch
12
Week
Project Scope
Develop a responsive mobile/desktop progressive web app (PWA) utilizing camera and map feature.
My Role:
Team Members:
Timeline:
Tool:
Lead UX UI Designer,
UX Research, Branding
4 Developers, 3 Designers
12 weeks (Design 6 weeks)
Project Overview
Opportunity
Nowadays, same-day delivery services are common; however, there are few options in the market, and using cars to deliver small packages is expensive and not environmentally friendly.
High delivery cost per package
1
Lack of package sizes option
2
No sustainable delivery option
3
Our Solution
Favio offers peer-to-peer delivery services for small businesses and casual users who want to quickly deliver their packages within the city.
Eco-friendly options
Cheaper
base-fare
Package size customization
Timeline: May - July 2023
User Research: Competitor Analysis, User Persona
1
Week
Userflow, Sitemap
2
Week
Wireframes
3
Week
Branding, Logo
5
Week
Mock Ups & Ui kit
7
Week
Product Launch
12
Week
Design Process
Competitor Analysis
Competitors in small package delivery space are: Uber, TaskRabbit, and Doordash. They offer similar services, but none of them includes all the listed features.
For affordability, Uber and TaskRabbit are on the expensive side, charging 14 CAD for a 10-minute delivery regardless of package size. Doordash is more affordable but only drop off packages at local service offices. Non of our competitors offer e-vehicle options for delivery.
User Persona
We have 2 types of users, the package senders and Favio riders.
Sender Persona
Rider Persona
User Persona
We have 2 types of users, the package senders and Favio riders.
Rider Persona
Sender Persona
Userflow
Our application has different flow for package sender and rider.
The rider flow can pickup packages and schedule deliveries, while the senders can make delivery requests. Both users can also view delivery history and setup their profile.
Userflow
Our application has different flow for package sender and rider.
The rider flow can pickup packages and schedule deliveries, while the senders can make delivery requests. Both users can also view delivery history and setup their profile.
Userflow
Our application has different flow for package sender and rider.
The rider flow can pickup packages and schedule deliveries, while the senders can make delivery requests. Both users can also view delivery history and setup their profile.
Wireframes
We started the wireframes process by creating paper sketches. Subsequently, I took on the task of designing the main delivery and view history feature screens, then we delegated the mid-fidelity screens.
First, the users must decide whether to log in as a sender or a rider.
Choose user type
Create account
We started the wireframes process by creating paper sketches. Subsequently, I took on the task of designing the main delivery and view history feature screens, then we delegated the mid-fidelity screens.
First, the users must decide whether to log in as a sender or a rider.
Choose user type & create account
We started the wireframes process by creating paper sketches. Subsequently, I took on the task of designing the main delivery and view history feature screens, then we delegated the mid-fidelity screens.
Choose user type & create account
First, the users must decide whether to log in as a sender or a rider.
User: Driver
Delivery Process
The mobile wireframes was designed first, considering that riders are more likely to use mobile devices.
After login, the driver must turn on their availability status, they can see their on process & completed deliveries here.
1
The driver can choose to reject or accept the delivery as the pop-up detail appears after senders made the request.
2
The driver can keep track and update their delivery process by using checklist.
3
After complete delivery, driver has to take proof of delivery picture.
4
Confirmation message appears after delivery is done.
5
Delivery Process
Delivery Process
The mobile wireframes was designed first, considering that riders are more likely to use mobile devices.
The mobile wireframes was designed first, considering that riders are more likely to use mobile devices.
1
2
3
4
5
After login, the driver must turn on their availability status, they can see their on process & completed deliveries here.
The driver can choose to reject or accept the delivery as the pop-up detail appears after senders made the request.
The driver can keep track and update their delivery process by using checklist.
After complete delivery, driver has to take proof of delivery picture.
Confirmation message appears after delivery is done.
1
2
3
4
5
1
2
3
4
5
After login, the driver must turn on their availability status, they can see their on process & completed deliveries here.
The driver can choose to reject or accept the delivery as the pop-up detail appears after senders made the request.
The driver can keep track and update their delivery process by using checklist.
After complete delivery, driver has to take proof of delivery picture.
Confirmation message appears after delivery is done.
1
2
3
4
5
Scenario: Expecting Delay
We have also created a flow for situations where a delivery is expected to be delayed. The driver can input the estimated delay time and provide reasons for the delay.
2
1
3
4
Driver press the expecting delay button.
Type in the expected delay minutes.
1
1
2
3
4
Select the delay reason in dropdown menu and confirm.
Message will be display for both drivers and sender screens.
Scenario: Expecting Delay
We have also created a flow for situations where a delivery is expected to be delayed. The driver can input the estimated delay time and provide reasons for the delay.
2
1
3
4
Driver press the expecting delay button.
Type in the expected delay minutes.
Select the delay reason in dropdown menu and confirm.
Message will be display for both drivers and sender screens.
1
1
2
3
4
Scenario: Expecting Delay
We have also created a flow for situations where a delivery is expected to be delayed. The driver can input the estimated delay time and provide reasons for the delay.
Driver press the expecting delay button.
1
Type in the expected delay minutes.
2
Select the delay reason in dropdown menu and confirm.
3
Message will be display for both drivers and sender screens.
4
User: Sender
Delivery Process
For the sender delivery screens, we want the users to be able to complete the whole delivery process in one single page and the mobile version will be scrollable. The sender will be able to make delivery request once the form is completed properly.
1
Delivery Form:
Pickup and Drop-off address
Select courier options
Select payment card
Select delivery time
Select drop-off option
Make Request
1
2
3
4
5
6
2
Then once a driver accepts the request, the user will be asked to confirm the delivery process.
3
Tracking process
4
Expected Delay
User: Sender
Delivery Process
For the sender delivery screens, we want the users to be able to complete the whole delivery process in one single page and the mobile version will be scrollable. The sender will be able to make delivery request once the form is completed properly.
Delivery Form:
Pickup and Drop-off address
Select courier options
Select payment card
Select delivery time
Select drop-off option
Make Request
1
2
3
4
5
6
1
1
Delivery Form:
Pickup and Drop-off address
Select courier options
Select payment card
Select delivery time
Select drop-off option
Make Request
1
2
3
4
5
6
2
Then once a driver accepts the request, the user will be asked to confirm the delivery process.
3
Tracking process
4
Expected Delay
3
Tracking process
4
Expected Delay
Visit Favio
Visit Favio