Case study: Designing an eCommence site from scratch.
A solo concept project, over a 2-week sprint on a UXDI course with General Assembly, London.
This was a Solo Project, therefore I was responsible for all stages of the design process.
To design an e-Commerce website for the fictional neighbourhood bookstore Prose & Poetry, while keeping the small shop feel and promoting their dedication to diversity with the aim to increase customer checkouts.
The website receives plenty of visitors but few completed purchases.
Through an improved eCommerce website, showcase products while maintaining the brand image: “small shop” appeal and great customer service.
Who are Prose & Poetry?
Prose & Poetry has been Highgate’s neighbourhood bookstore since 2010. Located at the heart of Highgate village, they’re proud to be a part of a dynamic community.
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.
I split my competitor research into two, looking at stand-out London independent bookstores first.
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.
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.
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.
I first issued a screener survey and received 12 responses.
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
- All want ordering online to be an easy, straight forward experience.
- 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.
- As this was a Solo Project, having to conduct all aspects of the discovery phase alone really taught me about time management for this stage. User interviews can be time consuming to both arrange and host, plus it takes skill to stop them running over with ‘small talk’. I then carried this experience and awareness to every other project I conducted on the course.
- 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 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.
In order to help me with the site navigation and organising the product content — I had 6 users take part in a card sorting exercise, this brought out a couple of trends but also some mixed results which meant I needed to dig deeper on my competitor analysis to decide on the final site map.
- This was the first time I’d conducted a card sort. I learnt the different programmes you can use for this, eg: Trello and Optimal Workshop.
- 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?
I started with sketches, unfortunately I was unable to test these before moving to wireframes on Figma, as I live alone and was working remotely during a lockdown.
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
I created a grey-scale prototype from my wireframes and conducted 3 usability tests. As mentioned before, feedback from this was surprisingly positive in terms of flow.
Users just wanted some extra things added in —
- Such as, the number of reviewers visible and reviews to be readable below the product description
- Users like to be able to clearing find a ‘bestsellers’ section.
It was key for me to focus on the emotion and feelings my personas, Elle and Nicola, get when browsing in real life bookstores and try to convey this online as it’s the key USP small stores have over the bigger brands.
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
This was the first project on the UXDI course to incorporate colour. I’ve always been drawn to colour, even in my own dress sense and when I used to design womenswear clothing and it turns out, UX design is no different!
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.
- I learnt a lot about typography, previously I’d always found this an overwhelming area so loved gaining more knowledge and discovering what tools I could use to help me.
- 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
- Further usability testing
- 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
- I learnt so many different things on this project that it’s hard to even list. I started out a little unsure about the brief. I enjoy books but as I’m not a big reader, I prefer audiobooks or e-books and lean towards brands like Amazon and Audible. But after doing the research it really opened my eyes to this market and how people relate to books and bookstores, it’s really quite magical!
- 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.