Improving the organization of an e-commerce website to attract a larger client base.
Background
Gully Klassics is a luxury streetwear brand based in Toronto, Canada. Until now, their main focus had been selling their products wholesale to retailers in the Toronto area.
They partnered with my team as part of their digital transformation strategy plan to enhance their website's operational efficiency and user experience as they transition into a B2C-focused business model.
Problem
The website created a poor e-commerce user experience.
Lack of conversions
Site abandonment
Cognitive overload
Solution
Updated the site's organization and navigation
Additional filter options to help users easily find products
Removed excess stimuli, refined hierarchy, and updated copy
Created consistent user-focused design elements
Role
Lead UX Designer
Team
4 UX/UI Interns
Gully Klassics Creative Director
Timeline
4 Weeks
Process
Discovery
Ideation
Design
Discovery
Market Research
The team conducted market research to:
Gain a deeper understanding of the online presence of other luxury clothing brands
Use the competitor's strengths and weaknesses to inform our design decisions later on
Consistent design elements
Minimalistic designs
Clear product organizational hierarchy
Can see product color options on the product list page
Collapsible filters
Product images from every angle
Font sizes need to be large enough to read
Collections with non-standardized names need photos to help explain them
Usability Testing
I conducted usability testing with five people identified as potential new Gully Klassics online customers based on their passion for luxury clothing and frequent online shopping.
I decided to focus on new customers because the Gully Klassics team is working towards reaching a new online market to expand its client base.
Findings
We had been told the checkout flow was an issue on the site. During user testing, users found it straightforward to navigate, indicating there were no usability issues with checkout and it was not a reason for lower online conversion rates.
Information Architecture
I decided it was necessary to add a content inventory and audit to our project based on the inconsistencies found during our heuristic analysis and user testing.
I needed to know everything impacting our users cognitive load and decreasing enjoyment
I conducted an informal inventory and audit alone due to an already tight timeline and client's request for wireframes as an end product
I used the information in the overall research analysis and applied the insights to our solution ideas and deliverables
'New Arrivals' button takes you to specific collection
Not a collection in top nav.
Shows up below the footer
Says 1 Review, but there are no reviews
Color options not visible
Hoodie is misspelled; Too many words, don't need Gully Klassic's above and in item name
Photos of models wearing hats is on brand; Photos show multiple angles and both color options; Color option picker not visible
Only one color option is shown in photos, regardless of which one is selected; Models head cut off in repeat photo that is zoomed in - just have option to zoom on photo; every photo has same caption under it - excessive and clutters page
Nothing Posted and still has website template wording shown; broken link in footer
Conducting a solo content inventory/audit:
I gained a deep understanding of the Gully Klassics website
Developed a better understanding of information architecture
Provided insights into each page element and overall page functionalities
Gave me an extra level of understanding of our research findings and the current usability issues on the site
Ideation
I moved forward with solution ideas that would:
Solve the most critical usability issues
Address the companies digital transformation and higher online conversion goals
User Flows
I created two user flows, combining insights from the user testing participants with our best solution ideas, with a focus on enhancing the user experience through additional filter options and an updated organizational structure.
Add item from a collection to the cart
Finding a specific product using filters flow
Sitemap
Goals:
Improve the site's organization and remove unlinked and incorrectly linked pages I had found during the content inventory
Remove unlinked and incorrectly linked pages I had found during the content inventory
Develop a system of organization with fewer clicks for users
During this process, I made sure to question decisions and make suggestions by moving the content around in various ways.
Updating the sitemap helped organize the site's content and streamline the navigation to help reduce the user's cognitive load.
Design
Sketching
As I started sketching with my team, I made sure we discussed our design ideas and the why behind them. I wanted to make sure the elements in our design served a purpose and enhanced the user experience.
For example, based on our user testing results, I made sure we left room for plenty of lifestyle images. I even increased the amount on the homepage.
Progression of Homepage
Progression of Product List Page
Progression of Product Page
UI Elements
With our focus on decreasing the users cognitive load to improve the user experience, we made sure to provide consistent UI design suggestions across all pages.
Updated color picker
Uniform photo display on the product page
Disabled states
Photo product tags/labels
Black to provide a high-class luxury feel
Red to draw the eye to important product information that blended in before
wireframes
I referenced the research deliverables when making decisions and collaborating to ensure our designs met the Gully Klassic's users' needs and the companies image/branding expectations.
I made the necessary changes to:
Enhance usability
Keep the high-end luxury lifestyle vibe that potential new customers and first-time users felt drawn in by
Homepage
Product List Page
Product List Page Filtered
Product Page
Next Steps
Test wireframes with current customers to get feedback and information for the next iteration of designs.
Apply/increase the UI elements and interactions to create high-fidelity screens.
I suggested the company start using software to collect data on users' behavior to inform future website iterations.
Learnings
Clearly define problems at the start of the project, within the client brief, or by clarifying the brief to be more specific myself.
My team should have focused more on the discovery phase of this project. We were not provided any user experience-specific research data, beyond verbally sharing they thought the checkout flow was an issue. However, because the client requested wireframes as visual recommendations for an end product, we expanded our scope and sequence to meet their needs.
Little changes can make a big impact. Making lots of small UI changes helped the luxury vibe of the website shine.
I have brought and built upon my skills. Teaching helped me develop the skills I need to lead a team and be a successful UX designer. I learned to be a project manager, how to work with all different types of people, to be patient and empathize, to translate technical jargon into understandable language for clients, and be detail oriented to create polished deliverables, along with many other skills too. It showed me that when I was teaching I was really practicing UX design the whole time!