top of page
Heuristics Evaluation

Urban Outfitters

Type of project

App design

My Roles

UX researcher & UI designer


+ 2 UX/UI designers




2 days

Picture by Cottonbro Studio

Urban Outfitters

The Urban Outfitters app is an all-in-one e-commerce app to facilitate user purchases of Urban Outfitters products.


My team and I were mandated to evaluate the usability of the checkout process of an existing digital product and redesign the screens within a flow, based on our evaluation and usability recommendations.

To redesign the UO app, we conduct a Heuristics evaluation. With the objective of improving the usability and user experience of the app, we knew that using this approach will provide us with a set of established design principles and will help us apply consistent adjustments. 



Heuristics Evaluation


Branding Assessment


Screen Redesign


Key Takeaways

Task Flow

By going through the current task flow of a first-time buyer, our goal was to identify any design elements that may be confusing or unclear to users to improve the checkout process

After analyzing the user's current journey, we were able to identify seven areas for improvement that would enhance the overall efficiency of their experience.

We evaluated a purchasing task flow of the Urban Outfitters App using the following six of Nielsen’s Usability Heuristics:

Aesthetic and Minimalist Design

Home Page cluttered

Visibility of System Status

Filters not Visible

Error Prevention

Buttons too Similar Email Error

Help Users Recognize and Repair Errors

Address Error

User Control and Freedom

Shipping Error

Consistency and Standards

Additional Tax Field

Primary user: New buyer

Task: Buying clothing and home goods accessories. 

UO_User Journey_Analysis.png
Picture by Lanyjade Mondou on Pexels

Severity Scale

To prioritize the right usability issues and identify which problems are most critical and require immediate attention, we used a severity scale.


This helped us ensure that the most severe usability issues were addressed early on in the redesign phase, which can ultimately lead to a better user experience.


Prioritization Matrix

Now that we knew the scale of each usability issue, we placed each of them on a prioritization matrix to understand their relative importance or impact


By seeing visually how each issue needed to be prioritized, we were able to improve our decision-making and ensure that our efforts were focused on the most important tasks or goals.

Prioritization Matrix of the Urban Outfitters App Redesign

Branding Assesment

App Identity

To make sure that any redesigns are in line with the app's brand, maintaining consistency and building on existing brand recognition, we've decided to analyze the brand identity by extracting colours and typography from the App and the website with different tools. green is used for prevention messages. 


Very minimalist to let the pictures speak for themselves and inspire the users.


A professional tone is used to communicate information to the users. 


The use of shades of black and white  are aligned with the logo and red is used for error messages only, while green is use for prevention messages

UO Brand identity.png

Screen Redesign

Home Page too clutered

Heuristic: Aesthetic & Minimalist Design

Level of Severity: 2

Having multiple categories means that every space is important on a homepage and having this layout of a big ad makes the experience of choosing a category less efficient for the user


Accessible departments

The addition of all departments on the top part means that the temporary sales banner will show first no matter what department the user will click on.


Sales Hunters will be able to see the banner on all pages and may offset changes to the conversion rate based on size reduction for that kind of user.

Smaller sale banner

Reducing the banner size, but maintaining its presence keeps the opportunity to convert shopping users into buyers without losing users to scroll time and clutter in their shopping process.

UO redesign_HomePage_Before (4).png
UO redesign_HomePage_After.png

Filters Not Visible

Heuristic: Visibility of System Status

Level of Severity: 2

Users need to know why they only see a few items. Not showing the filter prevents them from removing the filters easily and shopping for the items they were really looking for, which can impact the conversion rate. 


Accessible active filters

We’ve added the filters’ names under a grey background slightly dark from UO's grey for better readability. 

By adding filter chips, we ensure users do not get lost in the searching and filtering process, improving accessibility and confirming users’ previous actions.

Urban Outfitters is an inclusive brand and cares about all of its consumers, and this adjustment is align with the brand values and may improve brand perception for users with cognitive difficulties. 

UO redesign_Filters_Before (2).png
UO redesign_Filters_After (1).png

Buttons too Similar

Heuristic: Error Prevention

Level of Severity: 3

