Option Achats
Case Study
Long Story Short
6 min read
Challenge
Option Achats, a Canadian e-commerce fashion boutique for women aged 25-40, faced declining website traffic (5 visits/month) and was frustrated by repeated customer inquiries when things picked up previously. Their Wix website, necessary for their dropshipping model, suffered from poor navigation, non responsive design and inconsistent product inventory data.
Process
​To address these issues, I analysed their back-end data and empathised with previous users which identified a 60% homepage bounce rate, mobile-heavy traffic and unexpected navigation. Leading to a site-wide redesign and build, with a focus on user experience, including a tested, intuitive Information Architecture, improved User Flow and a professional User Interface. Pairing this with the introduction of an FAQ page, reorganised back-end inventory and optimised SEO, I reduced customer inquiries, enhanced usability and increased company visibility.
Impact
+12% Sales revenue
+98% increased site traffic
-26% Homepage bounce rate
Responsibility
End to end cycle, from research to design, to build and SEO.
UX / UI Designer
Logistics
Client
Figma
12 Weeks
Part-time
Dovetail
Solo
Wix
Tags
Stakeholder Management
UX Research
UI & Branding
Usability Testing
Information Architecture
Website Build
Full Case Study
Homepage Misalignments
Analysing existing data
Users are arriving by mobile not desktop
With a declining number of visitors, Option Achats had to start making changes to stay in business. Site data showed 80% of users visit via mobile, a platform it's not designed for.
​
My site review also picked up:​​
-
Inconsistent translations of English & French.
-
Lack of clear site navigation.
-
Unmanaged features, such as chat tool, which users used as a search bar, a Sign-in via Members Page which was not required, and subscribing to non-existent newsletters.
Reoccurring client questions
As a small family run business with little tech knowledge, Option Achats wanted an autonomously run dropshipping site with minimal direct customers interaction.
However, since launch they have found they are answering reoccurring customer questions, many of which would be solved via improved site mapping, page layouts and an FAQ page.​
"The dress I got is too small, how do I exchange it for the next size up?"
"Hey, Do you do free delivery?
Can't see it on your website."
"Hi, Do you do a matching blazer for this and what's your return policy?"
Previous reoccurring user messages
Increase traffic to 50 visits within 3 months
KPI
Find a product within 5 clicks
Reduce direct message for repeated questions
Empathic Research
Competitor analysis
Identifying strengths and weaknesses of competitor's site designs on desktop and mobile, in addition to reading customer product reviews, I understood customers goals, likes and dislikes of the retailers. Ultimately, identifying what they were doing right and how to succeed where they failed.
​
Findings:
-
Site design needs to be kept simple, image focused, and avoid fast and overused animations.
-
Images should be large, magnifiable, and show product in various environments and body types.
-
The returns process should involve the user as little as possible.
User Interviews
In addition to 4 new users in the target audience, Option Achats agreed for me to contact previous users who had directly messaged them via Facebook, Email and Instagram with complaints or queries, inviting them to participate in an impartial user interview with myself on Zoom and received a 60% discount on their next purchase in return.
After developing a script to gain insights of their expectations, goals, frustrations, purchase patterns etc, usability tests were undertaken on the current site via screenshare to observe their struggles and opinions while completing tasks.
​
Findings: ​
-
Distrust in the quality of items and validity of company, as the poorly designed site, logo and confusing navigation did not reflect the boutique level of clothing and price point advertised.
-
Confusion over duplicated sizes. e.g 'Small, S, small, SMALL' for one product.
-
Customers couldn't find information already onsite.
Persona and Empathy Map
A Persona and easy-to-digest Empathy Map were created by analysing the data gathered from the interviews, identifying the patterns and reviewing the business goals, allowing myself and the client to gain a deeper understanding of the primary user.​
​
Findings: Juliette is a 29 year-old Executive Copywriter who lives with her fiancé in Montreal. Her time is valuable as she juggles a fulltime job and evening freelancing jobs. Juliette looks forward to the evenings where she gets to snuggle up and treat herself in buying good quality boutique clothing to make her feel empowered.
​
​
_edited_edited.jpg)
_edited.jpg)
Ideation
Challenge
The client felt passionately on listing 'Masks' under 'Accessories', however we discussed how this could revert back to confusing users. I suggested to let the users decide, we reached out to those who had participated in the User Interviews and asked them to complete a card sort via Optimal Workshop, to determine the best path.
For this exercise we focused on English entries, the French site would then be mirrored.
​
Findings: 7 out of 10 users listed Masks in their own category, this was incorporated into the site map accordingly.
Validating the Information Architecture
Keeping the KPI of finding a product within 5 clicks and reducing direct messages in the forefront of my mind, I decided to redesign the site map from scratch, incorporating new pages, categories and forms. This helped me visualise the flow of the site, count the number of steps involved and assess where filters would be included on each page during the design stage.
​
​
With immediate plans to promote Mask purchases in bulk orders, due to the Covid-19 Pandemic, creating a Bulk Order form will streamline inquiries even though it is seen as a temporary revenue stream.
By creating it as a page we can hide it when needed.
Adding an FAQ page enables Juliette to quickly find answers to questions and reduces direct messages to client.
Directing Juliette to complete this new Returns and Exchanges Form reduces her involvement in the process previously done via email.
The Policy and Form pages are separate links to enable fast finds, however the policy will include a link to the form.
Diving deeper into understanding how Juliette would interact with the site, I created a user flow demonstrating the typical journey taken when making a purchase. I was able to again count the number of steps involved and what decisions Juliette would be needing to make. Being a bilingual country, a language choice option was included, however was not factored into the sum of clicks taken to find a product.
​
​
Conceptualisation
Prototyping - Low fidelity sketches
Once the key routes and elements of the site were identified, I felt confident to start sketching various wireframe designs per page, before choosing the below base design.
​
Challenge
Throughout this process I was taking into account Wix constraints, the main one being that, at time of build, Wix did not offer the ability to design Tablet layouts. To overcome this, I allowed for wide margins to cater for screen narrowing when using Tablets.
​
​
Desktop
Mobile
Mid fidelity wireframes
Converting the sketches into Mid Fidelity wireframes and setting up the prototype in Figma, enabled me to quickly see opportunities for improvements.​
​
Challenge
A layout constraint which was overlooked was whether the product image could go on the right side of the product page in desktop view. Having built sites on Wix before, I had a feeling this may be a limitation and after researching it further it was confirmed that it was not possible at the time. However, I do believe that this has improved the user experience of the page as it is a more linear layout making it easier for the eyes to track down the page.
​
Findings: Explore the changes in finer detail by clicking through the deck below.
​
​
Mobile
Homepage
Menu
Product Listings
Product Page
Cart
Desktop
Homepage
Product Listings
Product Page
Cart
Testing and Iterated designs
Reaching out to previous users who aided in the research stage, in addition to two friends of the owner who were in the target group and spoke 70% French, I performed 2 usability tests for 5 participants on the desktop and mobile Figma prototypes via zoom screenshare, this allowed me to quantify how close we were to meeting the KPI of 'Finding a product within 5 clicks'. ​​​
Outcomes
Task 1:Find a red skirt and review the details.
-
Findings: Desktop 100% Success rate / Mobile 100% Success rate.
​​
Task 2: Change the items colour to blue and check out
-
Findings: Desktop 100% Success rate / Mobile 80% Success rate.​
-
80% Misclick rate on information tags.​​​​​
-
40% gap in Mobile success rate were 6 clicks due to changing the language.
Explore the affinity map and iterated designs in finer detail by clicking through the deck below.​​​
Branding
Presenting themselves as a Boutique online retailer, customer's trust in the authenticity and quality of Option Achats' products and brand is low due to their off brand logo.
Client Brief: "Keep it simple and clean, we want it to still be a recognisable evolution of our current logo. With green consumerism on the rise we also want to only be dropshipping from sustainable brands in a few years and I want our brand to already be prepared for that."​
​
Explore Option Achats' brand evolution by clicking through the deck below.
​
​
Site Build
Challenge
As a bilingual country, the largest challenge during build was creating separate French pages which also connected to inventory, adapting French translations of the original text into phrases of similar meaning in order to fit within allocated boxes and buttons, in addition to converting all the back end filter product tags into French, without creating duplicated French and English results on the original site.
​
​
Back end inventory
Addressing the users pain point of size duplications, I synchronised the inventory by converting, 'Small, S, small, SMALL' tags to simply 'S'. Additionally, I created and assigned categories to each product allowing the filters and banners to pick up the correct data.
These varied from:
-
Colour choice
-
Categories - 'Jeans' 'Tops'
-
Range - 'New Arrivals' 'Sale'
-
Promo info tags - 'Selling fast'
SEO
Addressing the client's pain point of not showing as a top listed on Google when searched for, ​I optimised the site by ensuring every image and asset had SEO-friendly relevant tags and including keywords on site where possible.​
Copywriting
Language across the complete User Experience was tailored to a friendly, simple, casual language, from an About Us section depicting a family owned boutique, passionate in delivering quality items, to Social Media posts announcing the new brand and site.
Further examples include:
-
Returns, Exchange and Shipping Policies & Forms
-
Email purchase confirmations
-
Bulk order form
-
FAQ page
Aftercare
On completion, the client wished to maintain the site in-house for cost saving purposes. In order to do this successfully, I created a personalised how-to guide and best practices hand-over pack, which I later went through with them step by step on screen share.
Results
A clean, streamlined and audience-matching site and brand. Easy to use, easy to follow with responsive design, fully connected to social media channels to allow cross-bridge traffic.
​
​
430 visitors in 3 months
Achievements
Users averaged 5 clicks to find a product
Direct messages reduced by 85%
Remaining messages were either very specific questions, or advised to go to the FAQ page to solve their query.
Project delivered on 24th October
Retrospective
This project opened my experience to the full product cycle when launching a website. Gaining experience in data-driven decision-making through access to real analytics, to redesigning the user experience and interface, and building the site.
Next steps
Increase usability
-
Add a search bar to ​​​​​​improve product finding KPI.
-
Add a Sort button on product listings page.
​
Improve consistency
-
Convert the CTA's on homepage to white text.
-
Reduce the header height.​
Learnings
Test in multiple languages
Testing revealed hesitations and errors when testing with other languages.
​
Minimal isn't the most usable
Hiding the language toggle in the mobile hamburger menu did maximise space, however users were no longer able to find it.
Testimony
"I used to think only Google Ads drove traffic, but Caroline’s good design has increased our visits and cut down our admin support time, we’re delighted with the results."
Aldo Franchini
Owner