The Luxury E-commerce Experience
Sweden
2020
The Challenge
Byredo is a modern Swedish luxury house, founded in 2006 by Ben Gorham. Byredo creates and develops a range of products such as fragrance, home, leather goods and accessories, and is sold in more than 40 countries in a very high-end exclusive network worldwide.
The online store needed a better experience to improve page scanning and navigation. New layout, product photography direction and type. On top of that we needed to develop a more sophisticated look helping Byredo brand stand out in the fast-growing market competition
The online store needed a better experience to improve page scanning and navigation. New layout, product photography direction and type. On top of that we needed to develop a more sophisticated look helping Byredo brand stand out in the fast-growing market competition
The Problem
Upon browsing web and local stores for a new piece of perfume or luxury goods people fall in love with Byredo brand.
But for some reason the e-commerce part doesn't feel to keep up with the whole identity experience which is simply extraordinary.
We've spotted some navigation weaknesses as well as scannablity issues. The layout and interactions felt kind of outdated as for a luxury brand. So we've come up with a solution…
But for some reason the e-commerce part doesn't feel to keep up with the whole identity experience which is simply extraordinary.
We've spotted some navigation weaknesses as well as scannablity issues. The layout and interactions felt kind of outdated as for a luxury brand. So we've come up with a solution…
Building New Navigation & Grid System
Layout composition was completely redefined to emphasize miniamal luxury voice keeping F-pattern in mind to improve UI scannability. Elements were replaced in a way to reflect their importance level. Current hambuger menu was replaced with persistent menu on top which is always visible on the screen
New Landing Page
Side-by-side blocks were replaced with a custom layout for each section based on the grid and magazines markup insipration to make a meaningful first impression
RETHINKING CATALOG AND PHOTOGRAPHY
Categories on desktop screens were placed as submenu on the left to keep them alwasys visible for faster navigation.
MOBILE
DESKTOP
Product photography was redirected towards cleaner look and feel with intention to reflect physical, real-life experience, similar to what you expect to see on actual shelf in the store.
Product Details. Exploring Interactions
Different scrolling technique was developed to look through product photos on desktop reaching complementary stuff at the end. Adding interaction dynamics allowed to chieve sophisticated visual behaviour which complements the brand
MOVING
SECONDARY
CONTENT
MOBILE
BELOW
FOLD
Little Big Details
Current search pattern doesn't provide any hints for user. This leads to increased error possibility when nothing is found. A small ux solution to change the game is autosuggest field which shows all possible results upfront according to the query
AUTOSUGGEST SEARCH
Current menu on mobile is placed above the content as a pop-up and somehow splitted on half screen edge which makes navigation more time consuming to understand and use. Again, simple but efficient solution can make the experience much better
Simplifying Mobile Navigation
SUBCATEGORIES
MENU
Right now website has no interaction motions at all. Animation is supposed to be there to lead user through the flow guiding along to support the whole experience. Such approach leaves much more humanized feeling from interaction with a digital service
Add Motion & Refine Checkout
CHECKOUT FLOW
RESPONSIVE
Current website does not support mobile version for shopping cart at all. Cart and checkout flows are the most crucial part in any e-commerce service which must be responsively built and polished to perfection
Humanizing UI With Microcopy
The primary aim of microcopy is to settle communication between users and a digital product. Current version feels a bit dead-hearted when it comes to communication. This can be fixed using more human centered approach in tone of voice
Order complete
Next Case
