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
How do I get started?
Discover
Focused on discovering key customer problems & goals through qualitative and quantitative research.
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.
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.
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.
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.
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.
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.
