Web 1920 – 18@3x.png

Bringing a heritage bookstore online through the power of user-centred design, emotional appeal & imaginative branding at the intersection of UX strategy and visual design.

Overview

My Role: UX/UI Designer

Platform: Responsive Web

TIme: 2019

Client: Polaris Books/General Assembly

Location: London

Responsibilities: Visual Design, Interaction Design, UX Strategy, UX Research, UI Design, Information Architecture,, Wireframing, Prototyping, Usability testing, Interviewing.

The Brief

Design the new stores online presence, in the form of an e-commerce website that showcases the curated assortment while maintaining the brand image.

Add to that, to simultaneously maintain the "small shop" appeal and great customer service. Unlike giant e-commerce like Amazon, Polaris offers a highly curated inventory, focusing on hand-picked quality over quantity.

A few musts's of the website:

Offer clear ways of locating specific products, support single page for each product, have efficient ways multi-purchase to increase basket size.

Steer customers towards popular products as well as effectively translate the "The Biggest Little Bookshop" appeal online.

Establish the brand and its point of difference in the global market, in contrast to the industry giants as well as national (UK) competitors.

Process highlights: Contextual Inquiry, Affinity Mapping with the team & stages of usability testing & prototyping.

Problem

01

The online book space is overcrowded, saturated & hard to break into & Polaris books have yet to establish an online presence for themselves. 

Research & find an opportunity or market gap that Amazon & other competitors aren't filling at the moment & design a user experience that fills that void.

02

Solution

From the user research, we gained insights that led us to leverage the inherent potential of the Polaris Books brand provenance and translated that into a user-centric e-commerce experience. We injected newness & small portions of innovation by synthesizing inspiration from analogous competitors.

03

Result

Our design tested well with users, both in terms of functionality and usability & engagement as well. Users found it easy to navigate, engaging to interact with & trustworthy and knowledgable based on the look & feel of the platform.

The Research

Based on research and insights from the interviews we developed personas & scenarios to inform our design process. ​

 

Our goal was to craft personas that went beyond demographic and shallow metrics and instead focused on actual behaviour & user pain points. ​

 

Therefore, we started with pulling out some actual scenarios from our in-depth user interviews (both remote and in-person, between 45 minutes to 1 hour long) which progressed into conducting contextual inquiries where we talked to users in their own environment. 

 I wanted to support a local shop. I feel guilty about ordering online only, I try to avoid Amazon because of Amazon’s reputation 

/ Interview excerpt from Contextual Inquiry

“ Bookshops are generally quite nice & curated environment - and they smell good. Curation is important to me 

/ Anonymous Interview excerpt

Quotes from our quantitative user interviews where we honed in on they think & feel about bookshops & buying books online.

Competitive & comparative analysis

What is everyone else doing? And above all, not doing?

We compared & compiled feature differentiation analysis of both UK based and international competitors. ​

From that, we established patterns in terms of functionality and features that later informed the wireframing and design process. ​

 

However, it also revealed some clear areas of potential differentiation for Polaris books in terms of brand positioning and UX strategy.

Below is an excerpt from some of the online retailer competitors used for our competitive & comparative analysis. ​

 

In my opinion, they're all pretty much interchangeable and you could without any grater concern switch out the logos and there wouldn't be a massive notable difference. ​ This could, of course, be for a reason, that it might convert and actually work as an assumption.

 

However, it did also provide an opportunity and open a door to try something different. ​Only dead fish go with the stream. 

Its worth pointing out the importance of abiding my familiar UI patterns in terms of the placement of essential elements within any e-Commerce store. Like the shopping cart in the top right corner, or the brand name/logo acting as navigation back to the home screen.

Blackwells 2019

Amazon books 2019

Foyles 2019

Waterstones 2019

Conclusion?

They're all rather boring

They're all a bit sterile

"When everyone zigs, zag"

/ Stephen

Anderson

They're all rather unimaginative

= a great UX strategy opportunity!

Information Architecture

When we had an idea of what the users want to buy, How should we structure what they might want to buy?

 

Let card sorts lead the way. 

We talked to real users and ask them to group pre-printed cards together in any way they would see fit and that would make sense for them. ​

Each card had a book title, complete with the author, year of publishing, publisher, etc. ​ We ran both open and closed card sorts. ​

An open card sort allows users to define their own categories by names of their choice. ​

 

A closed card sort forces users to pick from pre-determined categories and sort the cards in relation to those.

The open card sort generated 49 different categories. These were boiled down into 12 categories for the closed card sort, which ended up testing successfully with users.

