All Year Round
Usability and Accessibility Evaluation
Types of Industry: E-commerce Fashion
The Client: AYR.com
The Designer: Huiyu Chang
The Project Aim: To redesign the website and make it more accessible and usable.
Time: 2020
AYR stands for "All Year Round", is a seasonless "slow-fashion" women's wear company founded in 2014, the USA by three longtime friends. They aimed their target customers from women over 18s, who travel a lot for work. Hence, they need garments that fit their body but are durable.
​
Recently, AYR wanted to introduce the brand to international women. Hence, they decided to update their original website to attract new customers, especially foreigners, and provide a better user experience for current clients.
​
The website is typical e-commerce fashion with a coastal style: clean and straightforward. The popular products are denim and skirts.
Click here to learn more
Top Tasks and Evaluation
Top Tasks
The users selected the essential elements in e-commerce fashion among 60 different items. The result is from 2020 showed the top 5 tasks they mind the most:
01 Delivery Information (9%)
02 Size and Fit Information (9%)
03 Image Quality (7%)
04 Customers Reviews (7%)
05 Product Descriptions (6%)
Current AYR.com
Evaluation
Heuristic Evaluation
A group of evaluators examed the desktop interface and judged its compliance with usability principles.
# Multiple Product Page:
-
Product unique and product name repeating
-
No filter for the efficiency of use
# Single Product Page:
-
Unclear button: "Add to bag" function confusing
-
Location guide missing on the page
-
Fuzzy size guide and include only one measure units
# About Page:
-
Non-align title and text
​
​
​
​
Accessibility Evaluation
Using WCAG2.1 Level A to analyze the website's perceivable, operable, understandable, and robus.
# Drop-down Menu:
-
Unmeaningful sequence: disorder category and unnecessary nav-button
-
Illogical order: "Bestseller" items repeating
-
The critical message should use different colour
# Home page:
-
Low colour contrast on text and background
# Multiple Product Page:
-
Keyboard use confusion for product selection.
-
Keyboard unable to return to the previous page
# About page:
-
"Press Play" link guide to the wrong webpage
-
Image has a code error
Performance Evaluation
Record user's task time, task completion, errors made and lostness by giving a scenario. Later compared with a similar e-commerce website (Pull&Bear).
AYR(Average) Pull&Bear(Average)
Task Time: 206.14 secs Task Time:153.33 secs
Task Completion: 75.29% Task Completion: 88.36%
Errors Made: 5.33 Errors Made: 3.00
Lostness: 0.31 Lostness: 0.18
-
Should reconsider the size guide: Some users were unfamiliar with the measure units "inches."
-
Delivery and Return information missing
​
​
​
Thematic Analysis
Gave user a scenario and run "Think Aloud" process. Analyzed their "Doing", "Thinking", and "Feeling."
#00 Overall
-
Annoying pop-up ads
-
Long loading process
#01 Home page:
-
Distraction everywhere: Page contains too much information
#02 Multiple Product Page:
-
Filter/ Category missing
#03 Single Product Page:
-
No user review and unpleasant size information
​
​
​
​
Satisfaction Evaluation
After "Think Aloud" process gave users the System Usability Scale (SUS) to measure the usability
AYR SUS score: 60
Pull&Bear SUS score:70
Average SUS score: 68 (The score is based on 500 studies)
Biometric Evaluation
Analysis of the eye-tracking path.
​
Task: Use a filter to find a grey dress.
Results: Filter missing, and the participants give up the task.
