Overview

A ground‑up redesign of an entire e‑commerce experience.

The goal was to improve the sites overall usability, modernize the visual system, and better connect the customers in‑store behaviors to the online experience.

Key Contributions

(1) Primary researcher and UX designer of the core site architecture and navigation system.
(2) Developed data informed solutions that helped to achieve business goals of elevating the brand as a reliable book expert. This including introducing a new recomendations area of the site, "What to Read".
(3) Design of audiobooks experience, wish lists, loyalty program and the creation an external company blog.

Role

UX/UI Designer, Lead UX Researcher, IA Design,

Tools

Figma, Miro, Optimal Sort, Fig Jam. Microsoft Teams

Company and Year

Barnes and Noble | 2023-2024

The Problem

  • Findability and mental model mismatch. The category labels didn’t reflect how users actually think.

  • Outdated visual system, inconsistent components, contrast issues, and shifting layouts on key pages.

  • The brand's voice as a book authority was not being well represented.

Opportunities

  • To better reflect our shoppers mental models within an easy and pleasant browse, discover and search experience.

  • To strengthen brand trust with our users through a consistent visual systems and clear visual voice.

  • Achieve the Business Objectives of lifting conversions, driving in-store visits and providing a holistically high functioning digital product.

The Process

The Process

Research and Discovery

  • Getting business and stakeholder input early and often

    • involving all departments throughout the process to assure UX development prioritized the right objectives

  • Primary Research

    • Map mental models and user expectations through one-on-one user interviews

    • Card Sorting & Tree Testing (moderated and unmoderated hybrid)

  • Secondary research

    • User personas and journeys to re-familiarize our team with who we were building for and what our users goals are.

    • Competitive Analysis resulting is a comprehensive "best practice" guide with suggestions for high level solutions.

  • Getting business and stakeholder input early and often

    • involving all departments throughout the process to assure UX prioritized the right objectives

  • Primary Research

    • Map mental models and user expectations through one-on-one user interviews

    • Card Sorting & Tree Testing (moderated and unmoderated hybrid)

  • Secondary research

    • User personas and journeys to re-familiarize our team with who we are building for

    • Competitive Analysis and detailed best practice anhigh level solution suggestions

Information Architecture

  • Catalogue and labeling system: established the content organization for the primary navigation menu using data backed groupings and clear labeling.

  • Site Map: to achieve easy, fast pathways for users to reach their goals I created a shallow site hierarchy by establishing clear rules for when a topic appears in the global navigation menu vs. category filters.

  • Holistic wire-flow mapping of user journey's within the new structures logic.

  • Catalogue and labeling system: established the content organization for the primary navigation menu using data backed groupings and clear labeling.

  • Site Map: to achieve easy, fast pathways for users to reach their goals I created a shallow site hierarchy by establishing clear rules for when a topic appears in the global navigation menu vs. category filters.

  • Holistic wire-flow mapping of user journey's within the new structures logic.

Design, Iterate, Design

  • Multiple rounds of low & medium-fidelity designs, reviews with stakeholders and iteration on all areas of the site. The first priority was creating wireframes of the global header and main navigation

  • Collaborate with UX team on the overall UI look and feel while contributing to and incorporating an evolving new design library to my designs.

  • Multiple rounds of low & medium-fidelity designs, reviews with stakeholders and iteration on all areas of the site. The first priority was creating wireframes of the global header and main navigation

  • Collaborate with UX team on the overall UI look and feel while contributing to and incorporating an evolving new design library to my designs.

Hey there. Would you like to see more examples of my work? Let's talk.

Hey there. Would you like to see more examples of
my work? Let's talk.

Hey there. Would you like to see more examples of my work?
Let's talk.

Solutions and Next Steps

  • Support UI designers to polish the final designs for hand-off to development

  • After build, it's all hands on deck for rigorous rounds of QA testing pre-launch

  • Post-launch beta testing will help to inform our success and identify needed improvements

  • With the help of Product team we will prioritize and address the list of post-MVP improvements

Solutions and Next Steps