Green Apple Books

Real People. Real Local.

Redesigning the e-commerce experience and brand vision for an established local bookstore.
Green Apple Books is a San Francisco based bookstore that has held a special spot in the hearts of its clientele for over 50 years thanks to thoughtful staff and homey environment. Yet this experience was not carried over to the website, leading to significantly lower e-commerce sales.
The problem

With the rise of Amazon, constantly evolving the e-commerce landscape, it becomes vital for small businesses to stand out online and consistently provide exceptional user experiences at every click.

In Green Apple Books case, the majority of orders were completed in store but this revenue alone wasn't enough to sustain the business's growth and ultimate success.

SoLUTION

​I revamped the existing site by altering the main navigations information architecture, refreshing the outdated design and creating consistency across all pages.

My goal was to capture the quirky spirit of Green Apple Books and translate it across to web, offering a smooth shopping experience with a unique, yet functional design.

RoleS

Creative Direction
Branding
Web Design
Project Management

Timeline

3-week solo project

TOOLs UTILIZED

Sketch
Adobe Photoshop
InVision

Deliverables

Landing Page
Product Details Page
Subscriptions
Checkout Flow

landing page

Users were overwhelmed by the sheer amount upfront content and the overuse of primary colours, making it difficult to discern where to focus their attention.

By removing the columned layout, I quickly improved the flow of information. From there, I determined the highlights of the landing page and ordered them in a linear fashion.

Subscriptions

Apple-A-Month subscriptions are a key differentiator between Green Apple Books and its competitors. Yet users almost immediately skipped this page, saying there was "too much fine print".

To create a visual hierarchy, I broke apart dense text blocks into smaller, more readable sections by utilizing images, consistent titles and payment cards.

Product page

A recurring theme across most pages is a lack of differentiation between sections, and the Product Page was no exception.

By utilizing subtle background colour changes, I was able to break the page into distinct sections allowing users to skim and find the information relevant to their search.

Understanding the problem

I ran usability tests with 9 volunteers from Toronto, ON. Selection process required users to be a regular online shopper, with at least one of these online purchases being for books. On the existing Green Apple Books site users were tasked with adding two specific items to their cart, without the use of the search bar, then proceeding to and completing checkout.​

Feedback based on the original Green Apple Books webpage resulted in these findings:

01
DISAPPEARING SHOPPING CART

As users navigated around the site, the shopping cart moves from one location to the next without ever establishing a fixed, and known position. 100% of users were left confused and asked for assistance.

Solution: BUILD DESIGN FAMILIARITY

Create design templates as building blocks to maintain consistent and help users locate key site features like the shopping cart.

02
Too Much CATEGORY CHOICE

Within the Browse Books tabs page existed 54 different categories in which users could search for books. This overload of information left users feeling overwhelmed with options and less likely to use the feature.

Solution: RECONSTRUCT INFORMATION ARCHITECTURE

Develop a hierarchy of information to reorganize the site structure in a meaningful way.

03
EXCESSIVELY LONG CHECKOUT

The long, single paged shopping cart left users unable to determine their position to purchase flow. Upon further questioning with users, 5/6 users said they were more likely to abandon purchase midway when the checkout process is unclear.

Solution: BREAKDOWN CHECKOUT FLOW

Break checkout into relevant parts to allow user to know their position in the flow

HoW might WE ...
Create a webpage for Green Apple Books that users can easily navigate, while translating the local charm of an in-store shopping experience, online?

Method: Open card sorting
Goal:  
Understand users mental model and their prioritization​.

Open card sorting provided insight into how users would like to categorize content. With this information I adjusted terminology and refined the navigation hierarchy from 54 categories to 15.

Design process

The process began with pencil to paper then translated into digital form. These initial sketches and paper prototypes allowed for drafting, testing and redesign prior to creating digital wireframes.​

I experimented and compared different design blueprints for the global navigation, grouping vital elements in the most intuitive ways possible:

Creating demand

It occurred to me as I developed the brand identity of Green Apple Books, that a huge opportunity that was being missed due to a lack of marketing material. To increase the companies reach there must also be a focus on wider brand recognition.

To address this, I designed a seasonal poster campaign to advertise upcoming events, monthly newsletters as well as custom packaging (with a token Green Apple handwritten note) for online orders.

Final reflection
FEEDBACK EARLY AND OFTEN

Getting feedback from my design supervisor and users allowed me to tailor my ideas, sketches, and wireframes at each step of the design process.

DESIGNING WITH NO FUNDING

As a conceptual project through General Assembly, I was not in contact with stakeholders or provided funding. I learnt to conduct user interviews and usability without any expensive tools.

Next Project
Previous Project
Improving the user experience of our tracking application while building design consistency across the mobile platform.
Improving the user experience of our tracking application while building design consistency across the mobile platform.
Research and design of a new feature for Lyft to include long distance rideshares.
Redesigning the e-commerce experience and brand vision for an established bookstore.