Project Overview
Why The Project
My Role
Duration
Through this UI/UX redesign, I identified three main problems of the application: poor overall interface design, hidden information, and poor tracking update status. In this redesign I will improve users’ experience by focusing on these core problems.
FedEx has shipped many of my packages since I started using the app about a year ago. While using the FedEx app, finding the service I needed has been difficult at least half the time. It hasn’t been a pleasant experience, so once I started learning interaction design, I wanted to improve the experience.
I know my own perspective was far from enough to make design changes, so I conducted secondary online research through user reviews as well as primary research through moderated user interviews. From there, I discovered that many other users are facing difficulties. This reaffirmed my interest in doing a UX/UI redesign for the FedEx mobile application.
Analysis
Define
Design
2.5 weeks
DESIGN PROCESS
Analysis
Define
Design
User Research
User Persona
User Flow
Information Architecture
Paper Wireframe
Low Fidelity Wireframe
High Fidelity Mockups
ANALYSIS
User Research
Pain Points
I discovered many problems through moderated user interviews. From there, I synthesized my insights by grouping them into six categories, ultimately deciding to focus on four of them: overall interface, scan page, creating an account, and tracking updates of the application.
“Terrible UI, always crash and bugs”
“Horrible interface that makes no sense. It is really confusing on how to register”
“There's a large, distracting banner on screen, which you cannot exit out of”
“Profile response only tap the text not the picture”
“Navigation bar is too big and not helpful”
Create Account
“Password creation part needs work”
“Failed to change everything:address, password,...”
“Login/reset password makes no sense”
Scan Page
“Fix scan QR code”
“Always fail scanning, Instructions are hidden”
“Unable to scan the barcode”
“Fail on the first try, users blame their phones”
Functions & Coding
“No option to pay customs duties online”
“Doesn’t work with apple trying to create a strong password”
“Package is never placed where I have asked for it to be placed”
“Live bot goes around in circles, doesn’t help at all”
“Leaving the package at a random door”
“NO ONE CARES about a lost package, even it’s value”
“The app just crashed after I tried to use it to create a shipment. All data was lost”
Notifications
“No Notifications”
“Slow update, always late”
“No notifications even signed up for it”
Tracking
“Instructions are never followed”
“No picture proved the delivery and it showed delivered on the app”
“More information/detail on tracking”
Key Problems
UI designs don’t follow standard principles
Navigation bar is too big and distract the users’ vision
No instructions to help users scan, information is hidden
“Sign up” and “log in” page makes no sense to users
Notifications/tracking updates require an extra step to turn on
Show important information instead of hiding them
Help users scan the barcode effectively
Goals
Solutions
Adjust text size and make a clear call to action button
Improve the navigation
Add a frame for scan barcode
Show more information on tracking stats
Make a better interface
Show a clear tracking stats to users
Reach UI design principle and a better interface
Overall Interface
User Persona
Based on my user research, I created two personas to represent the main user groups.
Key Observations
1. Users encounter two challenges after creating an account: forgetting their username or forgetting their password. When the user forgets their username, the system shows that the user is required to enter an email to get a reset. When the user forgets their password, the system shows that the user is required to enter their username. From here, the user is confused because the user's expectation is to enter an email to get the reset, and in most cases, the user that forgets the password may also forget their username. At the same time, I found that the existence of customized usernames causes confusion for the user. Customized username functions usually appear in applications like social media, but in delivery applications, most people use their real names. Usernames are easily forgotten, but emails and phone numbers will always be remembered.
2. Users rarely succeed the first time when they try to scan the QR code, users subconsciously suspect that it is a problem with their phone rather than the application itself. The application does not provide the location or space to tell where the user should scan properly.
3. When users go to the home page, their attention is drawn on the huge navigation bar. The navigation is not the most important information of this application, rather it should be package tracking information.
While looking up online user reviews on different platforms, the majority were very poor. While this is unfortunate for users of this app, it helped me with this project because it means that the application has a lot of room for improvement. Understanding negative user feedback is important when it comes to redesigning an application, because it helps make comparisons, measurements, and design recommendations.
Online Feedback
The Good
The Bad
I conducted a survey with 15 participants. The questions were broken down based on the research on the application’s broad range of problems.
Survey
I used three research methods in order to better understand the users and the struggles they face while using the application.
User Research
DEFINE
User Flow
The user flow shows the steps the user needs to take in order to complete the main tasks of tracking packages and shipping packages.
Information Architecture
The information architecture (IA) shows where users can find the information and navigation they need within the application. This helped me visualize the construction of the application and hierarchy of information.
DESIGN
Paper Wireframe
Low Fidelity Wireframe
Paper sketches gave me broad initial ideas to start my designs.
Low fidelity wireframes helped me to refine my basic ideas and move forward to the final product.
High Fidelity Mockups
Goal 1: Consistency
Goal 2: Functionality
Goal 3: Call To Action
Goal 4: Guided Information
All Screen
I created two extra “welcome page” for the application, using FedEx’s iconic slogan “When it absolutely, positively has to be there overnight”.
Dark Mode Display
The final prototype is shown in this video. Made in Figma.
The final prototype is shown in this video. Made in Figma.
Since Apple launched Dark Mode, many people have enjoyed using it (including myself). The current FedEx application does not support Dark Mode, so I thought it would be helpful to create a Dark Mode. Using dark mode will greatly reduce the screen glare to achieve a comfortable viewing effect for users.
Style Guide
Color Guide
I created a typography guide to ensure that the hierarchy was preserved throughout the project.
I created color cards to get the exact hues and shades of the colors used throughout the application to ensure consistency with FedEx’s current design system and corporate branding.
Reflection
The Challenges
During the research process, I received a lot of feedback from users that felt beyond my capability to address for a first time project. There were a lot of complaints from users that the application had frequent glitches and failed interaction states, such as long loading times and no response when buttons were pressed. These are all coding issues that compromised the overall user experience of the app. Nevertheless, I tried to enhance the application with my design as much as possible. For example, in the profile on the top right corner, clicking on a photo did not previously trigger any interaction, only the name did. Hence, me design removed the name to resize the button for the user to be able to interact with the application in order to complete the action.
What I Learned
One of my favorite parts of this redesign project was designing new interaction models in Figma after I explored new design ideas on paper. The application previously had an expandable navigation menu. I came up with a new scrolling design that made sure that the package information on the home page would not be overwritten when users explored what page to go to next. At the beginning, I had a draft of my idea on paper; implementing it in Figma at first was difficult, but instead of changing my design, I researched to find information about how to create it in Figma.
Next Steps
Coding is a subject of study that I have not previously been exposed to. However, through this project I saw how important coding is to design and the overall user experience. I look forward to learning this skill and applying it to future projects in my higher education.
