JENNI BICK: REDESIGN OF THE ONLINE EXPERIENCE FOR A LOCAL STATIONARY BRAND

Website Redesign Concept

OVERVIEW

This concept redesign aimed to transform the user experience of Jenni Bick, a Washington, D.C. stationery store known for its high-quality notebooks and personalized gifts. The original website's cluttered navigation and overwhelming layout failed to capture the charm of the physical store. By conducting user interviews, competitive research, and a heuristic evaluation, I identified key usability challenges and opportunities for improvement. The redesign streamlined navigation, improved product visibility, and introduced an accessible color palette that reflects the brand’s creative and premium identity, delivering an intuitive and engaging online shopping experience.

PROJECT

UX/UI Website Redesign Concept

DURATION

June 2024, 3 weeks

TOOLS

Figma

The Client

Original store website, which has unclear and overwhelming navigation

Jenni Bick is a Washington DC stationary store known for its carefully curated selection of high-quality notebooks, pens, and personalized gifts. As a frequent visitor to the store, I’ve always admired its warm, inviting atmosphere and the sense of discovery it offers. However, when I visited the store’s website, I found the online shopping experience to be overwhelming, with too much information competing for attention. This inspired me to take on a concept redesign project to streamline the user experience and make the website as enjoyable to navigate as the physical store itself.

Discover

USER INTERVIEWS

What are stationary shoppers looking for?

I first began to explore how stationary shoppers navigate products. I interviewed 4 people who frequently buy notebooks and stationary.

Goal: understand their preferences, behaviors, and experiences when shopping for notebooks/stationary.

1.

Display of products

Users want guidance when shopping, it is important how everything is organized

2.

Getting a sense of the products

Users want to understand how the pages look, and get a sense of the size and quality

COMPETITIVE RESEARCH

Learning from leading stationary brands

To ensure my redesign of the website was both innovative and competitive, I conducted an element analysis of two top stationery brands: Papier and Paper Source. By examining their approaches to key elements—Home Page, Navigation Bar, Product Listing Page, Product Description Page, Cart, and Checkout Page—I identified industry best practices and features that could enhance the user experience on Jenni Bick.

  • Collections on the home page

  • Navigation categories

  • Filtering

  • Product description inclusions

  • Add to cart extras

Many purposes

Users use notebooks and stationary for many different purposes and need customization and layout options

3.

Papier has “extras” buyers are prompted to add to their cart

Paper Source has very clear categories and collections on their home page

HEURISTIC EVALUATION

Uncovering Usability Challenges

To guide my redesign of Jenni Bick, I conducted a heuristic evaluation to identify key usability issues. This method allowed me to systematically assess the site against established usability principles, uncovering critical areas for improvement.

I chose this approach to ensure that my redesign would directly address common pain points that hinder user satisfaction. The evaluation revealed some major issues:

Overwhelming Homepage

The homepage is crowded with sections that lack clear purpose, which detracts from highlighting main categories or special products.

Unclear Customization Options

The customization features are not well-explained, leading to confusion about how to personalize purchases.

Define

TARGET USER

Users need to find and customize high-quality notebooks and stationary in order to manage their diverse tasks and projects.

  • Needs: Organized, customizable notebooks made with durable, high-quality materials.

  • Wants: Inspirational, customizable, and premium-quality stationery products.

  • Behaviors: Mixes online and in-store shopping, influenced by reviews, social media, and recommendations.

  • Frustrations: Difficulty assessing notebook details online, limited customization options, and challenges in finding creative notebook uses.

IDEATION

Guided by the user persona, I focused on ideating around key challenges and opportunities. To frame this ideation, I developed a series of "How Might We" (HMW) questions, which helped pinpoint specific areas where the redesign could better serve users.

  • HMW let users know about the quality of items?

  • HMW suggest to buyers additional products they might need?

  • HMW leverage reviews and recommendations to make informed purchases?

  • HMW guide users in maximizing the potential of their products?

INFORMATION ARCHITECTURE

Confusing Navigation

The site’s navigation is cluttered with unfamiliar subcategories, making it difficult for users to find what they need.

To address the confusing navigation of the original site, we conducted a card sort to inform a more intuitive information architecture.

We selected 30 of Jenni Bick’s top products and conducted a card sort with 12 participants. The participants were asked to group these products into categories that made sense to them. The responses provided valuable insights into how users naturally categorize the store’s offerings.

Using the results of the card sort, we reorganized the site map to create a structure that is much easier to navigate. We also drew inspiration from competitive sites, particularly in how they promote gifts and accessories, which led us to streamline the site’s categories and focus on a more concise, navigable structure.

The new information architecture is designed to help users quickly find what they’re looking for, with clear and logical categories that encompass all products. This reorganization not only improves the user experience but also enhances product visibility, making it easier for customers to discover and purchase items.

Design

Homepage layout ideation

Product description page with details and personalization options

1. User looks at homepage and clicks a category or searches the top navigation bar

3. User adds item to cart and is suggested extra items to buy

SKETCHES

Exploring layout concepts

To begin bringing the website to life, I sketched several layout ideas for the key pages. Each sketch was crafted with the goal of simplifying navigation, enhancing product visibility, and aligning the design with the needs and preferences identified in the research phase.

Product description page options with drop-downs and link to reviews

View of cart and option to add products

LOW FIDELITY WIREFRAMES

Our solution in action

Our initial lo-fi wireframe prototype illustrates a user looking for and buying a planner.

1a. Top navigation bar

3a. Cart

USABILITY TESTING

Testing our low fidelity prototype

We tested our prototype on 4 users to see their process as they purchased a planner.

They also brought up key details to include on the website such as return policy and tax.

4/4 users did not click through the navigation and instead searched the homepage

2. User filters/sorts products and clicks on the product

3. User puts in shipping information and receives an order confirmation

2/4 users were confused about the difference between personalization and customization

2/4 users wanted to add extra items to their cart when given suggestions

Deliver

VISUAL DESIGN

Revitalizing the brand with a bold, accessible color palette

To enhance the user experience and better reflect the vibrancy of Jenni Bick's products, I replaced the existing black-and-white color scheme with blue accents, which lacked contrast and did not meet accessibility standards, with a more dynamic and accessible palette. Drawing inspiration from the bold primary colors found in their stationery offerings, I introduced a high-contrast color scheme that not only meets WCAG accessibility guidelines but also conveys creativity and education, aligning with the brand’s core identity. This updated palette enhances visual appeal, improves usability, and better captures the lively and creative essence of the Jenni Bick brand.

Final takeaways

Opportunities to improve

  1. Usability testing should have been done initially on the original website to figure out what worked and what didn’t.

  2. Font/font size is one of the best ways to make content cohesive and professional. Ensure the font sizes are consistent across all pages and are not too big.

  3. Users look at what is right in front of them first, rather than clicking through tabs or filters. Take advantage of this by making an exciting and navigable home page.

Other Work

Nomad: Your ultimate companion for the digital nomad lifestyle

Designing and marketing dynamic events for students

Advertising, web, and poster design for an academic program

An online gallery and e-commerce store for a fine art photography brand