Type of Project
- User Experience Design Master of Arts
- Usability, Principles and Practice module
- 2020
Skills
- Evaluating a website design
- Designing and running research with participants
- Sitemaps
- Wireframes
- Accessibility improvements
- Prototyping
- A/B testing and analysis
Background
The Challenge
The project aimed to improve the usability and accessibility of the website Supreme. I assessed the website using evaluative research to create recommendations for improvements. The aims were created from the university project brief.
Project Aims
- Evaluate the current design to assess the quality of usability and accessibility, measure user satisfaction and measure performance.
- Gather metrics to compare the current design with the redesign and create a design A / design B comparison.
- To improve the previous scores for performance and satisfaction to make the site more competitive in the market place.
- To introduce new features that allow customers to complete top tasks (Mcgovern, 2018).
- To increase value from the website by creating new streams of revenue and increasing sales.
Why Redesign Supreme's Website?
Usability is a quality relating to the ease of use with interfaces. Improving usability is important for services. It increases trust and creates positive attitudes, increasing return visits and stimulating purchases.
Accessibility relating to website design means ensuring people with disabilities can use them. Around 15% of the worlds population have some form of disability (World Health Organisation, 2018). Removing the barriers and making the site accessible can improve their experience and increase sales for Supreme.
Target User
Target users are typically 16-35 year old males, but over time Supreme has appealed more to females. Customers often buy from Supreme and then sell on to buy the new line of clothes during the next ‘drop’. The customers desire high quality fashion that meets their style. Customer are often students, part time workers or young professionals in the creative industry.
Current Design (Winter 2019)
Homepage
Shop Page
View All Page
Product Page
Terms and Conditions (Including Delivery Info)
Sizing Guide
Approach
Method
1. Design Evaluation: Evaluate existing design. Heuristic, Performance & Satisfaction evaluations.
2. Synthesise Issues: Report the usability and accessibility issues.
3. Redesign, create Iteration one and user testing
4. Refine, Iteration two and user testing
5. A/B Evaluation, design proposal, further recommendations and results.
1. Original Design Evaluation
As a team we evaluated the current website (2019) using the following techniques:
Satisfaction Assessments
Heuristic Evaluation
Together with four other students we assessed the website against Nielsen’s ten usability heuristics for interaction design. We also assessed against WCAG 2.1 for Accessibility. The image shows part of the full table produced. Each issue was prioritised into 'Must address', 'Should address', 'Could address' & 'Won't address'.
Think Aloud Protocol
Qualitative observations, watching customers use the website and using a ‘think aloud’ protocol. The sessions were analysed with thematic analysis.
Satisfaction Assessments
Participants completed the 'System Usability Scale' (SUS) to compare the satisfaction of customers. An overall score above 68 is considered above average. Supreme scored 24.4, lower than its competitors, and considered poor.
Performance Assessments
Task time: Time taken to complete tasks.
Task Completion: How much of the tasks were completed successfully.
Errors: The number of errors made.
Lostness: A measure of how many pages they went through to complete a task compared to the number required.
2. Synthesise Issues
Synthesis
The most important issue to address on Supreme was inefficient and difficult navigation around the entire website. A large number of errors were made during navigation. This is partly because the website has been designed for aesthetics, rather than effective minimalism. This may be part of the business and marketing plan but for the purpose of this exercise, I focussed on improving usability. The homepage navigation was the cause of much confusion and many errors. The graph below shows the main areas of concern. Some example problems can be found below.
Shop Page - Unclear use of images, resulting in higher errors, higher 'lostness' and slower performance times. Users were unable to navigate to clothing items they want. Perhaps the close up images are to try and tease the customers like the cover of a magazine (Krug, 2014), to raise curiosity and intrigue for the brand. However, the impact on usability was too high and they must change for this exercise.
Product Page - Colours and images do not have descriptions, meaning a text to speech reader would be unable to communicate the available colours. These must be addressed in the redesign. The images for the colour variants were considered too small on the 'think aloud protocol'.
Delivery and returns information page - To see delivery information, the user must navigate away from the main journey of buying an item and read through a large amount of text. This reduces efficiency and performance, potentially resulting in lost sales. A similar issue existed with sizing information.
Recommendations for redesign
- Use minimal design to improve navigation on the homepage, particularly those that distract from achieving top tasks.
- Use consistent and clear navigation throughout the website to improve usability and accessibility.
- Use full, clear images on the shop page, to increase clarity for navigation.
- Add a 'product reviews' feature to enable a top task.
- Use full, clear images on the product pages to increase usability and better enable a top task.
- Include clear descriptions for each image, including the colour of the items to improve accessibility.
- Add a search feature to increase efficiency and reduce 'lostness'.
- Add controls to scrolling content to improve operable design.
- Ensure the purpose of all links are clear from the text or the surrounding content to enhance operable design.
- Structure site pages in a logical order so they can be navigated using the tab key.
3. Redesign: Iteration One
Designing Iteration One
Using agile sprints, the design was developed in iterations. Only two for the timeframe of this project. Iteration one focussed on improving the ‘must improve’ recommendations from the report.
The initial redesigns were created on paper by building wireframes. The second image below shows the simplified site redesign.
Prioritising ideas and aspects to change
As the evaluation uncovered many opportunities for development, I prioritised these to decide what should be worked on in the available timeframe.
Redesigning Navigation
Using data from 50 card sorting activities to categorise information, the navigational menu structure was created based on evidence.
Wireframes
I sketched many quick wireframes to create new website layouts that will improve usability, accessibility and fit with the brand.
Iteration 1 Development
The click-through prototype was built in Adobe XD with the aim of addressing the recommended issues.
Testing Iteration One
Participants were given specific tasks with journeys that included the top tasks, this replicated the journeys in the original test. Participants represented the target demographic.
Iteration 1 A/B Testing Results
The first round of testing proved positive, with improvements in every area of performance and satisfaction.
The first round of testing showed improvements with performance and satisfaction.
- The SUS score increased from 24.4. to 87. A score above 68 is considered good and potentially indicates the participants enjoyed using the website.
Recommendations for second iteration
The first round of testing allowed me to create a list of problems that require improvement, these were grouped by priority.
Redesign: Iteration Two
Examples of Design Changes
- Think aloud testing showed that participants found it difficult to find the category they were looking for once they were on the products navigation section.
- On the first iteration, two items were together (e.g. Sweatshirts/hoodies), as this was the arrangement on the original Supreme (2019) website. But this proved confusing.
- Headings have been added to provide a greater hierarchy and aid faster navigation (Moreno, 2019). There is a main heading to confirm they are on the right section. Secondary headings help to structure and add logic to the page, aiding efficiency when searching for items (Norman, 1994).
- Categories are separated into clusters, a psychological method of helping users see information as being related to each other (Graham, 2008).
- Iteration 1 shop page, delivery information is a top task and can not be seen directly on this page. This was noted during think aloud testing. Size and fit information is a big task, and this is also missing from this page. There is an opportunity to include these, but it must be in a way that is not distracting and lowered performance scores.
- Description of image under images to make them readable by a text to speech reader and improve accessibility.
- Stock shown here with ‘selling fast’ to try and encourage sales though ‘Dark UX’. The scarcity effect may meant the customers think the products are running low and will be more likely to purchase, increasing sales.
- The bar showing stock also helps customer see the visibility of system status (Neilsen,1994). Understanding the supreme ‘drop’ process may help improve understanding decrease irritation.
- Delivery information is a top tasks, in iteration 1 participants became lost when looking for delivery information. Pop ups have been added to iteration 2 to prevent taking customers away from the web page and slowing the process of completing their tasks. The users can stay on the page and receive the information they need. It has the benefit of keeping the clothing product page design minimal, but still providing easy access to the information.
- Icons were used alongside the links to speed up understanding, this is Nielsen’s (1994) 6th heuristic, and should improve efficiency.
- Icons added to help increase speed to find information, based on Nielsen's 6th Heuristic recognition rather than recall.
- Participants wanted to know the price of delivery when viewing the basket from the think aloud task, an easy to see shopping costs menu was added.
Testing for Second Iteration
The same methods used to test the original site and iteration 1 were repeated to compare the effectiveness of the redesigns. The results showed improvements in all areas.
Eye Tracking
Eye Tracking Testing
Eye Tracking - Around Call to Action Button
Eye tracking was conducted as part of this testing to see if participants were reacting to call to action buttons, as well as seeing the images and advertisements.
Iteration 2 - Homepage Design
Iteration 2 - Shop and Product Pages
Iteration 2 - Sizing and Delivery Info
Iteration 2 - Checkout Pages
Responsive Design
