Improvements to the current Adidas e-commerce platform.
Context
Overview
I analysed the current Adidas website to identify the key problem areas and find solutions so I can solve these problems and help users have a better shopping experience.
​
My Role
User Researcher and UI Designer.
​
Project
Redesign project.
​
Timeline
2 Weeks
RESEARCH
Introduction
The Covid-19 Pandemic caused a large shift within the retail industry. The lockdown caused brick-and-mortar stores to close so it was essential for businesses to adjust accordingly to maintain growth.
There was a new way of living which increased the number of online E-Commerce platforms. Businesses needed to shift to online spaces if they wanted to stay relevant.
‘E-Commerce Sales Grew 50% to $870 Billion During the Pandemic’
Background
The rise of the e-commerce industry came about when there was a rapid increase in technological devices, causing a decline in brick-and-mortar stores. People valued the convenience and accessibility which came from shopping anywhere and at any time.
​
E-commerce also diminishes the gap caused by physical stores when it comes to people with disabilities as people can shop directly from their homes.
Why Adidas?
I chose to improve the Adidas website to create a space that aligned with the brand's overall image and popularity, drawing in and maintaining favourable attraction.
Although there is popularity when it comes to the brand, looking at their website I was greeted by a slight distaste from users. There were negative reviews when it came to the usability of the website and a common theme of avoidance to use it.
​
Problem
Users find it difficult to navigate through the site to find and purchase what they’re looking for without getting lost and distracted by the user interface.
​
‘It is difficult to find what I am looking for; the entire homepage and interface is messy and very busy’
‘I find it hard to navigate around the website'
Hypothesis
By making improvements to the navigation and interface issues users are experiencing, users will engage more positively when browsing and shopping, resulting in more traffic on the site and increased user satisfaction.
Competitor Analysis
Direct competitors: Nike, Puma, Under Armor, New Balance
Indirect competitors: Asos, Amazon
Competitors
Key Features
Competitor Insights
Adidas menu bar consisted of more headings than its competitors, many non-relevant features and more of an overall cluttered UI.
Nike's popularity was the highest out of all 4 competitors, with the most website views and revenue. Shows that their website is more desirable and there is a direct correlation between user satisfaction and sale revenues.
Jakob’s Law: All the brands seemed to comply with one another by having similar UI when it came to layout and features.
Hicks law: Adidas had a more cluttered, busy and inconsistent layout, which leads to overwhelming the user.​
EMPATHISE
User Research
As online shopping has become popular post-pandemic, Adidas remains at a loss due to the usability of its website.
​
Users stated:
​
-
The website was difficult to navigate through
-
Did not work at times
-
Item descriptions did not match the items
-
The functionality was overall not great
Due to these factors, users had to find alternative websites to shop at such as Nike, JD, and Amazon.
User Interviews
I conducted user interviews to further my research. The data collected came from google forms and in-person interviews.
​
Google forms: 10 responses
​
Demographics:
​
​
Age:
​
3x 24yo 3x 25yo
1x 23yo 1x 26yo
1x 27yo 1x 28yo
​
Gender:
​
5x Females
5x Males
​
​
Occupation:
​
8x Employed
1x Student
1x Unemployed
​
​
User Interviews: Key Qualitative Insights
Users value time and convenience which is why they prefer online shopping.
​
‘I prefer shopping online as it’s much easier to find what you’re looking for, and you’re able to compare items across different stores.’
‘Online because we can do it from our mobile phones so its quick and convenient.’
‘Online as it’s a faster process, efficient and more enjoyable.’
Users found navigating the Adidas homepage difficult as the interface was cluttered and disorganised
‘The homepage is very busy which draws attention away from the products. There are different fonts in different sizes, busy images and certain sections aren’t necessary.’
‘I found the interface was cluttered, text was very hard to read, especially on images. The homepage had too much information and images making it look messy.’
Searching for items is usually unsuccessful due to the difficulty in navigation, layout, and text.
‘I typically don’t find what I’m looking for on the website and have to buy it elsewhere.’
‘The website is not great for just surfing through as its difficult and makes the experience unenjoyable.’
‘Too much going on to focus and navigate properly.’
‘Experience is not good due to the amount of text on the site.’
Users tend to choose alternative websites to shop from as they find them a lot easier to navigate through and more aesthetically pleasing.
‘Nike is a lot more ‘’cleaner’’ and the website isn’t as busy, there is more white space which allows items to be shown off properly without too many distractions.’
‘Nike has way less words on the homepage. It doesn’t have moving videos as much as Adidas which is what I prefer.’
‘The interface is more attractive for Nike.’
‘Yes, I have, the other websites are much easier to use and are much clearer, with clear promotions and more user friendly.’
Red Route
Analysis
Red Route:
Key Takeways
Browsing convenience
Users put high importance on the convenience of browsing when it comes to an E-commerce platform. Product filters and search bars are used by all.
​
Appealing interface
Images are highly important when it comes to user experience, as they draw attention and make the entire interface more appealing.
​
The Main
Research Insight
Before moving onto the ideation stage I was able to extract these key pain points from all the research I gathered.
IDEATION
Strawman
Proposal
Crazy 8's
DESIGNING + TESTING
Sketching
It was important for me to begin my design phase by testing my ideas and gathering valuable user feedback earlier on so I could iterate and make changes to my ideas accordingly that would meet my user’s needs.
Pictured are early sketching iterations of my initial ideas.
MID-FID
WIREFRAMES
I took my initial paper sketches and began the wireframing phase of my UI process.
I created a wireframe from one of my crazy 8's which I felt would be the most functional and got users' feedback.
Add more options for browsing on the homepage.
Remove the text section as there is too much text to read and users do not deem it relevant.
Final UI
I made sure to translate all the pain points collected within my final deliverables making sure I solved them.
Simpler bar with popular options.
Less cluttered homepage with readable text.
Removed text and added a popular trends section as users stressed they want to see what's 'new and in.'
Added a locations and language setting option as the Adidas website is used worldwide.
Testing &
Feedback
-
‘A much cleaner webpage with less clutter and straight to the point'.
​​
-
‘I like the button dedicated to the sale section as it is in red and easy to locate since I usually come to the website to view what’s on sale.’
​
-
‘The text is much easier to read.’
​
-
‘I would use the Adidas website more if it looked like this, it is much easier to use.’
Old Vs New
Style Guide
DESIGN FUNDAMENTALS
UX/UI Laws
UX/UI design laws were used throughout my design process to ensure my design is useable and functional.
​
Jakobs law
Made sure the new design was like its competitors as well as making minimal changes to remain like Adidas's original design. This was important as allowed the user to easily navigate through the site without getting confused or overwhelmed.
​
Millers law
Each specific section is organised together with a maximum of three container boxes showing at once on the screen. This makes the interface less cluttered and quicker to navigate, giving the user a better experience.
​
Laws of common region
Each specific section is grouped and labelled clearly under specific headings. The content is grouped in clickable container boxes with clearly defined borders.
​
Aesthetic usability effect
Made sure my final design was clean and concise taking into consideration colours, typography, and white space. This was important as seen from the previous data collected users respond more positively to more aesthetically pleasing interfaces.
​
Hicks law
Use of hick’s law was evident within my design as the interface was clean with a lot of negative space and there were only 3 or 2 elements shown on the screen at once to not confuse or overwhelm the user. Tasks, such as clicking on an element were easy to do with clearly labelled and visible buttons.
WCAG & Accessibility
I adhered to the WCAG and accessibility guidelines within my project by:
​
-
Ensuring each CTA button was the minimum touch area requirement size, which was 44px.
​​
-
Text and typography were 25px up to ensure people with any visual disabilities did not have a hard time reading and consuming the text on the screen.
​​
-
Making sure my design was readable by screen readers to uphold web accessibility. As people with various disabilities, such as seeing, may find it difficult to navigate through the site without running into complications. Screen readers make it easy for them to consume the information through audio. I ensured any text was overlaid on top of images to avoid confusing the screen reader.​​
Colour Contrast
Colour contrast was crucial during this project. I made sure all the colours used passed the AAA or AA colour standards. This is important as someone who is visually impaired may have a harder time processing text/information which fails these standards.
Takeaways
Redesigning the Adidas website was enlightening for me as it allowed me to analyse a platform which is currently already out there, extract the pain points experienced by users and then solve them to create a new and improved site.
​
It also made me realise that current platforms out there right now, even as big as companies such as Adidas need constant improvements and updating.
​
Although conducting research and ideating allowed me to focus on the key issues and make effective design decisions to solve these issues, I hope to have more time next time to test out my final design to truly see if I met the client's and consumer's wants and needs.