We were to imagine ourselves as part of a UX Design team at a hypothetical company, Emerge Technologies. We were tasked with evaluating the usability of an existing digital product by conducting a heuristic evaluation.
To allow us to provide the best evaluation possible, we went through the following steps in a non-linear fashion, evaluating and testing when needed. This helped to provide the best product possible.
Identifying the problem space
Secondary research
Heuristic evaluation
Listing usability issues
Design prioritization matrix
Executive summary
Redesigned task flow
According to website traffic statistics, online shopping consisted of:
Desktop
Mobile
It is for this reason that websites be primed for mobile viewing.
Zara itself continues to be a popular brand, with statistics to show.
net sales in 2021
online visitors within the last month
average number of visitors who view one webpage before leaving website*
*While not bad this could be improved through better design
Therefore, we chose to redesign the task flow of browsing and purchasing bed linen on iOS mobile
Each of us went through the website separately to evaluate it. We made note of which usability heurstics were violated and how severe the violation was. Below are the different usability heuristics and how we categorized the severity of each.
10 principles to help guide usability for a product/design based on Nielson and Norman group
Design should keep users informed about what's going on within an appropriate amount of time and through feedback.
People make mistakes! If users do make mistakes, ensure there is a clear "emergency exit" so users can get out of them. This will make it less frustrating for users and they won't get stuck.
Users don't typically interact with only one type of interface. Ensure the platform or interface matches what is typically done so users don't have to learn how to navigate something new.
Mistakes happen. Best designs ensure users don't make mistakes in the first place. Either eliminate error-prone conditions, or have a confirmation message before committing to an action.
We have enough to remember in a day already. Lessen the amount of information users have to remember by labelling elements, actions, or options or having them be easily retrievable.
Shortcuts not only save us time but also saves us effort. Some examples are having keyboard shortcuts or allowing users to tailor content according to their needs and what they would frequently use.
Ensure information shown is relevant and needed. If a screen or interface has too much content it can be overwhelming for the user. However, be careful to still keep the user's primary goal in mind!
Error messages should be clear - no jargon/error codes, indicate the problem, and suggest a solution.
Great design does not need additional explanation. However, there are times where is it necessary to provide documentation to help users complete their tasks.
Use words, phrases, and concepts familiar to the user. This allows users to navigate and learn the interface more easily.
Industry rating to help prioritize design decisions
After separately creating a list of violations, we came together and decided to focus on 9 usability issues to focus on. These are listed below. They are presented in the order of severity ranking. With each issue, this information is included: The error, the heuristic that was violated, the problem, the solution, and its severity rating.
Problem: The placement of the “continue” button is not immediately apparent to the user as it blends into the night mode navigation bar.
Recommendation: Make "continue" button more apparent to the user by changing its colour, shape and placement.
Problem: On the item view, there is no indication an item has been added to the cart and the user cannot see the cart.
Recommendation: Ensure the user can see the cart when they've just added an item to it.
Problem: Two address detail sections are shown but does not indicate if its shipping or billing.
Recommendation: Create subheadings to clearly show indication of billing/shipping information on summary purchase.
Problem: In the summary of purchase, the user cannot see the specifics of what they're about to purchase. This can cause confusion for the user.
Recommendation: Add item name, short description of item and number of that item on purchase summary screen.
Problem: It is not apparent that the links are clickable. Users might not notice the important information that they are missing.
Recommendation: Add arrows or underline text to indicate links.
Problem: This message indicates if they want to download an invoice, they need to make an account. However, they wanted to check out as a guest.
Recommendation: Provide more information and clarity for users checking out as guests.
Problem: No indication of being able to fill out credit card information.
Recommendation: Add labels or instructions to tell the user what to do next when adding payment information
Problem: When the user maximizes the description the user has no way of minimising it again to see other parts of the description of the item.
Recommendation: Add an option to minimise item descriptions.
We collaborated and mapped these usability issues on a design prioritization matrix.
We made our redesign decisions based on the matrix above. We focused on the designs in each quadrant in this order:
Before moving on to our redesigns, we wanted to ensure we kept with the Zara Home branding as much as possible. Me and another one of my groupmates found two different fonts that were close to the Zara branding. Because there were two different fonts, we picked one and decided to go with the one shown below:
Throughout our redesigns, we also ensured we had the screenshots of the current Zara Home screens next to what we were designing to act as a reference. We chose current photos from Zara's website and incorporated them into our redesign.
Finally, these were our redesigns, with the “before” and “after” screens shown, and the link to the prototype below. I made the changes for redesign 1, 2, 3, and 9.
Add documentation where necessary = While having a minimal website was nice aesthetically, it was difficult to determine what steps to take or what different sections were for. We found adding documentation to indicate different areas made the user experience less frustrating while not interfering with the aesthetics too much
Differences in rating problems = at times we rated experiences differently. Therefore, we had to come together as a group to discuss the problem, state our case, and compromise on an agreed upon rating
Continually refer to usability heuristics and ratings = it was important for us to continue to remind ourselves of the usability heuristics and ratings to help us make good decisions on what changes to make.
Hypothetically, if we were able to continue, these would be our next steps:
Finalize redesigns with stakeholders
Once design accepted, pass off to developers to implement
A UX Designer with a background in Speech-Language Pathology working with brain injury survivors. Over 6 years of experience in leveraging empathy to understand others’ perspectives and create constructive rehabilitation plans and experiences with a goal to be a UX Designer who advocates for accessibility and inclusivity.
