Navigation Design

Navigation Design

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

My Process

Discover

Understand the customer needs, goals & problems.

Design

Design & test various solutions to solve the customer & business goals.

Deliver

Validate & launch solution(s), measuring impact.

How do I get started?

Discover

Focused on discovering key customer problems & goals through qualitative and quantitative research.

Alt Text

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.

Card Sorting & Customer Surveys

Online card sorting survey & online survey review

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.

Alt Text
Alt Text

Current Data & Usage Exploration

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.

What's next?

Design

Focused on designing and testing the best solution for solving the customer & business problem.

Alt Text

Wireframe & Prototype

Sketch wireframe & simple interactive 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.

User Testing

In-store 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.

Alt Text
Alt Text

Design Iteration

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.

What's the final step?

Deliver

Focused on delivering final UI assets and understanding the design change impact, iterating until final solution solves customer & business goals.

Alt Text

Finalize UI

Created final UI specifications

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.

Ready for Development

Handover using Zeroheight & Developer Jira ticket

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.

Alt Text
Alt Text

Plan A/B Test Hypothesis

Measure the impact of design changes

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

A fully responsive, consistent, and intuitive experience for navigating the large collection available in De Bijenkorf’s online collection.

Consistent UI interactions

An improved mobile navigation design that included defining consistent usage of UI patterns in order to aid the customer in navigating between levels in the navigation.

Mobile first & fully responsive

A mobile first design approach that was delivered with responsive requirements in mind.

But that's not all! The project led to a fully manageable navigation system that made iteration & efficient modification possible.