THMBL
Redesigning a Fashion E-commerce Website
Project Overview
Problem:
THMBL worked with Superbolt to update their website design to both increase product sales all while keeping a very minimal, editorial approach to both design and copy.
Solution:
The Team:
Impact:
This website launched in July. We’re still collecting more detailed data, but early insights suggest a correlation between the new site and sales.
My role:
- UX Design
- UI Design
- Design Systems
TOOls:
- Figma
- Adobe Suite
- Shopify
A re-imagined, minimal Shopify website to sell more product, increase email marketing, and better showcase talent partners.
Background
THMBL is a brand incubator that partners with influencers and celebrities to build product brands that convert their online audience into customers. With roots in the fashion and apparel industry, THMBL connects these thought leaders with its talented network to help with product development, operations, and marketing for its creators collection drops.
Understanding the Users
A huge part of THMBL’s audience relies on the talent they collaborate with. A majority of web traffic comes directly from social links shared by the talent when they drop launches. With that in mind, we:
- Prioritized for Mobile-first screens
- Wanted to bring more insight and background to the Visionary pages for each talent collaborator as web visitors are likely strong fans of them and would like to learn more about their process in building their collections
- Turned to a less-is-more approach for both design and copy as most users come directly through social channels and are primed to buy through influencer’s content
Previous Site
Before beginning the project, we gave an analysis of areas for improvement that we would focus on in our re-design.
01. Home Page
- This Home page takes minimalism to the maximum and is impeding users from understanding the brand upon first glance.
- We recommended a longer Home page with clear sections like:
- Hero: to announce new or promoted collections
- Intro Section: to explain what THMBL does
- Spotlight Product Section: to push products across multiple. collections
Next page analysis
02. Visionary Page
- This previous Visionary page only contained a video of the collection creator
- We suggested adding more content around the inspiration for the collection, materials, and process of developing it.
Next page analysis
03 Product Page
Next page analysis
- The minimalist approach to copy makes it hard for users to quickly grasp information.
- We suggested changing Sub-headings to more standard e-commerce language to better help guide users
Setting the Framework
HIGH FIDELITY WIREFRAMES, ROUND 01
In this first round, we presented an initial Home Page layout for both mobile and desktop. We started with the Home Page as it felt like it needed the most structural additions given that the prior homepage had no sections beyond an intro video + navigation.
Home Page
- An announcement banner to push sales or promotions
- A dedicated hero image section to promote new drops
- A mini about section to educate users on THBL's brand ethos
- A featured brands section to highlight the talent and their collections
- A mini product round-up grid to push desired products
- A THMBL curated section to suggest full looks/pairings cross-collections
Main sections added:
Announcement banner to push sales
Dedicated hero to
promote new drops
Mini product round-up
to push specific products
Mini about section to educate users on thmbl's brand
collections section to highlight current collections
thmbl curated section, like suggested looks/pairings
Ideate 02:
HIGH FIDELITY WIREFRAMES, ROUND 02
After the first round of designs, the THMBL team came back to us concerned that the layout was too “block-y” and similar to giant fashion sites like Revolve or ShopBop. They gave us some more notes and I re-worked 3 revised Home Page concepts that were all in the editorial, minimalist realm but tapped into different inspiration sources.
inspiration:
NOTES:
click to navigate to each REVISION
option 01
option 02
option 03
- Option 1 pulls inspiration from streetwear brands like KITH and Sneak in Peace
- A mix of full images and videos with carousels that bleed off screen
click to navigate to each REVISION
option 01
option 02
option 03
- Option 2 pulls inspiration from more editorially-styled sites like hueLe Museum and Morobé.
- The sections remain the same but they are less strict in following the grid system of the other options
The Cart
high fidelity wireframes round 03
- Normal State
- Sold Out State
- Checkout State
Cart, normal state
Cart, Sold Out State
Cart, Checkout State
The final Site
LIVE, developed shopify site
In this first round, we presented both design and copy changes that we felt were instrumental to the business goal of getting more donations and the user goal of making the site easier to navigate.
The final Design
LIVE, developed shopify site
In this first round, we presented both design and copy changes that we felt were instrumental to the business goal of getting more donations and the user goal of making the site easier to navigate.
Key Changes:
- Simplified Navigation that emphasizes the “Donate”button by using a dark berry color
- Donation Embed Form at the top-fold of the Donate Page to encourage donations, specifically recurring donations
- Addition of a footer including navigation links, an email opt-in, and dynamic Instagram Feed
- Testimonials to show social proof for the organization
Navigation Spotlight
LIVE, DEVELOPED SHOPIFY SITE
Looking to the Future & Reflections
Data to Collect:
- Sales numbers per collection drop
- % of abandoned carts
- Bounce Rate
- Email list opt-in rates
What I'd do differently:
- Working with copywriters to develop custom copy for the entire site to move towards more straight-forward writing
- Including a separate Press Page and more robust About Page that shows THMBL's authority and expertise