Adidas E-Commerce Platform Redesign Case Study.
UX/UI Design | 2 Weeks Timeline | Redesign Project
Friendly reminder: The main points are highlighted for your convenience and better user experience :)
MY ROLE
I will be responsible for the end-to-end design process, including being both UI designer and UX researcher.
DELIVERABLES
Analysis and user research, Market research,
Competitive analysis,
Interviews and Surveys,
Ideation Techniques,
Sketches,
Wire-framing,
Prototypes,
Usability testing.
QUICK SUMMARY
I will be analysing the current Adidas website to identify the key problem areas and find solutions to how I can solve these problems to help users gain a better shopping experience.
INTRODUCTION
‘E-Commerce Sales Grew 50% to $870 Billion During the Pandemic’
The Covid-19 Pandemic caused a large shift within the retail industry. With the lockdown bringing about brick-and-mortar stores closing abruptly, it was essential for businesses to adjust accordingly to maintain growth in both sales and consumer satisfaction.
Covid-19 bought a new way of living which increased in the number of online E-Commerce platforms.
Businesses needed to take the right step forward and shift to online spaces if they wanted to stay relevant. This is because this current way of living and shopping has now become the new norm.
BACKGROUND RESEARCH
E-Commerce is the ability of businesses to buy and sell a form of goods and services over the internet.
The rise of the E-Commerce industry came about when there was a rapid increase in technological devices. This caused a decline in the use of brick-and-mortar stores as people valued the convenience and accessibility which came from shopping anywhere and at any time.
Not only has this shift been beneficial to consumers but also to businesses, as it lowers their costs and caters to a larger group of individuals.
E-Commerce & Accessibility
E-Commerce platforms diminish the gap caused by brick-and-mortar stores when it comes to people with disabilities.
Many individuals with these conditions find it hard to shop physically in person. This is fixed by online shopping, as it gives them the power to purchase their goods directly from the comfort of their own homes.
Technology today has also advanced to ensure inclusion is obtained through Web Content Accessibility Guidelines.
Growth of E-Commerce during the last 10 years...
Due to technological advances, online shopping over the years has become more accessible and accepted.
There is an increase in consumer trust when it comes to online transactions and overall consumer satisfaction due to the convenience of being able to shop 24/7.
It is said that the global E-Commerce market is set to generate a total of $5.55 trillion in 2022. Demonstrating that shifting to an E-Commerce platform will be highly beneficial for online retail stores.
‘E-Commerce growth from 2010 to 2020 went from 4.6% to 18%, almost 5x more’
The Downside of Covid
Due to the pandemic and the urgency to expand, there was an increase in competition occurring from businesses. Businesses had to do more to stay relevant.
-
This resulted in 49% of brands investing in social commerce content in 2022.
Companies that did not get the chance to upgrade to these platforms showed a decline in sales and overall negative effects on their business.
Covid also caused many stores to shut down as they only operated as brick-and-mortar stores and did not have the capacity or resources to shift online.
As there has been an increased demand for online shopping, it is crucial for businesses like Adidas to operate effectively and efficiently making sure they upgrade their current platforms to cater to every user’s needs.
SO WHY ADIDAS?
Adidas is a multinational brand. It has been one of the most successful clothing brands within the sports industry mainly because of its influence within the sporting world.
Their involvement in various sports such as football, rugby, cricket, and boxing, has always kept its brand relevant and its consumers loyal.
Speaking to many individuals about their opinions on the brand I was constantly greeted with positivity.
Looking at all Adidas has achieved over time, they are most definitely doing something correctly when it comes to brand image and reputation.
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.
This is one of the reasons why I chose to redesign the Adidas website as I wanted to improve their current website and create a space which aligned with the brands overall image and popularity, drawing in positive attraction.
THE PROBLEM
What I found:
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’
Alongside looking at the reviews which were left online regarding the Adidas website, I also asked individuals to navigate through the website and convey any problems they encountered.
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 to find what they were looking for.
HYPOTHESIS
By making improvements to the current navigation and interface issues users are experiencing on the Adidas site by redesigning the interface to give it a simpler and cleaner look, users will engage more positively when browsing and shopping, resulting in more traffic on the site and increased user satisfaction.
COMPETITOR ANALYSIS
I researched Adidas's competitors to compare their features to figure out what is working and is popular amongst users and what is not.
Direct competitors: Nike, Puma, Under Armor, New Balance
Indirect competitors: Asos, Amazon
COMPETITOR APPS
APP FEATURES
Competitor Analysis Insights:
I noticed a common similarity when it came to the Adidas website and its competitors website features.
-
Adidas menu bar consisted of more headings than its competitors, many non relevant features and more of an overall cluttered UI.
-
Jakob’s Law: All the brands seemed to comply with one another by having similar UI when it came to layout and features.
-
Nikes popularity was the highest out of all 4 competitors., with the most website views and revenue. This shows that their website is more desirable and there is a direct correlation between user satisfaction and sale revenues.
-
Hicks law: The amount of content laid out together in groups: Adidas 3/4/6, Nike 2/3, Under Armour 4, Puma 4/3. Adidas had a more cluttered, busy and inconsistent layout, which leads to overwhelming the user.
USER RESEARCH
Red route analysis.
To get better insights into what a user needs and wants when it comes to the Adidas E-commerce platform, I undertook the task of performing red route analysis.
This allowed me to help identify what features users would consider the most to least important when navigating through the Adidas website.
Doing this task was crucial as it allowed me to declutter the website and remove or add any necessary features.
I collected data from 15 users who actively use E-commerce platforms to browse and shop. I ensured to list all possible features which users deemed useful from my previous research to ensure my analysis is as accurate as possible.
Key takeaways:
-
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.
-
Images are highly important when it comes to user experience, as they draw attention and make the entire interface more appealing.
User Interviews
I conducted user interviews to further my research. The data collected came from google forms, surveys and in person interviews. I posted the forms and surveys into slack groups as well as sharing them with friends and family.
Google forms survey: 10 responses
Demographics
Age:
3x 24-year-old
3x 25-year-old
1x 23-year-old
1x 26-year-old
1x 27-year-old
1x 28-year-old
Gender:
5x Females
5x Males
Occupation:
9 Employed
1 Student
Key qualitative insights
Although I only had a small sample to go off, I noticed a similar theme and pattern in the responses received. These insights later helped to influence my design decisions.
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-easier to filter for what you need.’
‘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. 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.
‘It’s quite long to find the right item.’
‘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.’
From this data collected, I can understand my key user better to figure out who I am designing for, what their pain points are and what I should do to solve those pain points.
Before moving onto the ideation stage I was able to extract these key pain points from all the research I gathered.
IDEATION PHASE
With help from users and using previous data collected I began to analyse the Adidas website in more depth breaking down where users struggled, what the problem areas were and where features were lacking so I could use these results to help shape my design decisions later.
Strawman Proposal
Crazy 8's
The Crazy 8’s ideation technique allowed me to freely sketch out any design ideas that popped into my head. I was able to design spontaneously without any restrictions or constraints.
I took these design ideas and tested them with 5 users to see what they liked and what they did not. I then took any feedback I received forward and began starting the design stage of my project
👍🏽 2 👎🏽 3
👍🏽 3 👎🏽 2
👍🏽 1 👎🏽 4
👍🏽 0 👎🏽 5
👍🏽 3 👎🏽 2
👍🏽 4 👎🏽 1
👍🏽 0 👎🏽 5
👍🏽 2 👎🏽 3
STARTING THE UI
SKETCHING, DESIGNING, TESTING (and then repeating)
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 few mid fidelity wireframes to see how my apps interface will look, what features should be added and where I should place each element/icon.
I took the most popular screen from my crazy 8’s and created a mid-fid wireframe to give it a more digital feel.
I also created a new mid-fid wireframe version of the entire Adidas homepage taking into consideration all the research I conducted and what the users’ needs were.
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.
THE UI
High Fid Screens
I then created high fidelity wireframes. These helped me to visualise how the final designs outcome would be and allowed users to test out the new design of the website.
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.
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
DESIGN FUNDAMENTALS: LAWS OF UX/UI
Design fundamentals I implemented into my design decision making...
Jakobs law: Users prefer sites to work the same as others they know.
I incorporated this law into my work by making sure the new design I created for Adidas was like its competitors as well as making minimal changes to remain like Adidas original design. This was important as it would allow the user to easily navigate through the site without getting confused or overwhelmed.
Millers law: Organising content into smaller chunks.
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: Grouping common sections together.
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: Users perceive aesthetically pleasing design as more usable.
I 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: Less complexity of choices and stimuli, cleaner interface.
The 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.
STYLE GUIDE
WCAG AND ACCESSIBILITY GUIDELINES
I adhered to the WCAG and accessibility guidelines within my project by…
-
Ensuring that 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 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.
TO CONCLUDE...
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 improvement.
Conducting research and ideating allowed me to focus on the key issues and make effective design decisions to solve these issues.
Next time I hope to have time to test out my final interface design to truly see if I met the client's and consumer's wants and needs.