Prose & Poetry
Bringing a local Highgate bookstore into the 21st Century
2 week sprint - Concept Brief - solo project
Overview
Client & Brief
Prose & Poetry has been the Highgate’s neighbourhood bookstore since 2010. Customers range from local residents, people from around the UK, to small businesses. The business model is based on customer service, wide range of diverse literature, reasonable pricing, and keeping it local. They employ local staff and support the community they serve.
Their problem
Prose & Poetry built their own website but were not pleased with the results. They have plenty of website visitors yet few completed purchases.
Through an improved eCommerce website, they want to showcase their products while maintaining the brand image: “small shop” appeal and great customer service.
Deliverables
This was a solo project with a goal to deliver competitor research, personas, user flows, reassessment of information architecture, sketches, grayscale wireframes, iterations on design and an interactive high-fidelity prototype for a desktop website
Process & Insights
Discover
-
A feature analysis allowed me to compare the main features, navigation and checkout process of several online booksellers websites.
-
Research showed:
-
clear filters are crucial for easier navigation & better user experience.
-
Amazon offers a very quick and easy one click check out system.
-
Bookstores heavily focus on recommendations.
-
5 interviews with book lovers gave me the the following insights:
-
People love being recommended books and curated book-buying experiences.
-
People love the speed and efficiency of Amazon but most would rather support independent bookstores.
-
People find it hard to browse on Amazon and would love the luxury of browsing a real life bookstore to be reflected in a website.
-
People want to read a diverse range of books to learn and broaden perspectives.
​​
​​
Define
-
User insights highlighted Amazon allow quick and easy check out but independent stores are more personal and curated.
-
Using my research findings, I created a representation of a typical user called Ana.
-
Ana's problem could be defined as follows:
“Ana needs a personalised and efficient experience when buying a book online so that she can pick the right book and support local business.”
​
-
I conducted a card sort, asking users to categorise genres of books in their opinion, which allowed me to build navigation and a sitemap for the site to correctly organise the content.
-
I created a user flow helped present an overall picture of the site and create a more seamless user experience for Ana.
-
The brief necessitated a smooth checkout flow for the user. So I created a flow that demonstrated the user finding a title and adding it to their basket, before going through the checkout process.
Develop
-
I sketched out the user flow over several screens.
-
I tested the sketches on 5 users and then moved on to low and mid fidelity prototypes.
-
I iterated on designs in response to usability testing. This included adding clearer buttons to guide the check out process, and developing a one page checkout system.
-
For the visual design of the site I wanted to evoke the feeling of old, luxury heritage bookshops so many users spoke about in their interviews whilst still maintaining the accessible local bookshop feel mentioned in the brief.
-
I looked at vintage books and took colour and typography inspiration from a few visually appealing book sleeves.
-
Delivered a proposed solution in the form of a high-fidelity prototype.
​
​​
Deliver - The Outcome
Example of iterations made through user testing.
Challenge: Payment process
​
The accompanying image illustrates my checkout wireframes through each stage of design.
User testing highlighted an issue which is circled in red. Some users thought placing the ‘choose address’ button under the payment section may be confusing.
As I wanted to make a smooth and transparent journey through checkout, I changed the positioning of this button and made the one page payment flow more visibly appealing and minimal.
​
Solution: Movement of button and more minimal, clearly spaced payment page.
Challenge : Button placement
User testing also highlighted some confusion around the placement of the ‘continue shopping’ button (circled in red), staying on the product page once the user has added a book to their shopping basket and seen this via a pop-up. I edited this for future versions of the design, which made amore functional book buying experience.
​
Solution: Move button to allow users the opportunity to continue shopping.
The Solution
Every design decision was directly related to the original problem of the bookshop, they had few completed purchases on their site and needed an updated Ecommerce experience. This was then further informed by interview insights and user testing. The final proposed design includes:
​
-
Homepage with signposts to curated book buying experiences, focus on diverse literature and links to recommended books.
-
Global, secondary and breadcrumb navigation.
-
Design system showcasing Prose & Poetry products whilst also maintaining a 'small shop' brand image.
-
Product page for a book and opportunity to add to basket.
-
One page checkout system with payment, address and order details on one page to inspire confidence and trust through the payment process and address Prose&Poetry's original problem with user completing checkout.
The Prototype
Conclusion
Key learnings
-
I really enjoy interviewing. People are really passionate about books and these interviews were so insightful and emotive, I really enjoyed the process.
-
Figma is a gift. Working on a visual design in tandem with UX made me appreciate Figma even more, I honed some skills and feel there’s still so much to learn.
-
The Importance of UX writing. As this project focused heavily on refining the checkout process, it was important to use carefully chosen language to reassure users at the point of checkout they had options to edit their personal information and highlight when they would be charged for their purchase.
Next Steps
-
Work on the browsing experience, design system and polish the overall look of the site.
-
Create dedicated pages for personalised experiences based on buying history and subscription services.
-
More testing and more iterations!
