Homepage Redesign
(scroll up to view the rest of the webpage)
Lillian Jiang
UX/UI designer
The Challenge & My Role
The Challenge
In 2020, the pandemic happened. Some retail stores had to close in response to the lockdown, and it was a huge shock to the retail business. However, along with the pandemic, there were opportunities that arose. Having a digital platform that allows users to shop online or in-app can bring enormous value to a business.
Our client, AMX Superstores, is seizing the opportunity and turning its focus from physical stores to building a seamless omnichannel experience. Therefore, a responsive e-commerce website is needed, and the design aesthetic needs to be updated to fit the modern experience.
Due to the urgency of the goal, we were given only 6 months to deliver the newly crafted e-commerce website.
The team │ I worked closely with 2 frontend developers, a product manager, and AMX Superstores business manager.
The project | e-commerce website redesign for AMX Superstores.
My role | I am the sole UX/UI designer and I personally created the deliverables that you will see in this case study.
My responsibilities:
Google Analytics data analysis
Market research (competitive analysis)
User research and interviews
On-site observation
User Journey
Feature discovery and ideation
Style guide creation
Wireframing and prototyping
Design system creation
User interface and interaction design
AMX Superstores website redesign
AMX Superstores eBay store redesign
Email template design
The outcome │We were able to launch the new website within the six-month timeframe. As a result, the website conversion rate increased by approx. 180% and online sales turnover increased by approx. 300%.
The Research
Google Analytics
Analytics Review
In order to find out the existing problem for AMX, I utilised Google Analytics to gather insights into their users, devices, conversion rate, behaviour flow, etc, to find out which part could be optimised and what are the quick wins.
According to Google Analytics, 63% of the users use mobile devices while browsing the website. However, AMX Superstore doesn't have a mobile friendly responsive website. Therefore, I decide to take a mobile first design approach when redesigning the website.
The conversion rate of AMX was 30% below average within the same industry.
AMX Superstores Old Website
Understand AMX Superstores USPs
I did some research into AMX Superstores business and their competitors to find out what could be the unique selling points (USPs) for AMX Superstores that can distinguish them from other competitors.
The existing competitive points:
Price Match - Competitive
Free Delivery - Call to Action
VIP Program - Customer Retention / Loyalty
Potential competitive points (once redesigned the website) :
Click & Collect - Convenient
AMX Superstores has over 10 retail stores across Australia, so launching Click & Collect could be beneficial for both the business (online and in-store sales) and local customers (convenient).
NSW Campbelltown Store
On-Site Observation
I went to AMX Superstores Sydney stores to observe the store layout and colour theme. This is to make sure the customers have a consistent experience across multi-channels.
Customer Interview
I created an affinity mapping based on the interview data to find out what are the common needs and behaviours among our customers.
Customer Interviews' Key Findings
When the product is associated with safety, customers would value brand and quality as their preference over price. If it's clothing and not associated with safety, appearance would be one of the key factors.
The stock level will influence the customers' purchasing decisions. Some customers will turn to other suppliers if the product they want appears out of stock on the AMX website.
Because of the lockdown, some customers have changed their shopping behaviour, and tend to shop online more often. But for clothing or helmet, they still prefer to try in-store and purchase on the spot.
The majority of customers will do research online first before going to the store or making an online purchase. The research sources include: google, product manufacturer website, AMX Website, YouTube product review, and other competitor websites.
60% of customers prefer to purchase hard parts online. The majority of the customers prefer to purchase clothing in-store so they can try it on to make sure the size is correct.
The purchasing process for kids' products is much simpler compared to adult products.
User Journey
I mapped out users' journey to see how I could simplify users' journey to help them reach their most important goals with the product, in the meanwhile, identify the potential opportunities.
The Solution
Old website
Identify Major Pages
Based on the customer interviews, below are the pages that I suggested to focus on first, then agreed by the product manager and AMX Superstores business manager.
Major pages:
Homepage - based on the GA data, the majority people first landed on our homepage, it is important to leave a good impression for our users as well as to highlight the AMX Superstores USPs.
Brand Page - this is a new page type for AMX Superstores. Based on the interview insights, some customers are strong brand believers, whereas some beginners don't have much knowledge of brands, but they want someone to hold their hands to tell them the difference. Thus, the brand page is important not only to educate customers but also to help them understand the difference between each brand and help them with their decision making.
Product Page - based on the interview and website audit, the customers require more information to help them make a decision, such as product information, stock level, etc. In addition, the product page is very important as part of the click & collect shopping flow.
Search Bar & Search Page - search is one of the customers' primary needs. When a user starts a search, they’re actually starting a journey of solving problems or to accomplishing tasks. Helping customers to find the product or the information they need will provide them with the help in their journey and vastly enhance their experience on the way.
Category Page
Shopping Cart Page
Checkout Flow - click and collect
VIP Program
Store locator
Login Page
Style Guide
Style guide is critical to ensure consistency in terms of typography, colour, buttons, elements shadows, icons, etc.
Example of wireframes
Wireframing
Once I created the Style Guide, I began to produce multiple different variations of wireframes. I then put the designs in front of internal stakeholders for feedback.
Example of New Design
High-Fidelity Design
Once I received the agreement from the internal stakeholders regarding the low-fidelity wireframes, I started working on the high-fidelity design, keeping the responsive grid and the AMX brand image in mind. I applied imagery and a modern look to the new website, since we have a young user base (according to Google Analytics data).
The stakeholders were super excited and looking forward to the new website's launch when they saw the high-fidelity screens.
The Complete New Look
Mobile-First Approach Responsive Design
I took a mobile-first design approach and utilised the Bootstrap Grid System by working on 5 screen sizes.
Ready for collection email template
(scroll up to view the rest of the template)
Email Template Design
The customer's experience doesn't end with the payment. Order confirmation email, dispatch notification email, or the ready for collection email with the information they need will provide customers with a seamless shopping experience.
Order confirmation email template - Delivery
Order confirmation email template - Click & Collect
Ready for collection email template
Dispatch notification email template
eBay store redesign
eBay Store Redesign
I also helped AMX Superstore to redesign their eBay store to ensure they have a consistent brand image across different channels. The eBay store has more tech limitation, therefore, I decide to follow simple grid system while redesigning.
The eBay store is still under tech development.
Key Takeaways
What I learned
I believe there will always be knowledge gained from each project no matter the scope. Knowing what worked and what did not would be beneficial not just for iteration but also for future application.
This was a project with a hard deadline. Because we rushed to complete a project that had experienced scope creep, we compromised some quality and user testing sessions. We should plan more thoroughly and complete more user testing as user feedback might bring in new and valuable ideas.
From what went well, I learned that reviewing Google Analytics data, conducting user interviews and creating a thorough user journey are important steps in helping us to identify user needs, as well as potential business opportunities. The most important part, is to be able to see the big picture when connecting all the findings, which would bring enormous value when it comes to the design.
573
Screens
7.41%
Less Session Duration
180%
Conversion Increase
300%
Sales Increase