BASED ON 5 USER CARD SORTING SESSIONS

The Card sort helped to inform the IA as well as the sitemap and navigation and was a great tool to use in order to understand how potential users would categorise titles.

User flows, sitemap & task analysis

An early insight after the IA was set was that clean and lean designs resonated and tested well with users.

 

From there, the idea of allowing minimalism as a concept permeating the entire product inside & out was born.

 

The wireframes and designs we improved upon during several stages of testing and iterations.

The sitemap was a direct result of the learnings from the card sort. Utilizing a minimal and simplified approach, rather than the overwhelming categorization and IA of Amazon on the national UK competitors.

Persona Crafting

After conducting 10 contextual user interviews and synthesizing our findings, we had enough information in order to start putting into personas. Since the target demographic of "book buyers" is so large, we didn't want to limit ourselves to one generic persona trying to encapsulate everything into one

 

However, "Petra" ended up being our main target persona for this project, due to the tight time frame.

We would return to during the design face in order to constantly keep the user in mind and let "Petra" drive the design decision making and feature prioritization.

We wanted our persona to be used with a specific, well-defined goal in mind. In order to be useful, the data captured in a persona should reflect the goal for that persona and the scope of work it is meant to impact.

Personas add the human touch to what would otherwise largely remain cold research-based fact.

We wanted our personas to help us ask the right questions and answer those questions in line with the users you are designing for.

For example, “How would Petra, Joel, and Mike experience, react, and behave in relation to feature X or change Y within the given context?” and “What do Petra, Joel, and Mike think, feel, do and say?” and “What are their underlying needs we are trying to fulfill?”

Sketching, wireframing & usability testing

Several rounds of usability tests were conducted, both on low-fidelity hand-drawn prototypes, as well as a clickable mid-fidelity prototype.

 

Both prototypes served its own purpose in regards to providing valuable insights lacking functionality or usability issues.

Each building upon the other in order to progress that designs to the next stage.

After many iterations and user feedback, the first set of hand-drawn wireframes were produced, which later informed the paper prototype.

The paper prototype was tested with 7 users who gave their feedback in terms of navigation, IA and general ease of use of the user flow. This feedback was taken on board for the mid-fy prototype.

During the usability testing sessions, several pain points and problems with functionality were identified by the testing participants.

Lacking filter options, too small review buttons & not visible enough system feedback confirmations were some of the takeaways from the sessions. 

BASED ON 7 USABILITY TEST SESSIONS

Testing the clickable mid-fidelity prototype provided a great opportunity to gain further insights from users.

 

Testing on the end device (desktop) helped the experience feel more immersive & natural to users while they highlighted areas of improvement, obstacles and any uncertainties in terms of navigation.

 

Quickly putting together a mid-fidelity prototype to test with users was critical as it allowed for rapid insights to be gathered and rectified for the next iteration.

I'm strongly influenced by the methods & mindset of Design Thinking, where there's a bias towards testing and getting insights early on in the development process.

PROTOTYPE TESTED WITH 10 USERS

Design Trade-offs

I brought the results from the usability testing with me into the next. stage of fleshing out the UI as well as the look and feel more thoroughly.

As a hypothesis to test, this meant sacrificing some functionality in order to potentially gain engagement, joy and long term brand loyalty. 

But at the same time, I wanted to keep the inclusive and diverse approach - designing accessible and inclusively is not a trend, but a core design discipline. 

So, the balancing act between the two was the major challenge here, and in order to fully come to a conclusion, I'd have to indulge in further usability testing.

Below is a selection of the first iteration of the UI.

Excerpt of screens from the first iteration of the high fidelity prototype with the corresponding UI. Although being functional and tested well, as the project progressed I developed a hypothesis that suggested a slightly different visual path.

To me, UX is at its best and most powerful when it sits at the intersection between the user's needs and business goals.

 

However, this can be easier said than done, and throughout this project, I had to do several design trade-offs, for example in regards to optimising for accessibility but at the same time having a really crisp and visually compelling UI that met the business goals. 

The hypothesis

Business Goals

Brief Requirements

Unique market niche

Strategic brand positioning

User needs

Accessibility requirements

Optimal browser & device performance

Inclusive design

Designing for delight

As a way to more effectively communicate my designs I aim to create interactive micro-interactions using Principle, Adobe XD or Adobe After Effects, as a way to enhance the experience & add delight.

Submit button confirmation

Hamburger collapse interaction

Add to cart hover state

Add & delete item counter interaction

Alternative search bar expand & collapse interaction

Hamburger hover state

Next button hover state

Product related hover states

UI & Visual Styleguide