Users need multiple options when looking at their cart but at the moment, the buttons to edit, remove or save a cart are too similar, so users may press on the wrong option by mistake and have to go through the whole process again. 


Bounding and colour to visually distinguish.

We’ve highlighted the filters’ names with a black contour so the CTAs can stand out. 

By adding in colour and bounding to the options on check-out we ensure users do not accidentally click and make an action they did not intend to, ensuring their checkout process is as seamless and convenient as possible to avoid cart abandonment. 

UO redesign_Buttons Too Similar_Before.png
UO redesign_Buttons Too Similar_After.png

Email Error

Heuristic: Error Prevention

Level of Severity: 4

Receiving an email after buying an item is an industry standard. Currently, there is no error message for a common misspelling of so a lot of users won’t receive their order confirmation and that kind of experience might stop them from coming back.


Error message when the user hits next

Adding this message when a user doesn't enter their email address correctly provides clear feedback, helping them identify and rectify the mistake quickly. This reduces frustration, improves user experience, and increases the likelihood of successful communication or registration.

Usability icon

We added an error information icon to enhance the visual feedback, making it more prominent and easily noticeable. This visual cue draws immediate attention to the error, facilitating quicker identification and correction, thereby improving the overall user experience.

UO redesign_Email Error_Before.png
UO redesign_Email Error_After.png

Address Error

Heuristic: Recognize & Repair Errors

Level of Severity: 3

User comes to the platform with the idea of buying specific items. Currently, when an item can’t be shipped, you get the error message but there is no clear way how to fix it, even when you enter an address that is recognized by the system.


Error message on provided addresses 

Adding this message when users start typing the address and the system starts recognizing the provided address gives clear feedback, helping them identify and rectify the mistake quickly. This reduces frustration later on when the users will be at the checkout section.

Usability icon

We added an error information icon to enhance the visual feedback, making it more prominent and easily noticeable. This visual cue draws immediate attention to the error, facilitating quicker identification and correction, thereby improving the overall user experience.

UO redesign_Buttons Too Similar_Before.png
UO redesign_Buttons Too Similar_After.png

Shipping Error

Heuristic: User Control & Freedom

Level of Severity: 3

To fix the previous problem, the only choice is to remove the item from the cart but there is no way to do that except for going back to the previous pages. Making the user leave the checkout page can have a significant impact on the conversion rate.


Accessible call-to-action 

We’ve highlighted the filters’ names with a black contour so the CTAs can stand out. 


Offering users alternative choices, enables them to explore different options and potentially find a suitable solution. This empowers users with more control and flexibility in navigating through the issue, leading to a more satisfactory experience and a higher chance of resolving the problem effectively.

Whether there is an error message or not, having alternative buttons can also lower the number of customer service requests related to shipping.

UO redesign_Shipping Error_Before.png
UO redesign_Shipping Error_After.png

Additional Tax Field

Heuristic: Consistency & Standards

Level of Severity: 4

There is actually a blank tax field on the Cost Summary when the currency is in Canadian Dollars and we have two taxes in Canada. This can alarm the user about the legitimacy of the company.

A cluttered and complex interface can also be particularly challenging for users with disabilities or limited technological proficiency.


Geographic appropriate tax field

Setting up taxes based on the users' local tax registrations will generate relevant taxes for users to prevent any confusion.

Through this modification, we also eliminate a potential avenue for user error and refund coordination, resulting in reduced customer service time and improved data integrity and reliability.

By removing the additional tax field, we create a more accessible environment for all users, including those with visual impairments or cognitive limitations.

UO redesign_Additional Tax Field_Before.png
UO redesign_Additional Tax Field_After.png


Branding over functionality

Fashion E-commerce platforms tend to focus on the branding experience through photography, the number of available items etc to inspire users and make the brand come alive. However, an app should bring functionality at the same level as branding because it directly impacts user experience and retention. Delivering value and meeting user needs is the primary driver of success in the competitive app market.

Consistency is the key

Staying consistent with app branding during a redesign is important because it helps maintain brand recognition and familiarity among existing users, ensuring a smoother transition and reducing confusion, which ultimately help improve the conversion rate of these users. 

bottom of page