navigation

Navigation Design

The project.

When: 2018 – 2019
Where: De Bijenkorf
My role: UX research & design

As a team member within a cross discipline squad focused on improving the customers orientation when landing on our e-commerce platform, I was responsible for exploring how we could provide the most engaging & intuitive navigation.

My responsibilities ranged from customer / data research to ideation and final design. Working agile, I defined various stages of development through A/B testing proposals in order to finally validate the final design.

Goals:

  • Usability
  • Findability
  • desirability
Process
Process

My process.

01.

Discover

Discover key customer needs through qualitative and quantitative research.

02.

Design

Design and test the best solution for solving the customer & business problem.

03.

Deliver

Deliver final Design System assets and measure the business & customer impact.

Discovery process

Desk research

1. Desk research & competitive analysis.

Learn from industry standards

Completed a usability audit, reviewed best practices from Baymard and other sources, and explored how competitors are already solving similar problems for customers.

2. Card sorting & customer surveys.

In order to understand how our customers might structure products within our website, we conducted an online card sorting. In addition, continual monitoring of customer surveys were reviewed in order to understand potential problems.

Session data

3. Online session analysis & data analytics.

An interesting place to get started with any project is to explore how customers are currently using the product. For this project I explored session usage within our SessionCam tool and completed a brief data analysis within Google Analytics.

Design process

flowmap

4. Wireframe & prototype.

Initial design ideas discussed with various business and design team members with quick designs mocked up in Sketch. These designs then uploaded into Marvel to create a quick prototype.

5. User testing of prototype.

Using an interactive Marvel prototype, store testing was completed with customers in order to understand where improvements could be refined further.

User testing
Design iteration

6. Exploring alternative UI patterns.

Understanding where the UI needed further refinement based on the user test results, the design patterns were then reviewed and discussed with the full UX design team before finalizing a direction.

Deliver process

Finalize UI

7. Finalize UI.

Initial design ideas discussed with various business and design team members with quick designs mocked up in Sketch. These designs then uploaded into Marvel to create a quick prototype.

8. Handover to development.

Delivering within the Design System.

Sketch designs published into our Design System on Zeroheight with usage documentation for developers and designers. Completed any development discussion while creating the necessary development tickets in Jira.

hypothesis

9. Plan A/B test hypothesis.

As part of delivering the final product, the plan for how to test and learn from the changes are discussed with business stakeholders and then a final hypothesis is created along with the requirements for creating the A/B test.

The result.

An easier to use, clean mobile first navigation that significantly improved usability and ensured a seamless customer experience across all devices.

But that's not all!

The project included a robust navigation system for efficient modification. A huge project with huge impact!