UX design

iRobot

Website design updates for iRobot’s new product launch.

 
 

iRobot | Website Design Updates

 
 
irobot-mockup.png
 
 

The Client

iRobot is a technology company focused on designing consumer robots for inside and outside the home, including a range of autonomous home vacuum cleaners (Roomba), floor moppers (Braava), and other household cleaning robots.

The Brief

In preparing for the launch of a new product lineup, iRobot wanted to create a seamless marketing plan that covered everything from the overall strategic and creative approach, a media strategy, a public relations plan, and the online digital experience strategy.

For the digital experience, the goal was to make any updates to the existing iRobot website that would help drive awareness, consideration and conversion for the new robot vacuum cleaning models.

Audience

New and existing customers.

Solution

The holistic marketing plan was an inter-agency effort, where our agency’s task was to create the strategy for the online digital experience. Our solution encompassed making design updates to key pages of the iRobot website in order to streamline a customer’s path to purchase. Pages that were completely redesigned include:

  • Homepage

  • Learn / About Roomba page

  • Product Detail pages

 

Client: 
iRobot

Business Model: 
B2C

Team:
  •  Strategy – Jessamyn Wallace & Brendon Buckley
  •  UX – Jess Chow, Julie Michaud
  •  Visual Design – Tim Dwyer
•  Creative Direction – Steve Yaffe
  •  Copy – Doug Murphy
  •  Front-end Dev – Meghan Callahan
  •  Back-end (Sitecore) Dev – Tim Dufour
  •  Production – Katie McCarthy
  •  Account – Joanna Field, Dakota Rabbitt

UX Deliverables:
  •  Customer Journey Mapping
  •  Strategic Recommendations
• Content Strategy
  •  Wireflows
  •  Usability Testing
  •  Wireframes
  •  Functional Specification


The Design Process

THE RESEARCH

Persona - The Advocate

Approach

To determine what changes are needed on the site to feature the new product launches, we needed to gain an in-depth understanding of the current customers’ online path to purchase. Digging into iRobot’s existing path to purchase research as well as existing site analytics, the team strategist and I created personas to shed light on user behaviors, and mapped out each persona’s customer journey to uncover the pages or types of content users would be looking for during their purchase journey.

In addition, we also performed a competitive & aspirational audit. Looking at how competitors and aspirational companies approach new product launches can unveil best practices or opportunities where iRobot can shine.

Strategic Recommendations

Based on our research, the team recommended:

  1. An improved homepage, learn (about Roomba) page, and product detail page to streamline the path to purchase, make it easier for users to decide on an appropriate iRobot product, and provide clear targets for media.

  2. Updates to the store homepage and store category landing pages for a comprehensive experience.

  3. A redesigned navigation structure to improve user flows and to create the most seamless customer site experience.

  4. Blending brand storytelling and product feature information to serve multiple personas and points in the journey at once, and deliver a more useful and enjoyable experience for every new, old, and potential customer.

For phase 1, iRobot and our team decided to pursue recommendation #1 and #4 to meet new product launch deadlines.

 
SYSTEM DEFINITION

Template Objectives Example

Template Messaging Hierarchy (Content Strategy) - About Roomba

Wireflows

In addition to the customer journey map, the team needed to think through an additional teaser experience for a soft pre-launch announcement. To ensure that we were thinking through the entire journey, I created additional wireflows for this teaser experience - which outlined that once the pre-launch announcement was released, the homepage hero area would be replaced with this announcement, where the user could sign up to stay informed.

Template Objectives & Content Strategy

Further defining the experience, I outlined template objectives for the key pages that would be redesigned. To make sure that each template walked the balance of telling the brand story and highlighting product features, I created a content strategy for each - through messaging prioritization and key functionality/purpose definition of each component on a given page.

View Content Strategy

 
EXPERIENCE DESIGN

Wireframe - Homepage

Interactive Wireframe Prototype

Working extremely closely with the visual designer, copywriter and developers on my team, I created a responsive interactive wireframe prototype that included: the current homepage with the soft pre-launch teaser, our recommended homepage post-launch, a new About Roomba page, an iRobot Innovations page, and revamped product detail pages.

View Wireframes

Functional Specification

To hand off to the development team, I put together functional specifications that clearly defined the intended functionality of each element on every template.

Functional Specification for Key Pages
Functional Specification for Product Detail Pages

 
USABILITY TESTING
 

After visual designs were created, we conducted usability testing with prospective customers, competitive vacuum owners, and current customers. Pages that were tested include the recommended homepage, the About Roomba page and the product detail page.

 

Test Plan

Before testing, I put together a test plan to outline logistics, equipment/tools, the tasks and any pre/post-study questions.

Usability Testing

Usability testing was conducted with a total of 14 participants (7 on desktop designs, 7 on mobile designs). Participants’ screen, facial expressions, finger gestures (on mobile) and their responses were recorded as I walked them through each task.

Usability Testing - Desktop

Usability Testing - Desktop

Usability Testing - Mobile

Usability Testing - Mobile

Findings & Recommendations

After conducting usability tests, we analyzed participant responses and testing results, and put together a findings & recommendations document. We found that:

  • Users struggled with certain product terminology

  • Users preferred to scan and see product categories quickly

  • Users reacted positively to certain words regarding product functionality and pricing

  • Users struggled to find certain page elements

  • Users reacted positively to the product videos

Once these issues were uncovered, the team incorporated recommendations to solve for them, resulting in final designs and implementation of a product that has gone through iterations of feedback from both the business and actual end users.

View Usability Test Findings & Recommendations

 

Usability Testing Findings & Recommendations - Takeaways

Usability Testing Findings & Recommendations - Finding 2

Design Updates - Homepage (Desktop)

Design Updates - Homepage (Desktop)

Next Project