One of the most historic Swedish luxury appliance brand; Electrolux reached out to us with an very ambitious mission- building a totally redesigned version of their site, from the ground up using a completely new content management service: Episerver. This new version of Electrolux was not just about applying the new brand identity but a whole new product- one that help shoppers find the the right appliance for their home that suit their needs, locate the closest retail store to make their purchase, checkout as easily as possible for products available online and finally, facilitate the on-boarding process for owners by helping them discover their benefits, tracking their orders and finding support when needed
My responsibilities in this project was to define the experience strategy, design the information architecture and wireframes, create prototypes in desktop and mobile, collaborate with visual designers and developers, conduct usability studies to help optimize the experience, work with the data-analytics team on the measurement plan and communicate all the deliverables to the client as a leader of a UX team. Some features were prioritized for the launch period and others were postponed for beyond. After the big launch we would release new features or optimize existing ones on a monthly basis.We worked hand in hand with our development team Making Waves (previously called Nansen)
How might we help shoppers find the appliance they need, make their purchase decision and go to the closest retail store that has it available?
Our first phase was focused on the shopping experience for large appliances with the following goals:
Help shoppers find the right appliance that best suit their need by discovering the product’s price, dimensions, features, specifications
Help shoppers with their selection process by giving them the opportunity to filter the products, compare different models,read expert and user reviews
Accelerate the path to purchase and get shoppers’ to find the closest retailer to them
Discover and Define
During this the discover phase, we focused on the following tasks:
Conducted an audit of direct and indirect competitors that are perceived as forward thinking and portray an image of luxury (appliances, editorial, automobile, startups, tech and fashion industry) We analyzed the user experience, interface and content areas of these websites, found patterns that exist between them, compared them to the existing site and identified design principles
Pitched new features and functionality to clients by showing the current and proposed site side by side
Conducted quick usability test to find out what were the major problems for the users on the site
Collaborated with partner agency on user research who conducted user interviews with shoppers to find out about their background, interests, activities, attitudes towards life, values, needs for their appliances and home and pain points
Defined the users and their shopping journey by designing personas and experience maps
Research Findings
Research findings have shown what were the major expectations of users and helped us design several personas
I don't know where to begin
Cut the clutter: I need to be able to cut through the clutter and just focus on what attracts me most so I can easily find the product that is best suited for me
Personal value: I need to get a sense of what the appliance will bring to my life and me personally so that I can feel certain I am making a choice that fits who I am and the way I want to live
Progress and Milestones: I need to be able to identify a clear and confident path towards making my choice, If I feel I am making progress I will be more motivated to continue
Less is more: I need a manageable number of options to choose from because if I am faced with a number of options I can handle, I will be able to make a mindful decision
I’d love to see how it actually works
Brought to life: I need a concrete and visual ways to engage with the appliance because if I can have an experience where the product is brought to life, I will be more able to imagine and assess the quality of my future experience
Trusted and relatable sources I need to be able to believe in, and relate to, what is being said about the appliance I’m considering because I want to be able to have faith in the information I’m basing my purchase decision on
Clear distinction: I need to be able to distinguish clearly between my options because if I can see a clear and meaningful difference between my choices, I will feel confident in my ability to make a choice
I’d love to be sure the setup will be easy
Human Touch: I need to know that there are real and accountable people behind my online experience because I want to know that if I want to, I can reach out to someone who can help me with any needs that I can’t tackle easily and confidently online
We collaborated with our partner agency to design an Experience Map which is a visualization of user’s actions and feelings throughout all the phases of the journey. It helped us identify the opportunities, obstacles and possible features of the product
Design and Develop
During this the phase, we focused on the following tasks:
Designed the sitemap which determines the structure, navigation and taxonomy of the site
Designed high fidelity wireframes for desktop and mobile that illustrate the hierarchy of information, interactions, features and functionality
Created low and high fidelity prototypes to test user flows and demo UI animations to show to the developers and client
Wrote very detailed functional specifications that describes
Worked very closely to the visual designers on UI style guides, design specs and comps
Worked very closely to the developers to create pattern libraries
Wrote very detailed functional specifications that explains what happens when a user performs an action
Information Architecture
We proposed a new site map and highlighted the main differences from the previous one
Connect shoppers with the brand immediately upon arrival by showing what the appliance can bring to their lives
Curtain Opening Page
Homepage
Homepage - Featured Area
Lifestyle and Cooking images were chosen to show what owners can do with their appliance by highlighting a benefit/feature related to the product
Single page layout with stacked images and continuous scrolling is the style and functionality we designed in order for it to be easy to implement and mobile friendly
Featured products are displayed on the homepage and link the user directly to the product detail page
Easily drive shoppers to purchase funnel
Product Detail Page - Where To Buy CTA
Finding a retailer is very easy to access since we made the “where to buy” button very prominent on the navigation. Also, this button is highlighted first and foremost on the product pages
Helping shoppers find the product that they want easily and accelerate path to purchase
Navigation - Mega Dropdown
Navigation was designed to highlight the products in a very visual way and push the shopper to visit the product list page directly at this level
Dynamic navigation with collapsible panels are designed to help shoppers have a clear path to follow by cycling through the different products, know what to expect and not distracted from other elements of the site
Explore the category page from the main navigation is one of the choice that user’s have
Grab shoppers attention by highlighting the main call to action on every page
Quick links to main pages of the site are displayed consistently throughout the experience through icons
Help the exploratory type shopper learn about appliance category offerings
Category Landing Page - Tabs Toggle
Category Landing Page Continued - Benefits Section
Category Landing Page Continued - Featured Blog Content
It is easy for users to differentiate between the different types of appliances within the category, learn about their main features and get linked to the specific category list page
Help shoppers narrow down their selection on the product list page through filtering feature
Product List Page - List View - Filter Drawer Closed
Product List Page - List View - Filter Drawer Open
Product List Page - Tile View - Filter Drawer Open
Toggling between different views (list view or tile view) to see the products, sort products by price, ratings and featured products, filter by category, color, price, ratings, save their product to wishlist, compare two or more products and find out which retailer sells the appliance is available
Results are dynamic as users makes their selections
Filter menu was designed to be sticky on the bottom of the page in order for them to immediately access it at any time
Help shoppers narrow down their selection on the product list page through a comparison feature
Comparison Drawer Fly-Out
Comparison Page
Comparison Page - On Scroll
Comparison Page - Table View
Comparing two or more products from the list page is available
A Fly-out drawer was designed as a feedback loop so users can instantly view the appliances they want to compare side by side
The Comparison page is a side by side view of the different products that highlights the different features and specs of each product
Highlight the difference feature is designed so user’s can see the differences through a visualization
Comparing products is available at any time
Help shopper skim through the product page in an efficient way and make sure they can clearly find the most important information to make their purchase
Content about the price, name and reviews are highlighted first and foremost
Product Gallery was designed with the goal to highlight the photography with a zoom in and out functionality
A sub navigation pushes the user to the designated section and helps user’s get to the content they are looking for directly
Features and Spec section have expandable and collapsible panels to hide and reveal content in order for user’s to see many things at once
Featured are paired with demo videos so user’s can see the product in action
Reviews are easily findable
Filter and accessories related to the product or other appliances in the same suite are promoted
Help shopper find a retailer that sells their product
Where To Buy Page- Map View
Where To Buy Page- Map View - On Scroll
Where To Buy Page - List View
Where To Buy Page - Get Directions
It is easy to locate the retailer that sells the appliance the user selected, get basic information about them (phone number and address) and see what the distance is to get there
Geolocation functionality is used to detect your current location and match with retailer nearby or user’s can input their zip code using the search bar
Getting driving direction to the retail store is available
Results
This first launch has successfully boosted metrics and the site got higher engagement rates than the previous years:
Site engagement is significantly higher. More CTA’s and better navigation that leads people down the consumer journey.
Product selection improved on product list pages
Where to buy page views and conversion rate pacing higher than all of the previous year, driven by more clear CTA’s throughout the site and a more prominent placement through the redesign. Excel against the benchmark, with 10% of visits
Mobile users have increased and passed the mobile friendly test on Google
