top of page

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.

AYR-06.png
Process_AYR

Click here to learn more

Top Tasks and Evaluation
AYR-12.png
AYR-13.png

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

AYR-11.png
AYR-14.png

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
​
​
​
​
AYR-17.png
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)
AYR-18.png
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.
AYR-19.png
Psychology Principles
Low colour contrast:
Home page: 1.44
Multiple Product Page: 1.02
Unclear labels (like Digital Catalogue) 
Unique product name (like The Rob)
bottom of page