.png)
EzFill is a fast-growing mobile fuel delivery service that keeps both ride and business fleets rolling without having to take time off the day to go to a gas station.
While they already had an existing website and mobile for its members, they realized they needed to improve their product and deliver a much better user experience for their target public.
1. Research, analysis, and comparison of the current product based on Jakob Nielsen's 10 usability heuristics internet usage rules with competitors.
2. Apply Heuristic Evaluation to determine if the current app meets the client's expressed needs when it comes to user needs.
3. Presentation of findings and a formal recommendation to communicate the best course of action.
EzFill has asked our team to do an overall analysis of the app and provide recommendations for improving usability and accessibility.
2 weeks + UX Designer in a team of 4 + Figma
Our team worked with the client’s user in mind through what their previous app system both looked and lacked, to identify all the essential features they would need to implement in their current system.
The team evaluated different competitors based on several key factors such as design, strengths & weaknesses, accessibility, and authenticity as a base for our recommendations. Our goal was to understand standard practices and patterns among competitors to implement good practices into our design or even elaborate on that.
.png)
We evaluated the product into sections from Onboarding to Help screens as a team. We used Jakob Nielsen’s 10 Usability Heuristic as a rule of thumb to do so. Not only did we point out the main issues found, but we also offered best practices for each of them.
It is very challenging for only one person to analyze an entire project and find all the usability problems. Because of that, each of us explored the app individually and then shared our findings to make sure different people saw different usability problems. We began with a general Heuristic Evaluation Review and later broke it down into essential implementations that would need to be done.
The “Splash” and “Onboarding” screens failed color contrast requirements, and the subtext size was too small for mobile display, which falls within rule #8 Aesthetic and Minimalist Design. In addition, the trademark symbol was not displayed as it was on other screens.
Select different color tonalities to pass accessibility, increase the subtext font size and add or remove trademark symbols to be consistent throughout the app. Good practice for mobile devices is to have a 16px font size.
1. Following the principle of familiarity, the first screen is unexpected to most applications, thus maximizing the cognitive load the user will have to take to move to the next step.
2. Color contrast of the call-to-action (CTA) button does not pass color contrast requirements. In addition, the "Use Current Location" button also needs to be changed to improve readability.
3. Main header text "Where do you need fuel delivered? "needs to be left-aligned.
4. The style and location of the error message vary between screens. For example, on the "Cell Number" screen, the notification appears below the input field, the color red is much lighter, and an exclamation is used in place of the "x" used here.
5. According to rules #4 and #8, the CTA “Create Account’ button is orange despite having empty input fields. In other parts of the app, orange signifies that the user may proceed to the next step.
1. Using rule #4 Consistency and Standards, rearrange the order of screens presented or reword the title to help users understand the app goal of checking availability in their location.
2. Choosing a darker grey color to contrast against the white text to easier readability.
3. Left-align the title would improve the screen's aesthetic and accessibility design.
4. Because the error message covers the page's title, it would be better to place error messages below the input fields consistently. The best practice would be to choose a color scheme that passes accessibility.
5. Instead, the button should be grey while there are empty fields. Once users have entered sufficient information to create their account, the button should turn to orange, signifying that the user can go to the next step.
1. As was shown on the previous screen, the orange button does not pass accessibility requirements. Also, as per rule #8, the number label may be unnecessary until a vehicle is added to preserve the minimalist design.
2. Depending on the text/sentence length, it will make the column to be too tight. Therefore, the table will be cramped and poorly distributed to the overall organization.
1. Assuming a first-time user will see this screen, removing the additional numeric value (0) is recommended.
2. To have an organized table, there should be enough space allowed between left-side and right-side columns. To save space, consider using “gal” or “GL,” which are often used to abbreviate the word gallon following #8 of design.
1. The button on these screens is orange when the input field is empty. Text is not left-aligned as previously mentioned. Additionally, the app asked for a phone number, so they will be notified when the service moves to the user area. However, it has already been asked on previous screens.
2. With other forms throughout the user experience, this list type (individualized buttons) is not seen.
1. Button should be grey up until the user has filled all the input text fields and left-align texts. Consistency is essential to exhibit professionalism and a cohesive user flow throughout the app. Therefore, if the phone number was already asked, there shouldn’t be a second request.
2. To remain consistent with the rest of the app, an alternative would be to convert the buttons to a drop-down list and combine it with the “Where do you need fuel delivered” page to eliminate unnecessary white space. This rule, #1 Visibility of System status, helps keep the user informed about what is going on through appropriate feedback.
1. The Home/Work table can cause confusion resulting in the user projecting the idea that there will be a different menu for each toggle button option.
2. The message notifying the user they do not have any orders yet takes away from the action required. Although the message encourages the user to view the button below, a call-to-action (CTA) button would eliminate a step.
1. To minimize confusion on Account Overview, putting the home and work table into a “Your Address” selection on the drop-down list would help.
2. The “Get your first EzFill” should be a CTA button to minimize the time spent on the screen figuring out what action to complete. This would provide the flexibility and efficiency of use as per rule #7
1. The Notification and Wallet screens show different layouts of lists throughout the app. Some are divided by lines while others are not segmented.
2. If there is only one payment method, editing the title can clarify what to enter. This would correspond to rule #2 Match between the system and the real world.
1. As mentioned previously, consistency throughout the app translates a professional and cohesive design.
2. Clear titles can help users understand what to input to avoid any confusion.
1. The add vehicle “+” button is not extremely visible nor intuitive. To help users navigate and add cars, the button should be placed on the button left and avoid users having to stretch the thinger to reach the top. The placement and emphasis given to the logo may provide the perception it is a button when it is not.
2. The continue at the bottom of the screen serves the same purpose as the orange button – they both take users back to the “Fuel” page. This makes the continue option redundant.
3. Color contrast between the grey displayed with the white background does not pass accessibility. Users may have a hard time reading, and it could cause discomfort.
4. The “Delete Vehicle” and “Save Updates” buttons are inconsistent as one scroll, and one stays still.
5. The information and icons are not extremely clear to the user, which fails rule #10 Help and Documentation because it requires the user to have an additional explanation.
1. Removing the logo and aligning the heading to the left or adding an action to the logo would create more organized and meaningful components to help users navigate the app as per rule #7.
2. Continue button can be deleted or redesigned to lead the user to a different page.
3. Best practices for this screen would be to select different/darker tonalities of grey to pass accessibility.
4. Place the “Delete Vehicle” button under the “Save Updates” button. The more substantial use of orange implies a primary action, while the orange outline implies a secondary action. Consistent with typical layouts, the most important action/ button should be listed first.
5. The use of “x” here implies the option to delete. Consider repurposing the “x” as a shortcut to delete and swapping its position with the edit icon. Alternatively, consider getting rid of the “x” and including an orange exclamation point icon to go along with the text “No coverage found for auto.”
1. The excessive amount of text makes the layout look condensed and, therefore, should be added extra white space between all the elements.
2. To better use the space available on the screen, the title could be changed to a shorter version and should be left-aligned for readability.
3. The wording in this pop-up asks the user two questions: whether they would like to confirm and whether they would like to continue. Although the two are synonymous in this case, it is best to focus on one straightforward question to avoid confusing the user.
1. Rephrase the message trying to be conveyed or remove any unnecessary text/information required for the user to take a step.
2. Alternatives could be “Location Vehicle” or “Confirm Address.”
3. Users can commit errors now and then. Therefore, giving them additional confirmation with precise wording in key flow areas can save them a mistake down the road. Consider getting rid of the question at the bottom and switching from “Yes” to the action “Confirm.”
1. The search bar option could be beneficial for users looking to find a specific question instead of scrolling the entire screen up and down.
2. The grey color of the body text does not pass contrast requirements.
3. FAQ and Terms of Service opens up a new Screen inside EzFill App, whereas Privacy Policy opens on a web browser.
1. Accordion options for users follow industry standards and are easy to use, as stated in rule #4.
2. A darker color and text size could be changed to follow best practices for accessibility.
3. Consistency should be applied throughout all options and show professionalism and an overall cohesive design.
With more than enough information that the team has gathered, we were ready for the proposal a few thorough rounds of assessment later. By pointing areas of improvement, our client could determine which improvement would be best for his product and deliver an exceptional user experience.
Although our client did not have rigorous requirements for the application analysis, my team and I could thoroughly compare the competitor's products to apply common practices using Jakob Nielsen's 10 usability heuristics rules and point out main areas of improvement.
The main takeaway for this project is definitely "keep an open mind and be willing to iterate." The design process is constantly changing and needs to meet users' expectations.
EzFill team applied some of the concepts pointed out in our review, providing a delightful experience for its users.
