UX Case Study — E-Commerce — Adidas
In 2020 the COVID-19 pandemic made the world stop…no one could enter shops, work or even visit family members. The cycle of the 9–5 was put on hold and, working from home soon to rise. Businesses found different ways to take this tragic event as an opportunity for growth. Improvements to their E-Commerce experience for users to be immersed in the world-building of the brand.
Roles: Product Designer, UX Researcher
Method: Double Diamond
Project Duration: 2 weeks
Background
Introduction: What is E-commerce?
The birth of Electronic commerce came into fruition in the 1960s to having its first online retail transaction in 1994. E-Commerce is buying or selling products online over the internet. It can be from food, clothes, electronics and many more.
E-commerce has been able to do what physical stores have been unable to achieve. It has been able to make products more accessible and available, anywhere and anytime. In addition, it has been more effective in lowering the costs of transactions by eliminating the involvement of middlemen and bringing products directly from manufacturers or distributors to consumers. By going that extra mile to meet consumer needs, E-commerce sites have been successful in creating a loyal clientele that is willing to spend on a more regular basis with bigger ticket spends.
How has E-Commerce changed over the past 10 years?
These new forms of selling are positive, brick and mortar businesses moving to the internet to engage with new old customers, creating new job roles for employees that would be an asset to the company and the customers. We’re witnessing convenience at our fingertips. E-commerce works in favour of those that are working long hours. People who have visible & non-visible disabilities that have difficulty shopping in person can now purchase their items on their phones and desktop.
The shift from retail to online
Whilst, I express the good news, I must also share the bad in the last two years. We have been experiencing a contagious and ongoing virus that has hit every country in the world - COVID-19. Many stores that only survived on brick and mortar have closed down due to a national lockdown. Closing retail means no customers coming is a loss of income. It has affected companies that failed to shift their business online at the right time due to the lockdown.
However, there has been an increase of E-com businesses coming into fruition ($4.891 trillion,) with those numbers, you can see the opportunity is still there.
As a designer, COVID hasn’t affected me too much. I have my studio and work from home, depending on the task at hand. My one to one with clients has moved to phone and video calls which has pros and cons.
Case Study Brief
What am I going to do?
In my written case study, I will be discussing in my written case study explaining the processes and outcome.
As a product designer, I will be planning to identify problems and come up with a solution from the research and ideate resolutions. Coming up with a revised prototype using the design fundamentals suited to the Adidas aesthetic, highlighting the improvements that needed changing.
Deliverables:
- 3 Pages: Home page, Product page, and checkout page
- Mobile and Desktop compatible screens (Responsive).
Why Adidas?
Adidas, one of the largest sportswear manufacturers around the world, has its cultural influence in sports, media and music entertainment you’ve seen the three stripes iconography. “Looking back at my childhood I and would try to bring our fresh Adidas sneakers into school to compare who’s are better.” Whilst praising Adidas for their achievements there’s always a conversation via online or in-person about who their competitors are, their value market and cultural impact. Looking at the milestones they’ve achieved is expected, viewing brand rankings, they come as runner ups in comparison to the American founded company Nike. I believe this would be an opportunity to revamp the current look of Adidas to engage with its current audience and attract a new audience through UX/UI.
Problem Statement
As mentioned at the beginning of the case study, with the rise of working from home, consumers are purchasing from home even more now. Adidas had a very difficult situation. They were losing revenue and not gaining any traction on the e-commerce front. Due to a lack of focus on the usability and functionality aspect of their website, the consumers felt that the website wasn’t working properly and felt as though there were better alternatives out there that they could find more easily like Amazon or Nike. Adidas wants to create a cohesive experience for online buyers. They needed an easier way to navigate through all of their products and learn more about those products as well as be able to make purchases quickly and easily without having to deal with issues with checkout.
Hypothesis
I plan on redesigning the desktop and mobile site, it will be to be clear and noticeable for the buyer to roam. Adding the iconic 3 stripes logo to the Adidas website. The outcome will be a fresh approach, creating an immersive and engaging experience. This redesign will also show how I can take something simple and make it complex while thinking about its purpose, structure, and functionality.
The first design fundamental I will be referencing is Jakob’s law, which is not to reinvent the wheel but perfect it. So I will generate an exercise involving random sneaker/footwear heads that fall under my user category (18–40) will each go through my chosen competitor website via an open-ended questionnaire. This will tell me how well they are receptive to their website and therefore implement the changes to my chosen company.
Secondly, I plan to utilise Millers Law with my group of participants with exercise. It’s related to the working memory of the average person. Studies show humans can keep up with 7 (plus or minus 2) items to mind. Using this law with my client’s website will organise content within groups of 5–9. I predict the user journey will be shortened and beneficial.
Business Research
To understand my clients brand positioning, I conducted competitor analysis research. I wanted to compare my client to my competitors in areas where they are similar and progressive. Doing this research has allowed me to identify the pros and cons are then use the information for my ideation and wireframes.
Competitors for Adidas: Nike, Puma & New Balance
Competitor Analysis — discovery:
- Jakobs Law: The layout and features of clothing E-commerce are similar with some differences.
- Millers Law: Adidas 9, Nike 8, Puma 8, New Balance 7
- The headings of the competitors are less cluttered compared to Adidas, a clean approach.
- Nikes website visits are a lot higher than their competitors, showing they have high desirability for users to check for their latest products.
- Puma is the only competitor that uses a hamburger icon and language change who live in different countries and speak another language.
User Research
Research Tools: Google Forms & Invision Freehand,
Red Route Analysis
The next critical task I did was the red route analysis. Helping users identify what features of the website they consider more and least utilised within the user journey. Doing this task is beneficial as it will help remove any extra features that will clutter the website, thus creating a clean design for the customer.
When creating my table, I made sure that I listed any possible feature that would be useful to users. Then reaching out to my chosen online shoppers to rank and position the features based on how beneficial it is to them when buying online.
Participant Details
- 14 regular footwear buyers
- Average age: 20–35 years old
- Location: United Kingdom
- Professions: Tech / Marketing / Sports / Fashion
- Average salaries: 23k — 45k per annum
Key takeaways from the RRA:
- To navigate users final destination (item they want to add to basket), the subheading product categories on the landing page is the important feature.
- Imagery is the focal point of attraction as it will bring users to see the latest and current products out there.
How will I use what I’ve learnt?
Moving forward with my findings, features that users would use the least will be placed in subcategories, whilst the features users would use the most will be at the forefront that’s visible for the user.
Additionally, removing these features will quicken up the end to end journey for users and won’t hinder the companies revenue objectives.
Interview
Being considerate in the user research stage is key. I decided to put myself through the user’s thoughts and feelings behind the Adidas web page journey. Due to COVID-19, I used an open-ended questionnaire via Google Forms using the same participants from my red route analysis. Going back to my notes I made sure the line of questions were not misleading or biased by ensuring they were:
- Based on real-life experiences so users can think about their shopping experience.
- Not mentioning keywords such as ‘Trainers’ or ‘payment methods’ so users arrive at their answers organically.
- Asking questions that evoke natural emotions.
Gaining the reassurance that my questions are good, my colleagues will review my questions so that my bias for the company doesn’t involve in my questions.
Sample:
- 10 People
- Target audience: regular online clothes shoppers
- Aged between 18–35
- Professions: Tech / Marketing / Sports / Fashion
- Location: United Kingdom
Questions:
- What’s the first thing you do when opening up an online clothing stores webpage?
- You need help with a delivery issue (e.g. need to look for your tracking order item but don’t know how) — how would you go about this situation?
- You find an out of a stock item on an online clothing website, what would you do if you wanted this item?
- Do you shop at any sports companies (e.g. Nike, New Balance) — can you think of two ways they differ from Adidas.
- Does anything frustrate you when navigating through the Adidas web page?
- What do you prefer about shopping in-store over shopping online?
- What are your thoughts on fitness communities that sports companies provide? e.g. Running, cycling
Ideation Phase
Cray 8s
Using the 10x participants for my design development, I presented them the current Adidas home page and compared the 8 revised designs and see which one they preferred.
Home Page: The website often receives the most attention, it is a blend of visual design and content.
Regular Shopper: “We believe Ideation 1 is the most balanced from the 8 presented to us. The others and I would be able to digest the format and how the content would be potentially be placed on the other pages. “
Card Sorting
Card sorting helps you design an information architecture, workflow, menu structure, or website navigation path.
Using this method involves the designer and users organising items they expect to appear on a clothing E-commerce’ landing page, clothes page, and check out page. It explains the rationale behind their decisions.
Outcome:
Design Phase
Low Fidelity Wireframe — Paper and pen, Figma software
Starting with the wireframes, the combination of my business and user research and ideation techniques. I had to be realistic and considerate of the constraints that will occur in visuals, layouts and accessibility guidelines whilst keeping this in mind. I will balance creativity with value.
Sketching low fidelity wireframes is normally advised to use paper and pencils/pen, it saves time and money to use the software. You can stop and start again without having to set anything in stone.
Mid Fidelity Wireframe
Onto the next stage for my mid-fidelity wireframe, The low-fidelity ideas are now being used within Figma software to see they fit into the constrained and realistic layout.
Ideation, Low Fidelity, to Mid-fidelity. I went ahead with replacing the shipping subheading with information that would be broad enough to add in the needed information for users; For my CTA Img 7, I planned to go with a Join Us page that involves community, running and fitness. I used my questionnaire data to go ahead with my decision, as users found it beneficial that sports companies provide fitness communities.
High-Fidelity Wireframe
Changes made from Mid-fidelity wireframe to High-fidelity wireframe include: Change in Format from IMac to Macbook Pro, text which will go into the final design; including the three stripes into the centre of the page to keep the iconography aesthetic; use of images that promote their running community.
UX Summary
- Going through the UX process helped me identify the main points that needed to be shown. Working with the results from the online shoppers gave me a better understanding of which features to add and remove to my final designs.
- The business and user research process helped me to ideate solutions concerning the user experience. For instance, when analysing my findings, Completing problem-solve issues such as decluttering the header category.
Final interfaces — UI Phase
The final interfaces were designed using the Style Guide and in line with design fundamentals and accessibility guidelines outlined below.
Style Guide
Staying on-brand with Adidas’s aesthetic, knowing what colours I use to help me work in a creative way to design the site.
7. Breakdown of design principles
The UX laws that I implemented in my UI decision making. Some of these include:
Jakobs Law
Jakob’s law, users will transfer expectations they have built around one familiar product to another that appear similar. Keeping that in mind, I made sure I use a compatible format with my competitors whilst staying consistent with Adidas aesthetic.
Millers Law
Millers Law states the average person can only keep 7 (plus or minus 2) items in their working memory. Therefore, I worked within five categories, easy to remember within a page.
Gestalt Principles
Gestalt principles are six individual principles: similarity, continuation, closure, proximity, figure, and symmetry.
- Law of Proximity — Objects that are close, or proximate to each other, tend to be grouped; as shown in the ‘Mens’ section of my app design.
The Pareto Principle
The Pareto principle I planned on adding when designing my web pages.’ The concept is that 80% of consequences come from 20% of the causes’. Saving user time, I added features that lead to many different outcomes, then the other way round.
Therefore, the main features I focused on whereas followed:
- Search Bar: For those who know the specific item they are looking for (product name).
- Image CTAs: Having product image CTAs is a way to scroll through the product listing from the landing page. (New Arrivals)
Aesthetic Usability Effect
A study of 253 participants by Hurosu and Koari (1995) found that the unconscious mind prioritises a product with aesthetic appeal. The better the product looks, the better the perceived function of it regardless of the actual functionality of the product.
- As you can see above, the aesthetics of my final UI is something I took seriously. The two colours I used, black and white, create a presence and focused feeling. Scrolling through the website that each image seen had an eye-catching, clean and professional design.
Picture Superiority Effect
The picture superiority effect refers to the phenomenon in which pictures and images are more likely to be remembered than words. As you can see with my desktop and mobile design, the first thing you see is a powerful image that shows creativity, expression and boldness. Taking into consideration this is a fashion/clothing company. The clothes are 20% of the work, 80% is imagery (marketing) that will attract users and lead to the growth of sales for the company.
8. Accessibility — WCAG Guidelines
In the UK, it is thought that some seven million people of working age have a disability, which all adds up to an awful lot of spending power. This is known as the “purple pound” and to be reckoned worth around £274bn to the economy.
“Bad design is bad for business”
Having this in mind when designing my website, the Web Content Accessibility Guidelines and the World Wide Web Consortium (W3C) accessibility standards were important. If the standards are not met, legal implications could appear inaccessible for many users, which leaves the company in a terrible position.
WCAG 2.0 — Colour Contrast
With my font colour choices, I made sure they were all colours in my design and met the AAA and/or AA colour standards. Colour ratios are important as our eyes are visually drawn to certain colours not only that visually impaired perceive the information on the page and therefore fully use the service.
Variation states of CTA
The area for clicking and tapping controls must be large enough for people to activate them. Creating my designs, I made sure the minimum touch areas were 44px, as shown in the image below.
WCAG 2.0 — Screen Reader
Keyboard accessibility is one of the main points of web accessibility. Screen readers and keyboards help those with disabilities to navigate the website without added issues. Knowing this, I’ve made sure my navigation throughout my UI design is as logical and intuitive as possible.
9. Evaluation of design
Feedback & Usability Testing
I would have liked to re-test my designs on users to have better solutions. If I had more time, I believe better results would appear.
Working in fashion and now transferring into tech, iterating is the main thing that leads to improvement and progress. My process is when I plan out my work to have a benchmark to follow.
Conclusion
In conclusion, my take of the Adidas website & mobile screen is the result, business and user research conducted initially. Doing this made me discover important user pain points which I planned to resolve.
The different ideation techniques I on the users gave me the feedback which led me to make the decisions.
One thing I could work on is time. Balancing perfection and a timeline made me see how I can improve on. I believe I met the client’s needs and would have loved to test my final UI design on a large subset of online shoppers and even employees who work at the company.
