Usability Testing & Redesign Supreme Shop
Usability Testing, Evaluation &
Redesign, 1st Semester MA,
6 weeks, 2020
Usability Testing together with 4 other Designers, Analysis, Individual Report, Redesign website, A/B Testing
Context
My Role
Tools/
Methods
Pen & Paper, Adobe XD, Eyequant,
Heuristic Evaluation, Performance Evaluation, Satisfaction Evaluation, Think Aloud, Eye Tracking Analysis, Psychological Design Evaluation,
Accessibility Evaluation, Card Sorting
The Brief
The aim was to subject the online shop of the fashion brand Supreme to a comprehensive usability testing and thus uncover existing usability issues. These findings could in turn be used for optimisation in the form of a redesign of the webshop. In the last step, an A/B testing was carried out to compare the new version with the existing one.
Orignal Supreme Online Shop
Usability Evaluation
Since complex websites have many possible tasks that users could complete and a limited time window and resources were given, it was essential to focus on the tasks that are most important to the user. Therefore, a group of 70 students were surveyed on the most important aspects when using clothing web shops. Based on the results, top tasks and big tasks could be identified. These seven tasks make up half of the tasks the respondents care about and were thus the ones prioritised.
By using a user scenario, which included the previously defined top and big tasks, the following methods were applied for the conduction of the
usability testing:
Findings
The usability problems found were structured and the following key findings were generated:
Redesign
Based on the findings, simple wireframes were first created on paper and then further developed into a clickable hi-fi prototype using Adobe XD. During this iterative process, users were involved to give feedback on the concepts.
As a unique and special fashion brand that only sells its popular garments in strictly limited quantities, the online shop also stands out from other common online retailers. Therefore, it was important to maintain this uniqueness in the redesign.
Home Page
As can be seen in the graphic, the menu bar has been moved up from the bottom of the website to the top, so that it is more clearly perceived as a primary navigation. In addition, the menu items have been restructured and divided into the primary navigation and a secondary navigation (footer). Additional information, such as shipping and sizing information, is now located in the footer. Here they can also be accessed from all pages.
Since the products are the relevant elements for the user in an online shop, the primary navigation now consists of the different product categories.
Product Page
The Top Tasks were given special attention during the redesign, as they represent what is important to customers when using an online shop. Since image quality is one of the Top Tasks, the image of the product takes up a large space on the selection page, as well as on the product page. In addition, on the product page the possibilty to navigate through different photos by using arrow buttons has been added.
Product Category Page
Once the user selects a menu item from the drop down menu, the menu is displayed as an accordion menu on the left hand side of the page. This helps the user to keep track of the categories and to navigate quickly between them. One of the fixed accessibility issues on this page was the lack of textual information on products.
Following the same principle, the user can access the corresponding customer reviews on the product page. Since customer reviews are a Big Task and were not available before, this function was added in the redesign.
Since sizing information also represents a Top Task and achieved unsatisfactory values in the usability analysis, the sizing information was revised. The user can now access the associated sizing table directly from the product and read off a graphic showing how the sizes are measured.
A/B Testing
To determine whether the redesign could resolve the usability issues, the next step was to carry out A/B testing comparing the two designs. Performance and satisfaction were evaluated for the Redesign and again the Think Aloud method was applied. The Eyequant tool was used to obtain biotmetric eye tracking data.
Usability Testing: 6 users completed tasks in the given scenario using the clickable prototype. Performance parameters are measured. Satisfaction is evaluated by using a SUS form.
.
Example Eye Tracking Data. Eyequant was used for each page using Heat Maps, Perception Maps and Fixation Hotspots.
Conclusion
To summarise, it can be stated that the A/B Testing could deliver satisfactory results. With the help of the redesign the values of 2 out of 3 scenario tasks could be improved considerably. The evaluation of the users Satisfaction showed that the clear navigation of the Redesign gives the users a positive feeling, as they reach their destinations quickly.
However, there were also limitations that were disregarded during the process. Since the participants may not represent the standard customer group, the results may be less representative. Additionally, the focus was only on usability analysis and redesign for the European market. As different regions, countries and cultures have different characteristics, the findings of this usability testing cannot be transferred to all customers.
.
My Key Learnings
#Usability Testing Methods and Tools
#Conduct remote Usability Testing together with others
#Accessibility and Usability is the basis for good design
.