Barner_
How to increase your AOV
through UX/UI
Let’s see how this start-up focused on selling Blue Screen glasses can benefit from some UX/UI Design, shall we?
A 2-week group project in which we were in charge of all the communications with our client (Barner) meetings, research and development of the design for Barner’s product page.
Who is Barner_
Barner is and young, energetic and vibrant brand founded in early 2017 by two friends.
This start-up is focused on selling Blue Screen Glasses mainly online.
What Barner needs_
Increase AOV (Average Order Value) and CVR (Conversion Rate).
Redesign of the product page on mobile (priority) and desktop.
Benchmarking_
Computer glasses companies, other eyewear brands and similar e-commerces
Survey_
We carried out a survey (100 responses) about online shopping habits and preferences when buying glasses
Interviews_
We conducted 7 interviews with glasses users about their preferences and experiences when buying glasses online and offline
Benchmarking
(13 companies studied)
Some of them (such as Felix Grey) have a very strong branding
There is a wide array of computer glasses companies. They often use similar resources to sell their products
There are learnings to be made from some of Barner’s competitors
Survey
(100 responses)
Even though users enjoy the comfort of online shopping, they prefer to buy glasses in person
Using glasses as an accesory (non-prescription) is very common
The most important things when buying glasses online are 40% price, 34% photos and videos, 30% reviews and comments, 22% materials description, 20% product description
Virtual try-on is a worthy add-on to their experience
Interview
(7 interviews)
Most online shoppers find ratings and reviews very useful for their experience
Suggested and related items are welcomed when purchasing online
When shipping information is not clear users are unlikely to complete their purchase
When buying glasses online the most relevant pieces of information are: frame color, reviews, materials, photos and videos of the product
And we did test it:
USER TESTINGS (7 TESTS)
5 SECONDS TESTS (77 RESPONSES)
CARD SORTING (9 ROUNDS)
Barner’s current product page
Information hierarchy was
misleading to users:
Most users did not see this information when testing: Price 38%; Product description 29%; Gender 25%; Rating 24%; Materials 18%; Collection name 18%; Sizing 13%; Shipping info 11% and prescription 2% (Percentage of people who did see this information )
Most users didn’t see reviews or ratings (they are all the way down in the site, before the footer)
Users wanted to see a shipping estimate “How much will the total value be including shipping?”
Difficult navigation or getting back to where users were before (no back button, breadcrumbs)
Plus button universally used to as add to cart action and not for zooming on a picture
Confusion between model and colour name (Tortoise is the colour and Dalston Man is the model)
Prescription option was unclear since it was inside a plain-text paragraph
Concept of screen glasses was not easily comprehended “Are these normal glasses?”
Sizing of glasses was not clear and often overlooked
Barner’s current cart drawer
When it came to the
cart drawer:
Most users didn’t see the shipping message up top
Users wanted to know the specifics about shipping before continuing the purchase process
Upselling for the clip-ons wasn’t noticed and often dismissed
Confusion about the concept of “clip-on’s” “Why are these sunglasses so cheap?”
“Next year my backpack and I are going to Vietnam”
This Insta addict loves finding the new cool thing on Kickstarter and moving around the city on his Brompton while listening to the XX.
On his free time surfing and looking for new little places to eat with vegetarian options is what he enjoys the most.
Give this techie guy a kombucha or a poke bowl and he will be happier than a pig in mud.
Click here to interact with our prototype
for Barner’s product page for mobile
A good old before
and after
Here are the main changes and upgrades from testing & iterating
BEFORE (left) - AFTER (right)
Main product page
improvements:
Total reviews are easily seen in the first screen that users see inside the product page
Non-prescription/ prescription option now clearer and selectable with buttons
Main information hierarchy modified according to card sorting results. Updated order of importance: Frames’ names, colour, price and then reviews
BEFORE (left) - AFTER (right)
Info section
improvements:
Computer glasses concept made clearer by adding it as a title
Summary of most relevant info added (Fit, materials and size) for easier finding
Added shipping info to the main information menu. Users felt like they needed this info was missing
Added link to Instagram virtual try-on demo so potential clients can try Barner’s glasses before purchasing
Upselling added and highlighted for better discoverability
BEFORE (left) - AFTER (right)
Reviews section
improvements:
Reviews can now be sorted by subject and organised by date/ rating
Reviews now are shown one at a time instead of an infinite scrolling
BEFORE (left) - AFTER (right)
Icons:
Icons changed to match general look & feel
BEFORE (left) - AFTER (right)
Cart drawer
improvements:
Shipping offer was made more visible and moved up the top of the pop-up
Added “calculate shipping” option before checkout so users know what price range to expect
Up-selling highlighted for better visibility. Also copy improved so users understood better that clip-ons were, in fact, an accessory
This was an interesting and challenging project since we had to work with a strong product
and finding ways to improve it was very challenging
We found solutions that we believe will be successful
in helping Barner improve its product page
An ideal next step would be to continue
developing Barner’s website and focus on issues that
users might have on their overall experience
Wanna know more?
Read the whole Design Report
here
