UI Design
UX Design
User Research
Desktop
Conceptual
Project Overview
Glue store is an Australian-based fashion hub that houses many different youth and streetwear labels. They cater to seasoned trend seekers as a one-stop shop for all their fashion needs as well as those new to the streetwear scene by educating and showcasing current trends.
As a user of their product myself, I felt the user experience of their current website could be enhanced. I took the opportunity to look at this as a conceptual case study, examining how reworking aspects of the site could strengthen the alignment of the user's experience of the product and Glue's business aspirations.
Role
Product designer
Deliverables
User research.
Define user flows and information architecture.
Conducting a competitive audit.
Paper and digital wireframing.
Iterating on designs.
Designing high-fidelity user interfaces using existing branding and design systems.
Understanding the Users
Glue caters to a trend-conscious audience looking for the latest in clothing, footwear, and accessories. Their users are generally of the below qualities:
Young Adults
Streetwear Enthusiasts
Tech Savvy
Personas
To understand further what their users might need from the website, I created 2 personas who would likely be the demographic of Glue's consumers. This exercise identified some user pain points with the current product and areas for improvement.
User Flow Mapping
By mapping out the user flows of the above 2 personas, it allowed me to understand what features they might need in the product to achieve their goals.
Emilia's User Flow Goals
Discover new trends and brands
Seeking inspiration
Compare styles and offerings across different brands
Jonny's User Flow Goals
Discover brands that align with his style - ones that he can come back to in the future with confidence
Identify versatile pieces across brands to limit his spending
The Mission
The re-work of the product has a clear objective of enhancing users' experience of Glue's website. In order to do so effectively, the above user research and empathy exercises is summarised below to direct the strategy of addressing user's needs.
The problems
01
Lack of brand discovery and storytelling
Difficult to identify the style of each brand without prior knowledge.
02
Information overload for new users
Glue's expansive range of product makes it overwhelming for new audiences to get started.
03
Inconsistent sizing across different brands
With so many labels on the platform, users are finding it hard to navigate the different sizing conventions of each brand.
04
Lack of product information
Users are finding inconsistencies and lack of product information.
05
Excessive scrolling to navigate the website
Users are required to scrolling excessively to move through the website, resulting in user drop off.
The solution
01
Showcase and centralise the product around brand identity
Celebrating different labels and making them the forefront of Glue’s presentation so consumers are aware.
02
Cater to the user and educate on trends
Tailor the website experience to the user's preferences and needs while educating both new and existing users.
03
Cross-brand comparison of sizing
Make brand sizing differences clear to the consumer.
04
Highlight product characteristics
Inform the user of product details clearly.
05
Make the experience of the product more enjoyable to use
Rework aspects of the UI to make the journey easy and enjoyable for the user.
Ideation
To begin the rework of the website, I had to understand the structure of the existing website, it's current UI, and how it can be reconfigured to align with the above solutions.
Starting off, I worked through a basic information architecture that is relevant to the goal of highlighting Glue's different brands.
Due to time constraints, I picked out 5 screens that would benefit most from a redesign. It was important to keep in mind when iterating the UI to focus on features that align with the goals of the mission. These initial wireframe iterations were done firstly by hand to brainstorm ideas then digitally on Figma to see the spatial impacts of each idea.
I wanted to work with the existing design system and Glue's visual style in the new screens. So further tweaking of the UI was required when refining the low-fidelity wireframes into high-fidelity mockups. This is so we can draw a comparison of the UX with the before and after.
01
Home Page
As it is the first page the users see when they enter the website, the home page plays an important role of setting the tone of the product experience. The goal here was to ensure all users feel like the experience is catered to them and their preferences whether they are a new user who is looking to learn more like Emilia, or a more experienced user like Jonny. This is important not only for user retention but also to make the experience more enjoyable.
Before
After
Before
Focuses on general sales.
New drops do not highlight any particular brand of interest to the user.
The trending section does not give any information of the trend, leaving users to see the trend but not understanding it.
Different sections using different layouts contributing to an overwhelming initial experience of the product.
After
Sales are more directed to the user's style preferences with "Your Brands' Sale".
Highlights new drops from the user's favourite brands, catering to the user's favourites.
A "Brand Highlight" section educates new users and inspires brand discovery of more established users.
"Trending Styles" section elaborates on the ongoing trend and gives product recommendations.
Has more negative space and consistent layouts in different sections, reducing visual clutter for a more relaxed first impression of the website.
02
Get Inspired This Season
A page where users go to find what's trending. For a platform like Glue, this is one of the most important pages to keep up-to-date. My aim for this page was to centre it around educating the users of current trends and promoting discovery of new labels.
Before
After
Before
References only to their blog posts.
Users must click into the blog to find out more about a trend.
No indication of what is current and what is outdated.
After
Page opens centred around the current trends and blog posts relevant only to this season are shown. Access to the previous seasons is still possible by clicking through to the next page.
A "Vision Board of the Season" shows users a quick snapshot of current trend styles and links to products.
"Discover Who's Doing it Right" opens the opportunity for users to find new brands they have yet to discover.
03
Brand Information
The Brand Information page is the main selling point for each label on the platform. Users come here to find out more about an existing or new brand. There was a lot of potential here inform users to create a connection between them and the brand.
Before
After
Before
Very minimal explanation about a brand's style identity.
Jumps straight into an endless browsing experience.
After
A banner style header with text and tags showcasing the brand's style and identity.
"Trending" section shows what's popular for the label to kickstart the users' browsing experience.
"Style Inspo" and "As Seen On" sections give inspiration to users shopping experience.
04
Product Information
The aim for this page is to clearly show all details and minimise any confusion of the product. This helps users make informed decisions and builds trust with Glue's platform which will retain users into the future.
Before
After
Before
Overly large images of the product leading to excessive scrolling to see other parts of the page.
Product sizing is generic and refers only to the standard size guide.
Minimal details about the product characteristics, materiality, and care instructions.
Reviews section is spaced out adding to the amount of scrolling on the page.
After
Product images are made smaller with hover function to enlarge, reducing the amount of scrolling required.
Sizing comparison can be drawn to another label on the platform a user might be more familiar with to bring awareness of any general sizing differences between brands. This aims to reduce the margin for error when trying out new brands.
More product detail, care instructions, and materiality added in a clear and concise manner to inform users of their purchase.
Reviews section rearranged to make navigating the page easier and minimise scrolling fatigue.
05
User Profile
The user profile page is where the customising of each user's experience is possible. The goal of this page is to focus aspects that would make the shopping experience easier, more enjoyable, and unique.
Before
After
Before
User details are pushed to the side and method of editing specific information is unclear.
The page mostly focuses on a user's Order History.
Users must click into the previous order to view what was purchased.
No information that might assist or enhance a user's shopping experience.
After
User details are easy to locate and editing action is easy to navigate.
Users can input all their preferences and body measurements into a "Clothing Profile" to assist with their shopping experience in finding their preferred styles/brands and sizing across different brands.
A "Favourite Brands" section allows users to save labels they like which lead to suggestions on all other pages.
"Order history" section is revamped to show photos of products a user bought in each transaction for quick overviews which will reduce the amount of clicks required to track down a previous order.
Next Steps
While this is only a small part of the redesign of Glue's website, much still needs to be done to assess the impacts of these works on users including:
Conduct user testing to understand the impacts of the redesign.
Ensure the mobile app also reflects design changes.
Incorporate findings from testing into the next iteration of the design on website and mobile.
Some design questions I have upon reflection include:
What are some specific design considerations I might have missed when it comes to an e-commerce website?
Did I oversimplify or overcomplicate the website's functions?
How could accessibility be considered more in these redesigns?
Learnings
For my first try working with an ecommerce website, some learnings include:
Working with an existing design system and language.
Designing to a user's needs and how that shapes out into a product's UX and UI.
Iteration being a crucial part as some initial ideas did not work once it was translated into a high-fidelity page.