For the brand, visual & UI style guide I choose exclusively Google fonts for their excellent integration capabilities, as well as their visual appeal and low cost.

 

For the UI I played with choose to pair Playfair DisplayRoboto as complimentary font, resulting in a visually appealing juxtaposition of a classic serif and modern sanserif. 

Typeface: 

Playfair Display

Fonts: 

Playfair Display Regular

Playfair display is a Google Font. Optimised for easy and seamless website integration.

Playfair Display Italic

Playfair Display Medium

Playfair Display Bold

Uppercase: 

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Lowercase:

abcdefghijklmnopqrstuvwxyz

Numerical & Characters:

0123456789!?&€

Paired with Roboto.

Typeface: 

Roboto

Fonts: 

Roboto is a Google Font. Optimised for easy and seamless website integration.

Roboto Light

Roboto Regular

Roboto Italic

Roboto Medium

Roboto Bold

Uppercase: 

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Lowercase:

abcdefghijklmnopqrstuvwxyz

Numerical & Characters:

0123456789!?&€

Primary solids

Complimentary gradients

Crafting thorough and well-executed brand style guides and visual profiles is a great way to ensure consistency across both various digital channels, but also keeping a consistent visual language across physical products and branded assets.

PROTOTYPE TESTED WITH 12 USERS

The Final Solution &

High Fidelity Prototype

 

 

 

Created in Adobe XD to effectively communicate hover states & interactivity for a more immersive usability testing experience. 

The UI was very much a 2.0 version with a more fleshed out visual profile

for the brand and conceptual elements, such as the contrasting rectangular background elements were inspired by book silhouettes as an abstraction.

Altogether providing a more modern, minimal and crisp look & feel to an

e-Commerce bookstore in relation to the market competition. 

The design reasonably well with users, both in terms of functionality and usability. Users found it easy to navigate, engaging to interact with & trustworthy and knowledgable based on the look & feel of the platform.

Branding & heritage in the digital age

 

In order to stand out and carve out a unique spot in the current saturated book e-commerce space, we knew that we had to align the brief requirements when developing the brand profile, all trough to the UI.

 

Based on the brief, we generated the following goldilocks statements to help inform the visual language and brand profile.

 

Knowledgeable, but not academic.

Friendly, but not unprofessional.

Organized, but not sterile.

Consistent, but not boring.

Proud, but not arrogant.

The challenge was to balance and navigate between these and craft a compelling, communicative and appropriate visual brand profile.

The logo

GUPTER, A modern typeface with a classic feel.

Gupter is a Google Font. Optimised for easy and seamless website integration.

Putting graphic assets into context has often proved valuable and helpful in order to communicate with stakeholders.

The worn texture

Signals heritage, legacy & a rustic & authentic feel

The book

Communicative

iconography

The glasses

A universal symbol of knowledge

Friendly element

”Quirky” East London flair

EST Bethnal Green 1982

Emphasizes the local community and the "neighbourhood shop" aspect and reaffirms store legacy

The Tone of Voice

In order to further flesh out the brand of Polaris Books, I decided to explore their potential tone of voice and messaging.

Books and the opportunity to read should be as accessible as possible to the most amount of people, so by crafting an open and encouraging language to greet the customers was very important. 

 

Below is a quick presentation draft of what an inclusive, welcoming and diverse tone of voice could be.

Conclusion & next steps

Improvement.

Next steps & looking ahead.

Going forward a few things I'd like to enhance and improved upon with further validation & testing:

Insights.

Learnings & realizations. 

A key takeaway from this project was just how effective the right UX tool at the right time can be combined with being prepared to go through multiple iterations.

Run A/B testing to determine the preferred UI of the two designed. Each comes with its own pro's and con's so more user feedback is crucial.

The card sorts truly led the way in terms of laying the foundation for the information architecture, the sitemap & navigation.

Run accessibility & contrast testing to either validate or discredit the designs for further iterations.

"If you want to go fast, go alone, but if you want to go far, go together" I truly learned how far you can go together operating as a small, yet synced, UX team.

Feedback.

Taken on board from the users.

This was a more UX research and testing oriented project, that I later iterated upon on my own. The feedback along the way was immensely helpful and directly informed major decisions along the entire way.

Often times, less is more which is why design in the broader sense is really hard. Akin to the timeless quote from Paul Rand: 

"Design is so simple. That’s why it’s so complicated.”

Icon simple-email@3x.png
Icon awesome-behance@3x.png
Icon awesome-instagram@3x.png

©Billy Boman 2021

No content may be reproduced without the consent of the designer.