Cotton Bureau Redesign
E-commerce website redesign.
Overview
Completed for: Usability, Principles, and Practice Course. Completed as part of the UX Design Masters course at Loughborough University.
Duration: 7 weeks.
Role: Individual Project.
Purpose: Redesign the Cotton Bureau website to address usability and accessibility issues.
Brief
Evaluate the usability and accessibility of an e-commerce website and redesign the website to address issues identified in the evaluations.
Understanding the Problem
Accessibility and usability evaluations uncovered issues with the website’s design.
Top Tasks
Top tasks are defined as the most important tasks users complete while using a website.
A survey with 75 respondents indicated the tasks they care about most as consumers, which helped to focus subsequent research and analysis.
By designing a website for usability and efficiency in the context of Top Tasks rather than smaller, less important tasks, websites have the potential to increase engagement and satisfaction with their website.
Evaluations
A series of usability and accessibility evaluations were conducted to identify any potential areas in need of improvement within the website:
Heuristics
Purpose
An expert review was conducted using Nielsen and Molich’s (1990) evaluation method to investigate and identify usability issues within the website.
Findings
Lack of delivery and shipping information and lack of clarity in sizing guide
Accessibility
Purpose
An expert evaluation was conducted using WCAG 2.1 Guidelines to identify accessibility issues within the Cotton Bureau website.
Findings
Lack of contrast between text and background color in headings, descriptions, and customization selections. Small text that may be difficult to read for some audiences.
Performance
Purpose
A performance analysis was conducted to measure and compare time, success, and efficiency of tasks on two fashion e-commerce websites: Cotton Bureau and Pull and Bear.
Participants were assigned to one of the websites and asked to complete the following tasks:
Task 1: Starting from the Cotton Bureau home page, search for a sweatshirt, filter the results to fit your body type (if you can), select an appropriate garment, and enter the garment’s product page.
Task 2: Now you are on the product page, inspect the images to see if the garment is a good fit for your style, read some user reviews, and read the garment’s description.
Task 3: You have decided you want to buy the garment. Find the size and fit information and check which size you should buy, find out about the delivery information, and find out about the return information.
Findings
Users had significant issues with finding size, delivery, and return information on the website and spent more time looking for this information on the Cotton Bureau site compared to a competitor fashion e-commerce site.
The asterisk on Task 3 indicates a significant difference in task time between the two websites which indicates users had more trouble finding size, delivery, and return information.
Satisfaction
Purpose
The Think Aloud Protocol was used to gain qualitative insight into thoughts, actions, and feelings of participants while using the website and was analyzed using Thematic Analysis.
A System Usability Scale (SUS) survey was used as a quantitative measure.
Findings
Lack of information was the most common problem that arose. No customer reviews was the biggest issue, followed by unclear measurement information, inadequate item description, no prices on browsing page, and lack of garment fit visualization.
Psychology
Purpose
Adherence to psychological principles such as Mental Models, Dual Coding Theory, Gestalt Principles, Information Scent, and Color Theory was evaluated considering visceral, behavioral, and reflective levels of information processing.
Findings
Absence of landing page that indicated purpose of the website. Lack of supplementary visual aids for sizing and fit information. Low color contrast between grey text and white background in product descriptions.
Biometrics
Purpose
Eye tracking software was used to determine on which parts of the Cotton Bureau website users focused their attention most to determine if areas of interest received the appropriate attention. Attention maps and scanpaths were analyzed to determine areas of interest on the website.
Findings
The attention map below shows that title and t-shirt received the most attention, which is good as these are both areas of interest. The customization options. however, received less attention which may indicate that the already selected customizations are not very visible. It is important to show which customizations are selected so that the user knows that they are purchasing their desired product.
Impacts of Findings
The annotated images below show how the website’s design was modified to address usability and accessibility issues.
A/B Testing
Performance and satisfaction results of the original Cotton Bureau website were evaluated against results of the redesigned website.
Performance
Average lostness, that is, how lost users became when navigating through the site, was significantly reduced in the redesign.
All participants achieved a lostness score of 0 on the redesigned website, which differed significantly from lostness of participants in the original website. This could indicate that navigation throughout the redesign was clear, which prevented users from getting lost.
Satisfaction
The median SUS score of the redesign was 87.5 which is above the acceptable threshold for SUS scores. Comparison of results from SUS tests indicated that users reported 22.8% higher satisfaction with the redesigned website compared with the original website.
Overall users were much happier with the display and access to relevant information that was unclear or not present in the original design.
Thematic analysis revealed that users could use the redesigned website easily, with only a small amount of confusion about placement of features. This confusion indicates how the design should be modified in future iterations.
Reflections
When completing these evaluations, many of the same issues emerged which felt repetitive initially. I then realized that uncovering these patterns are crucial in identifying the most prominent problems in a design, and is the first step in addressing these issues to create a more seamless design.
The results achieved a small effect size which may be attributed to the difference in sample size between the two groups. If more participants were gathered for the Cotton Bureau redesign group, the results may show a larger effect size, but due to time and resource constraints, this was not possible. Ideally multiple iterations of the redesigned prototype would be tested to ensure rigorous analysis of the website’s usability.
If I were to complete this project again, I would use a larger sample size in both the original and redesign groups in order to get a more accurate and generalizable result.