Barnes & Noble | Responsive Web Design

My Role

UI Design
Motion Design

Duration

Sep - Dec 2021 (4 Months)

Tools

Figma
Adobe CC
Procreate

Overview

Barnes & Noble is the largest retail bookseller in the United States. They offer books, digital media, publishing services, and a cafe. Barnes & Noble is more than just a retail bookseller. Consumers have built a relationship with Barnes & Noble since childhood. Also, they have created a community by offering cafe and publishing services. However, their current web presence is missing the brand’s personality and physicalness of the bookstore. For this revamp, we will focus on bringing the feel of the physical bookstore and more straightforward navigation.

Design Challenge

Barnes & Noble has built a great relationship with consumers since a young age, but this brand's value is not reflected in the website.

The Solution

To bring the feeling of the physical bookstore online. We are aiming to create a seamless experience from physical bookstore to online.

Mobile UI

Product Detail Page

Product detail page where you can solely focus on the product you want to focus on, and "Frequently bought together" and other related categories to appeal to the users.

Check Out

Users can review the products in the cart and track their shopping experience without visual clutter.

Desktop UI

Homepage

Contents are reflowed, and the stacked layout and illustrated icons give the physical bookstore a feeling.

Search & Filter

To create a visual hierarchy in search results to organize the information. Filter is reflowed to drop down button and illustrated icons creates a whimsical mood.

Product Detail Page

Product information and Frequently bought together in one sight to increase user engagement with the products.

Extensive paragraphs are reflowed into two columns for better readability.

Check Out

A page where you can quickly review your shopping experience without visual clutter.

Design System

Back to Paper and Ink

The art direction for this redesign was focused on creating a UI that was more friendly and appealing to the eye. This direction uses elements to better relate it to the core mission of the app redesign- to be more than just a conventional nutrition app. The app also was designed to suit the many different needs of its users and create an air of inclusivity and motivation for each person that uses it.

Primary Color

Secondary Color

Typography

Genre Icons

Buttons

Grid System

Desktop Grid
Column: 12
Margin: 70
Gutter: 20
Mobile Grid
Column: 4
Margin: 20
Gutter: 20

Result

We redesigned the app to be more visually appealing and friendly for our users. Our new features made the app experience more inclusive to meet the nutritional diet goals and preferences of our users with diverse lifestyles and backgrounds.