Case study: Designing an eCommence site from scratch.

While portraying brand values and company ethos.

A solo concept project, over a 2-week sprint on a UXDI course with General Assembly, London.

My Role:

The Brief:

Problem:

Challenge:

Who are Prose & Poetry?

Their customers are varied — ranging from local residents, people from around the UK, to small businesses. The business model is based on customer service, wide range of literature, reasonable pricing, and keeping it local. They employ local staff and support the community they serve. They care about sourcing literature from a wide range of writers and cultures.

Diversity is very important to Prose & Poetry. Who want to spread knowledge and culture to help fight racism by offering a wide range of authors, from a very varied background.

Discover — diving into the book sector.

Competitor Research

From this research I could see that there were varying levels of success when it came to small independent bookstores and their websites. Some do it well while others really don’t translate their in-store experience online.

Next, I looked at the big brand names that most people know, and from my research it appears they could also be referred to as — ‘The Bad Boys’ as people seem to have mixed feelings and often guilt associated from investing in brands like these — Amazon, Waterstones and Audible by Amazon.

After, I drew up a Pluses & Deltas table to really highlight what sets each of these brands apart. What they do best and what lets them down. This was really helpful in giving me a direction to understand how to translate feeling and brand values online.

Pluses & Deltas for Waterstones, Audible and East London independent Burley Fisher Books

As you can see there are lots of positives for all but a stand out negative for the bigger brands is ‘overwhelming’ choice, while the independent needed more work on things such as reviews and overall appearance and interface.

Waterstones for a big store does a great job at making itself feel like a smaller store — with aspects of community and using different typography to make it more down to earth and approachable.

Burley Fisher are a really good example of how to create a feeling of community, with a warm friendly approach so something to think about.

Whereas, Audible from Amazon feels very much functional and flat in terms of browsing experience but has lots of great features — such as being able to sample before purchasing.

Comparative Analysis

And one London gym website, local to me — Frame, that does a great job at portraying its brand values online using bright colours, font, hashtags and tone of voice.

User Interviews

From this I conducted 4 user interviews and due to time constrains I followed up with 4 more full length questionnaires, in total gaining results from 8 people.

Key Trends — User Insights

  • There was a lot of chat about Amazon, some positive but a lot had very negative feelings associated with it and feelings of guilt for investing their money here and not supporting smaller businesses.
  • What really stood out were people’s feelings of emotion when describing the experience of shopping in a book store and its unique atmosphere.
  • A sense of community was key for independent stores, both for creating this feeling and investing in the local area.
  • From the users I spoke to it was clear, everyone likes recommendations — be that personal from a person in-store or tailored online. The more personal the better.

Discover Learnings:

  • A standout moment for me, was understanding how small businesses can complete with those so much larger than them. Although, they can’t always compete on price, they can conjure emotions in their costumers and use this as their USP.

Define — Who are we helping?

“I feel better knowing my money is going to my local area”

“There are no independent bookstores near where I live but would use independents online.”

From my research I was able to draw up two personas.

Elle — Persona №1
Nicola — Persona №2

“Elle needs a better way to order online from her local independent book store because she wants to avoid ordering from big brands such as Amazon.”

“Nicola needs a better way to order online from independent book stores because she doesn’t have access to these where she lives and prefers to support small businesses over big brands such as Amazon.”

I found from this I could create a user journey and flow that encompassed both personas without having to just choose one.

Card Sorting

Define Learnings:

  • I also learnt how time consuming a card sort can be if there is a lot of inventory and how many different ways people can approach/categorise things depending on their knowledge or outlook.

Design — What did I try?

Some initial sketches.

However, when I tested the flow using wireframes the feedback was very positive and users said it felt intuitive. This was aided by comparative research, I’d been looking at some eCommerce website examples that I really liked, to inspire me.

Usability Testing + Iteration

Users just wanted some extra things added in —

  • Such as, the number of reviewers visible and reviews to be readable below the product description
Iterations
  • Users like to be able to clearing find a ‘bestsellers’ section.
Iterations

Typography

I wanted to bring a feeling of heritage and tradition. While also feeling friendly, down to earth and approachable.

I did this by mixing two heading fonts. I wanted something that looked slightly handwritten, as if one of the team was speaking or had written on a chalkboard sign in-store, it was also something I really picked up on when looking at competitor site, Waterstones.

It was challenging, it’s not easy to find a script font that’s legible and doesn’t look too much like ‘comic sans’. I opted for Pompiere.

I knew I wanted a serif font for the brand name and opted for DM Serif Display, to give a traditional, heritage, feel.

These were both complimented by Roboto.

My Colour Story

Colour palette

I started out by asking myself — If Prose & Poetry were a person, who would they be?

Answer — friendly, approachable, knowledgeable, wise, current/up to date, outgoing but thoughtful.

I wanted a heritage feel for trust, wisdom and knowledge, which I sought out in deep blues. But also wanted it to be friendly, fun and approachable — so included oranges.

I experimented with lots of different colour-ways and actually found it quite challenging especially after looking at the grey wireframes for so long.

I made sure to test accessibility and this actually helped me to find colours that looked better.

Test colour arrangements

Design Learnings

  • I also learnt about colour theory and how challenging it can be to apply colour to your designs. It wasn’t as simple as just choosing a palette, it then had to look good and comply with accessibility.
  • I really loved the challenges across this project, I learnt so much and was really pushed at times. It was a lot of work for one person in a short space of time but I succeeded and was pretty happy with the results, considering.

Deliver — My Proposed Solution + Prototype

Clickable Prototype

Next Steps

  • Add order confirmation page
  • Consider alignment and spacing of products and descriptions
  • Develop profile/account page with optional preferences
  • Create more views and/or sneak peeks of books
  • Develop community aspects of the site — Forum, Blog, Events, Social Media
  • Add in staff reviews

Key Learnings

  • I learnt how interesting I find user interviews, even if I didn’t initially think I connected to the topic.
  • I learnt how to create high-fidelity mock-ups and how cool these are.
  • I learnt a lot more of Figma and how much using grids facilitates my perfectionism side and eye for detail.

Thanks for reading, you can find me on Linkedin.

UX Designer | Founder of The Experience Made