About the project
This project has been conducted for Buckle&Seam, e-commerce store offering high-quality exclusive bags for men. 70% of traffic on buckleandseam.com is mobile. At the beginning of the project, the mobile conversion rate was only 0,5%, compared to 3% on desktop.
There were many UX problems that have been detected and needed to be optimised.
Project goal
The goal of the project was primarily to improve mobile conversion rate.
The product pages needed to be re-designed and optimised in such a way that the customer’s trust is built, all the UX issues are fixed, and new features, essential for improving the experience, are added. By doing so, the amount of people who convert should significantly increase.
Analysis and research is the key
UX / UI analysis
During the initial stage of the project, I conducted a detailed UX & UI analysis of the existing pages & flows. Based on it, I then created a list of recommendations & improvements that should have the highest priority.
Some of the UX issues discovered included:
- Information hierarchy
- CTA & product information placement
- Bugs in the image & video previews
- Performance issues with some of the core features
- Lacking user feedback
- Page load issues
Some of the UI issues discovered included:
- Too small typography
- Not sufficient text contrast
- No consistency in terms of icons design
- No consistency in providing a visual user feedback
- Various CTAs colors & styles
- Issues with data validation in forms
On top of that, I made an analysis of various flows with a help of Lucky Orange software.
"Lucky Orange gives website owners the ability to replay a visitor's session. It does this by capturing the original html the visitor was shown, then any changes to that html, as well as user input like mouse movements, scrolls, and touch events."
I watched 40+ different user recordings and heat maps in LuckyOrange comparing user behavior in different sections / flows, as well as identifying any UX & UI issues.
Based on both analysis, I created a list of recommendations. It included among others:
- Fix all the critical UX bugs
- Improve page performance by optimising image sizes
- Include all the relevant information as well as CTA above the fold
- Focus on improving trustworthiness and credibility
- Provide clear & consistent user feedback
- Add "add to favorites" feature
Competitors analysis
After a detailed UX / UI analysis has been done, I also conducted a competitors analysis.
I checked 15+ competitors product pages, and compared different aspects & features they provide. To summarise the findings I created a table with features & solutions comparison, as well as ideas for Buckle & Seam.
We then had a few brainstorming sessions with the main stakeholders, after which I started with the design phase.
Design process
Wireframes
After conducting UX/UI analysis & creating a list of improvements, I sketched first wireframes for the sections above the fold. For that purpose I used the iPhone 8 size, which was one of the top used devices of Buckle&Seam website according to available data.
I included few different layouts, which were then a base for further discussions, and high-fidelity mockups.
Multiple iterations a key to success
Once we aligned on the preferred order of sections, I created multiple drafts. After the first iteration was ready, we did an internal user testing with the stakeholders, in which we asked B&S employees to compare various versions and provide feedback.
I also prepared an interactive prototype to show various interactions, such as personalisation feature, image preview or items selection.
Versions created differed from each other by the elements order, information hierarchy, as well as UI differences.
Together with the stakeholders, we went through 4 different design iterations before we came up with a satisfying version that went into development & testing states.
Before & after
After selecting the preferred draft version, I then focused on fine-tuning - creating pixel-perfect fine designs, as well as designing the interactions.
I also re-designed other sections of the product page, such as product details, recommendations or reviews section.
Below, you can find comparison of the state before & after redesign of the selected sections.
Key improvements
- Improved information hierarchy
- Easy product color & lining selection
- Consistent CTAs
- Personalisation feature with a projection
- Improved readability & consistency
- Easier items comparison
- More prominent USPs and product details
- Clear user feedback after performing the actions
- Image zoom functionality added
- Link to reviews section added
- New icons set designed and introduced to improve the consistency
Adjustments on desktop & tablet
Mobile version was my primarily focus, as 70% of traffic was on mobile, and the conversion rate was way lower than on the desktop. However, once mobile version was ready, I also created design adjustments for desktop & tablets.
Please find the comparison of before & after state below.
Project results
After 2 months from the launch of the new, redesigned product pages, we discovered an increase of 1.5% of conversion rate on mobile.
We also sent a short survey to some of the customers after purchasing a product to ask about their experience on the website, and whether they encountered any major issues during the purchase process.
Customers feedback was really positive. To the commonly mentioned items belonged:
- Ease of previewing various colors & linings
- Clean & structured page
- Great personalisation feature
- Nice items comparison & recommendations options
After the product pages have been ready, I also took care of research & redesign of category pages, followed by a homepage & content pages ('About us' and 'Impact').
Co-founder & managing director quote
"Fantastic work attitude and super creative for complex solutions. Kasia helped us at Buckle & Seam to redesign our UX on mobile and desktop. Super efficient, high end experience and deep knowledge of creative tools. Looking forward to collaborate on future projects!" Marco Feelisch
