Product Design

Electrolux.com: Retail Experience

Client:

DDB NY, Electrolux North America

Year:

2016-2017

Services Offered:

UX Design and Strategy, Interaction Design, Prototyping and Testing

Visit Project:

Link

In 2016, 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)

View Full Case Study

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

View Full Sitemap

Wireframes

Designed high fidelity wireframes for desktop and mobile that illustrate the hierarchy of information, interactions, features and functionality. 

Homepage
Navigation Mega Dropdown
Category Landing Page
Product Listing Page
Comparison Page
Product Details Page 1
Product Detail Page 2
Product Detail Page 3
Where To Buy Page 1
Where To Buy Page 2

Concepts

View all concepts on desktop and mobile

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

Product Detail Page Hero Area
Product Detail Page - Secondary Navigation - Feature Section
Product Detail Page - Specifications Section
Product Detail Page - Reviews Section
Product Detail Page - Recommended Section
Product Detail Page - Support Section
  • 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

Latest Works