Redesigning the Metallic Horse Website
Introduction
Redesigning the Metallic Horses Online store aimed to improve the website’s user experience, interface, and accessibility to increase sales and conversion.
Background (The Problem):
The motorcycle culture in Nigeria has grown and the main issue is that bikers preferred shopping in-store over online due to poor online shopping experience.
So what is this about?
This is the redesign of an online website for Metallic Horses which is a store for premium motorcycles and motorcycle accessories and gear. This store is renowned and has a whooping number of >6500 customers in Nigeria.
Aaand, you redesigned this because?:
Friends and family complained about their poor shopping experience at the MH online store. I wanted to see what could be done to create a cohesive experience that would improve sales and further the brand. My aims and objectives were to enhance their experience and also help the business by increasing conversion and revenue.
Roles: For this project, I served as the researcher and UI/UX Designer, joining the biker community for insights.
Annnd how did you do it aka Methodology?
A comprehensive methodology was employed consisting of research, UX audit, design, and user testing.
The research phase involved interviews with website users and a UX audit was conducted to identify areas for improvement. The design phase focused on creating a clean, modern, consistent user interface and easy-to-use experience.
A new “Collections” category was added to improve browsing, personalization, sales and marketing, discoverability and SEO. The design process started with low-fidelity sketches and ended with high-fidelity design, followed by user testing. And, I tested with users to get their thoughts about the redesign.
Let’s break it down, shall we?
1. Research phase:
After interviewing users of the website to understand their needs and expectations, the following feedback was gotten:
- users don’t know what’s on sale and have improper inventory
- when shopping and reading details there are no colours and sizes to pick
- the site looks clustered
- category section is not correctly sectioned correctly
After analysing the data, it showed that the users thought the UI and user flow were areas of improvement.
UX Audit: I further performed a UX audit to identify areas for improvement and provide actionable recommendations for creating a better user experience. To conduct this audit, I had to ask these evaluate these areas:
Navigation: Is the navigation clear and intuitive? Is it easy for users to find the information they need?
What works: The main navigation menu is located at the top of the page and includes categories for products, about the company, and contact information. The product categories are well-defined and easy to understand, making it simple for users to find the products they’re interested in.
How to improve: However, it would be beneficial to add menus for categories with a large number of products specifying the subcategories, making it easier for customers to find specific products.
Content: Is the content well-organized and easy to read? Are there any broken links or missing information?
What works: The content appears to be well-organized and easy to understand. The products are well-presented with clear images and descriptions, making it easy for customers to see what each product is and what it does. The product pages also include important information such as pricing and availability, which is helpful for customers who want to make informed purchasing decisions.
How to improve: The descriptions of the products could be more detailed and provide additional information such as dimensions and materials. Some of the pages on the site, such as the “About” page, could benefit from more detailed information and could provide a deeper understanding of the company and its mission.
Design: Does the design meet accessibility standards? Is it visually appealing and consistent across the site?
What works: Users described the design as clunky and clustered. Although it presents a modern look, I wanted to present a cleaner modern look. The website appears to meet some standards, but there may be some areas for improvement.
How to improve: The text size is large enough to be easily readable, but some colour contrast between the text and background could be improved. The site would have a cleaner modern look. Additionally, the site does not appear to have alt text for images, which could impact accessibility for users with visual impairments.
User flow: How is the user flow? Does it block users from performing actions?
What works: It appears to be intuitive. Users can easily navigate to different sections of the site, and the product pages provide clear information about each product and its features.
How to improve: For example, there could be more information about related products or cross-selling opportunities, which would help users discover other products that may interest them and improve sales for the business as well. And, the product cards allow users to choose size, and colour and add to the cart at first glance making it easier to buy.
Performance: How fast does it load?
What works: It appears to have good performance in terms of load time. Pages load quickly and without any noticeable lag or delays.
However, I recommend:
- Reducing image file size
- using appropriate file formats
- using properly sized images.
2. Design Phase:
Based on the insight gotten from the UX audit, I defined that I wanted the experience to be
- Clean, modern and consistent user interface
- Easy to use
My key stakeholders in this were the business owners and the user. I explored ways to provide a solution that could equally benefit both parties so I also added a new category called collections which showcases clothing and accessories of a particular theme, category, and style.
The goal of collections is often to provide users with a more organized and focused shopping experience, while also helping to drive sales and increase brand awareness. The benefits of “Collections” include
- Organized browsing
- Personalization
- Increased sales and marketing opportunities
- Discoverability
- SEO optimization.
After researching and ideating it was time to get sketching
I started designing low-fi and exploring different ideas with sketches.
And then designed hi-fidelity.
Next up: User Testing!
My goal was to create a delightful and cohesive experience, so I was enthusiastic about testing this with users. I set up a quick zoom meeting, watched users interact with the product, and discussed their experience using the redesign.
The testing showed significant improvement in user experience and received a lot of positive feedback from users.
It looks aesthetically pleasing
It felt easy to shop on
However, I’d like to discuss the potential impact of the redesign on business metrics.
- Increased Conversion Rates: It is estimated that the redesigned website could increase conversion rates by 15%. This estimate is based on the improved user experience and more intuitive navigation structure. The new design allows for a more streamlined checkout process, reducing friction points and increasing the likelihood of a successful sale.
- Increased Revenue: Based on the increased conversion rates, it is estimated that the redesigned website could result in a 20% increase in revenue. This estimate is based on the assumption that the average order value remains constant.
In conclusion, the motorcycle culture has evolved significantly over the years, and it’s wonderful to see a store with a quality and easy-to-use experience make the life of motorists everywhere in Nigeria easy, better and safer.
