Course Project 2
Mangia Mangia Web Design - Adobe XD
UX designer leading the Mangia Mangia website design.
Responsibilities Included:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
The Problem
Available online shopping and food ordering websites have inefficient online ordering systems, cluttered designs, and confusing checkout process.
The Goal
Design a Mangia Mangia website to be user friendly by providing clear navigation and offering a fast checkout process for both merchandise and food.
User Pain Points
Information Overload
Online ordering can cause a user to experience an abundance of information, which confuses the user.
Visual Appeal
Websites often do not provide as much visual appeal as the in store experience.
Checkout
Difficult checkout processes increase user drop off rates.
Creating Personas
Problem Statement
Sarah is a busy working mom who needs an easy way to order products from her favorite bakery because she can’t find the time to visit the store with her busy schedule.
User Journey Map
I created a user journey map of Sarah’s experience using the site to help identify possible pain points and improvement opportunities.
Design
Sitemap
Clutter and information overload were primary pain points for users, so I used that knowledge to create a sitemap.
My goal was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make navigation straightforward.
Starting the Design
Paper Wireframes
Next, I sketched out paper wireframes for each screen in my website flow, keeping the user pain points about information overload, visual appeal, and checkout flow in mind.
The paper wireframe variations to the right focus on optimizing the home screen browsing experience for users.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Paper Wireframes Screen Size Variations
Since I would like Mangia Mangia’s customers to access the site on a variety of devices, I started to work on designs for additional screen sizes. This is to make sure the site would be fully responsive.
Digital Wireframes & Variations
Transitioning to digital wireframes helped with understanding how to redesign the paper drawings. This also provided more focus on user pain points and how to improve their experience.
Prioritizing visual hierarchy in regards to button locations on the home page was a key part of my design strategy.
Low Fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of browsing the menu, adding an item to the cart, and checking out.
At this point, I had received feedback on my designs from my peers about page organization. I took their feedback and implemented these suggestions throughout my digital wireframes.
Usability Study Findings
These were the main findings after conducting my usability study:
1
Account Creation
There was confusion with users regarding the prompt for account creation in the checkout screen. They were looking for this earlier in the flow.
2
Labels
Users were confused when certain sections on the page were missing labels/headers.
3
Headers
On the homepage, there was confusion with the header labels and questioning some of their purposes.
Refining the Design
Mockups
Based on the insights from my usability studies, I made changes to improve the checkout flow. Users are expecting account creation to be earlier in the user flow, so I provided users with an option to create an account on the payment screen before the confirmation screen.
Before Usability Studies
After Usability Studies
Screen Size Variation
High Fidelity Prototype
My hi-fi prototype follows the same user flow as my lo-fi prototype. I took into consideration the findings from the usability study to make necessary changes to my design.
Conclusion
Accessibility Considerations
1
I added headings with a variety of text sizes to add clear visual hierarchy.
2
I took into consideration the accessibility of color and contrast in my designs.
I measured the luminosity contrast ratio between the background of a design and the text color used with it.
3
I used labels for all sections, so the design would be accessible for screen reading technologies.
Impact
Our target users shared that the website design offered clear browsing features and a visually appealing color choices as well as engaging images.
Learnings
I learned how important it is to perform usability studies because sometimes what I feel is right for the user, is not necessarily the best design choice. I found that the most important takeaway from this project is to never stop focusing on the user when ideating and deciding on design solutions.
Next Steps
1
Conduct additional usability studies for further design iterations.
2
Identify areas of improvements and come up with improved features.