supremeheader4.png

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.  

Screenshot 2021-10-19 at 17.54.04.png
Screenshot 2021-10-19 at 17.54.36.png

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. 

toptasks.png
usabilitytools.png

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 

usabilityfindings.png

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. 

wholepage_shadow.png
menu.png

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. 

productpage.png
clothingcategories.png

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. 

reviews.png
sizing.png

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.  

Kevin.jpeg

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. 

biom1png.png

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