HEMSÄKER

IKEA household insurance

As UX Designer for iptiQ in the insurance industry, my role involved the research and the design of the new Benefit product of HEMSÄKER, the household insurance of IKEA.

Activities

  • User research.
  • Analysis and Synthesis of the data collected from researches.
  • Reports of findings and insights to be shared and discussed with stakeholders.
  • Competitive analysis.
  • Ideation of the new product’s features.
  • UI design from low fidelity until the interactive prototype.
  • Data driven decisions gathering data from Mouse-flow (heat-maps, scrolls and clicks) and Tableau (conversion rates).
  • Provided scenarios and designs for A/B test.
  • Alignments with developers, documentation, and handover.
  • Alignments with all the stakeholders (marketing, business, product, data scientists, content writers, developers, designers).
  • Usability tests and design iterations.
  • Findings and Insights reports.
  • Update of Design Library and Design System Manager.

NDA

The product I am in charge of has not yet been added to the IKEA HEMSÄKER website. Additionally, it is under a non-disclosure agreement, so the image I am sharing is from an earlier stage of the project that is already public. Once the product is available online, I will be able to share the designs.

Design process

Design process

Understanding users

User interviews

User interviews for 36 participants divided in 3 groups to collect qualitative insights about needs, frustrations, past and current experiences, opportunities, happy paths and so on.

Participants were recruited through a platform and targeted based on the Personas identified for HEMSÄKER.

To organize the insights, I created three affinity maps (one for each group) to group participants’ quotes according to similarities and research questions. I also repeated this process to analyze insights from all participants together.

Affinity diagram
Affinity diagrams

Surveys to collect quantitative data

The research goals were similar to the user interviews, to validate and quantify the answers to our questions through percentage. The results were organized in a report and shared and discussed with stakeholders.

Persona

As Personas had already been identified for HEMSÄKER, there was no need to create new ones for this product. I used the existing Personas in combination with data from the user research and arranged them in an Impact map.

User Persona
Persona

Define

Impact mapping

Impact Mapping is a visual method used to plan and decide which features to include in a product. I used this method by combining research goals, Personas, results from user interviews (qualitative data), and potential features that could achieve these goals to create user stories.

Specifically:

  • Why The business goal answers the most important question: Why do we want to do something?
  • Who are the actors / personas which have an impact on the outcome?
  • How does the business goal have (positive / negative) impact on the behaviour of the actors?
  • What are the deliverables to spark impact and to achieve the goal: Epics, Features, User Stories
  • User Story to bring into the backlog
Impact map
Impact mapping
Impact mapping - whiteboard
Impact mapping

Ideate

Features Ideation

Thanks to all these data and the Impact mapping process, I could define the features needed for the MVP of the product.

The whole experience would have to include:

  • Marketing campaigns to inform the users (newsletters, social media ads, In store ads)
  • Presence of the new product in the early stage of the user journey (Landing Page), without obstructing the main purpose of the user
  • Additionally, the product was only present during the journey on touchpoints where it would not distract the user from their main goal.
  • The new product was also included in the Customer Self-Service (CSS) for easy access.
  • The information about the new product was also easily reachable from the top navigation, but would disappear when the user progressed further into the journey.

User flow

The user flow for the new product on the HEMSÄKER landing page includes the following steps:

  • User lands on the HEMSÄKER landing page
  • User interacts with the new product, possibly opening different scenarios
  • User reaches their goal by using the new product
  • The customer self-service (CSS) portal is available for the user to access additional information and support.
User Flow
Workflow

Feature prioritisation

In order to prioritize features for the product I was working on, I collaborated with the business stakeholders. It’s important to note that for larger projects, prioritization is determined by various factors and typically involves input from different departments. The final decision on feature prioritization is typically made by the heads and product owners of the project.

Analytics

Placement of the new feature in the landing page and along the journey

To determine the positioning of the new product on the landing page and throughout the user journey, I gathered data using Mouseflow and Tableau.

Mouseflow allowed me to analyze user behavior such as scrolls, visibility, click rates, and movements on the website. I also reviewed recordings of user interactions, focusing on instances of high friction. I collected data for two different timeframes, taking into account the release date of specific features. I organized the findings in two tables and documented them in Confluence, including proposed solutions for the placement of the new feature.

Tableau was used to analyze the conversion rate of existing features from the landing page to other pages of the website. This information was also used to inform the positioning of the new product.

Heat maps from Mouse - flow
Mouseflow heatmaps

Prototype

Low fidelity wireframes

Using Sketch, I created low-fidelity wireframes to establish the structure of the first version of the product.

Interactive prototype

After ensuring that all scenarios were covered and aligning with the development team, I transformed the low-fidelity wireframes into middle-fidelity wireframes by incorporating styles from our brand library. I then uploaded the artboards from Sketch to InVision to create an interactive prototype for upcoming usability tests. At this stage, the designs were at middle-fidelity.

Test

Usability testing

I recruited 6 participants and conducted moderated usability tests for the entire user journey, including the Customer Self Service portal.

I provided each participant with a form to take notes, and then compiled an overall report of findings that included notes, comments on pain points and positive points, observations, and proposed solutions for the next iteration.

Iteration in high-fidelity

Based on the findings and comments I had previously documented, I made iterations to the designs in high-fidelity.

Design tools

Toolkit

Design library

During my assignment I was responsible also for the design of local components plus the re-design of existing ones for our Design Library:

New phone input field

Phone input field
Phone input field
Margins and paddings for phone component

New voucher fold for landing page

Designs for empty states in css

New tab navigation in CSS

Tabular navigation
Tab nav