Alpha Style
Redesign Alpha Style's ecommerce website with the goal of improving user experience and increasing sales.
Overview
Alpha Style is a streetwear brand that offers a variety of apparel and accessories for both men and women. The client would like to have a UI audit and website revamp to provide customers with a better user experience. The existing website's UI design confused customers about which products were released in the new season.
My Role
My role in this project was to provide UI/UX audit and consultancy to identify areas of improvement, communicate design recommendations and lead the end-to-end design process.
Outcome & Impact
- Conversion rate increase 140%
- AOV increase 36%
- Session increase 56%
Client website
https://alphastyle.store/
Project scope
1 Technical consultant, 1 Designer, 1 Project manager, 2 Engineers
Tools
Shopify, Figma, IG feed App, Git, Bitbucket
Before
After
Problems
1. The homepage currently lacks a clear hierarchy and call-to-action buttons, making it difficult for customers to navigate and identify new products.
2. The current navigation menu is inconsistent and disorganized, which can make it difficult for visitors to find what they are looking for.
3. Without a filter feature, customers might have trouble quickly finding the products and stores they need on the website.
Project Requirement Scope
Business Objectives
1. Increase conversion rate.
2. Increased exposure to new season products.
3. Improve customer engagement and make more visitors want to click.
Customer Goals
1. New sitemap to provide a better user experience.
2. The new Shopify theme presents the brand effectively and operates seamlessly.
3. Connected with Instagram feed.
Constraints
1. Compatibility between the new Shopify theme and the existing Shopify Apps.
2. No 3rd party app is suitable for the client after the app feasibility study.
3. Restricted launch timelines.
My responsibilities
Leading design efforts (UI/UX audit, consultancy, wireframes, UI mockups)
Approach
Scope this redesign into three focus areas
1. Optimize the information architecture of the homepage
Improve the layout and design to make it easier for customers to navigate and find new and promoted products.
2. Streamline and simplify navigation
Simplify and organize the navigation menu to make it easier for customers to find what they are looking for.
3. Enhance filtering and search
Add robust filtering and search functions to help customers quickly find the products they want and the stores nearby.
Site Mapping
Wireframes
Information architecture of the homepage
To improve the homepage’s information architecture and reduce cognitive load, we plan to organize its content using a clear hierarchy, highlighting new season products and adding prominent call-to-action buttons. After presenting our first proposal to clients, we replace the collection section with the lookbook section as lookbooks are used to visually highlight seasonal products or collections.
Streamline navigation
The client's current regular dropdown menu displays only two levels of categories, causing customers to spend more time exploring the products. To address this, we recommend implementing a mega menu, which displays all menu options in a single view, providing a quick and easy way for users to find the information they need. Additionally, mega menus provide a visually engaging interface, which can encourage customers to explore new products on the website.
Enhance filtering and search
Collection pages
Without a filter function in the collection pages, customers may struggle to efficiently find the exact products they are looking for. To address this issue, we add a filter function that allows customers to narrow down their search by gender, color, size, price range, and product type. In addition, we also added subcategory navigation on the collection pages to help customers discover more relevant collections or products.
Store page
The client's store page currently displays a lengthy list of their retail stores without any clear organization or search functionality, making it difficult for customers to find a store that is relevant to them. To address this issue, we recommend implementing a search function with a map on the store page, allowing users to quickly locate nearby stores and filter results based on location.
Proposed Solutions
From Confusion to Clarity. Optimize the information architecture of the homepage.
Effortless Exploration. Streamline and simplify navigation.
Effortlessly Find Your Desired Products and Stores nearby. Enhance filtering and search.
All pages
Homepage
%20(1)%20(1).jpg)
Collection page
%20(1)%20(1).jpg)
Product page
.jpg)
Lookbook page
.jpg)
About Us page
.jpg)
Editorial page
.jpg)
Store page
Outcome
After launching the new website two months ago, we have been using Shopify Analysis to track key metrics and evaluate the site's performance. As a result, we have seen a significant improvement in its performance.
+140%
Conversion rate
+36%
Average of Value
+56%
Session