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
Summarized: Usability and Accessibility Issues to be Addressed
-
Issue1: Accessibility evaluation and psychology principles found the colour contrast and font size is ambiguous.
-
Issue2: Repeating messages and irrelevant elements are prevalent across categories that confuse the user.
-
Issue3: Missing filter cause user failure through biometric tracking.
-
Issue4: User complains about the non-foreign-friendly and complex size guide during Think Aloud.
-
Issue5: Misplaced buying guide (delivery and return) ended in long task time and poor task completion in the performance evaluation
Iteration01: Homepage (with Menu) and Navigation Bar
1. To include icons for “Search” and “Login”
2. Remove misleading menu options (Digital Catalog), preventing users trapped by the content.
3. To improve the colour contrast (background and font), avoid users from ignoring or spot on irrelevant items.
4. To remove unnecessary and repeating messages (simplify the landing page). Highlight “Bestseller” to give users a helpful guide.
5. Put similar items in the same row by recategorizing the menu and footer’s typesetting.
6. Bestseller repeated in the original website. Move the content to the Homepage to allow AYR to introduce their popular items.
Iteration02: Multiple Product Page
1. To include a filter on the page, user could select product type, size, colour and price. Shorten user’s purchase process.
2. To combine the same item name and give colour select options for the customer.
3. To include the “Back to Top” icon when the page includes many items. Consumers could reach the top faster.
Iteration03: Single Product Page and Size Chart
1. To include the website location guide and return button on the page.
2. o include customer review. Allow subsequent buyers to consider whether the product fits them. Also collect customer comments.
3. To include fitting reports to allow users to choose their size more easily.
4. To include delivery and refund information. The most important elements from Top Tasks. Currently missing in the website.
5. To adjust different aspect images location.
6. To show clearly where the customer should measure. Add extra tips for measurement.
7. To include AI size finder: suggest by user’s height, weight and preference.
8. To add extra units of measure: “inches” and “cm.” Recommended by users from Think-Aloud test.
Iteration04: About Us Page
1. To readjust About page typesetting: Give clear titles and contact information. Remove redundant messages. Users must find contact messages easily.
