PROSE & POETRY
This project was intended to help a local bookshop with their online presence. Prose & Poetry, Highgate's neighbourhood bookseller since 2010, created their own website. Although the site was frequently visited, very few purchases were completed forcing the business to seek for possible solutions.
DURATION: 2 Weeks
TYPE: Conceptual, e-commerce
RESPONSIBILITIES: Research, Ideation, Design, Testing, Iteration
TOOLS: Photoshop, Adobe Illustrator, UXTweak, Figma
Introduction
As a fan of local independent shops and an avid reader myself, I was excited to take on the challenge of boosting Prose & Poetry’s e–commerce profile. Going into this project, I needed to find ways to translate Prose & Poetry’s applaudable values and a high level of customer service found in store into an inclusive and communitarian image online. To help Prose & Poetry turn their online traffic into tangible profit, I embarked on a two– week sprint that spanned from conducting a UX research to designing a high–fidelity clickable website prototype.
Research methods
Having established the company’s goal, I wanted to understand customer needs in a series of 4 user interviews. The source material I gained at this stage informed all the subsequent steps I took in this project. I was able to source a group of interviewees with different online shopping experiences as well as varying reading habits which gave me in-depth knowledge of customers’ behaviours. The interviews helped me confront my own assumptions about this project. All my interviewees confirmed that they wished to support local businesses and that the dominance of Amazon or Waterstone’s on the bookselling market did not diminish the allure of independent booksellers. Another important point was that local bookshops indeed create a convivial atmosphere in person but that is rarely translated online with poor websites that seem old–fashioned or hard to navigate.
The interviews I conducted have also helped me understand that a bookshop is a common place where people go to buy gifts for their loved ones. According to two of my interviewees, smaller booksellers were also a preferred source of finding less known, rare books.
The trends that emerged from the interviews began to crystallise around the subjects of customer service, smooth online experiences as well as interviewees’ support for the brands that care for diversity. Having tracked the common threaded in the form of an affinity map, I noticed that two silhouettes of model customers could be formulated based on my interviewees’ input.
The first, Dabbler is an occasional bookstore customer. They know roughly what they like but are open to suggestions. Their key criteria in selecting the product would be price and good reviews. The second persona, Connoisseur, is a fan of rare, less popular products. Connoisseur is less susceptible to listen to recommendations since they do their preliminary research and know exactly what book they want.
I constructed two userflows for each of my personas, highlighting the key decisions that Dabbler and Connoisseur might take before they decide to go ahead with the purchase.
To conclude my initial research, I framed the problems that Dabbler, Connoisseur and my client, Prose & Poetry were currently facing and how I, as a designer of the future product intended to solve them, can provide all three of them with a solution. Moving forward, I decided that that to satisfy all three parties, I needed to shorten the path between finding a book and purchasing it as well as make the overall shopping experience more enjoyable and tempting to revisit.
A clear navigation on the website was essential for both Dabbler and Connoisseur. I was given a list of items that my client, Prose & Poetry wanted to feature on their site. To best understand customer’s expectations about what they would expect to find in each category, I created a UX Tweak survey which asked 5 participants to card sort some of the titles that will be featured on the site. Knowing how important the African and Caribbean literature was for my client, I created the “Black Voices” category. I hoped that customers interested in African writers would be equally keen to click on the “Black Voices” tab as someone who wanted to buy a book by a Caribbean author. The “Black Voices” category would also help me group books by Maya Angelou or James Baldwin. Even though neither African nor Caribbean authors, my assumption was that a reader interested in these two authors would expect to find their works in the “Black Voices” tab. The result of the exercise confirmed my belief and allowed me to include this category in my initial wireframes.
I began sketching the home screen as well as the product screen soon after receiving the card sorting results. The survey results helped me structure the navigation element of the future product. To convey the classic yet forward–thinking character of the brand, I redesigned the logo of the shop and gave it a modern yet refined look. The choice of the owl as a widely recognisable symbol of knowledge coupled with the modern typeface received positive feedback from all four of users during the usability testing session.
Research
LEARNINGS FROM USER TESTING
2 out of 4 users pointed out that the mid–fidelity prototype was aesthetically pleasing. However, they worried that the search bar was not as prominent on the site as they would wish it was and that the accumulation of icons at the top of the page created a crowded feel. 1 out of 4 users has pointed out that the navigation banner should be more distinct from the welcome banner below as it might deter some user from telling these two elements apart.
I took this feedback into consideration and redrew the home screen. I spaced out the elements found in the header and gave the navigation tabs more prominence on the site. I also shifted the placement of the search bar and singled it out with more padding to the top–right of the screen.
Moving forward with the high–fidelity prototype, I went back to the drawing board and sourced for more inspiration that could enliven my grayscale wireframes. Bearing in mind Dabbler’s needs, I cared to develop an appetising way to display product pictures and give them a clear way to find products tailored to their needs and prompt possible suggestions based on their searches.
FINAL SOLUTION
The addition of a quick add button along with an inset basket menu in the top right corner of the website addressed the problem of scarce purchases made on the site stated in the brief. The feedback received in testing rounds pointed at the user’s enthusiasm for completing the purchase thanks to a clear and navigable environment the products were now set within. The new interface of the website with clear and engaging calls for action and accessible filters improved the clarity of where the user is supposed to click to complete a purchase.
3 out of 4 users were happy with the card layout of 3 or 6 books per page as well as the scrollable carousel feature as a clear and learnable way of discovering the products.
KEY TAKEAWAYS
The experience of working on this site taught me two key things. Firstly, I was able to quickly learn and implement the new UX methods in my iterative process. I was a novice when it came to building the information architecture of a new website. Using the card sorting method was a lesson in applying techniques I wasn’t familiar with to the product I wanted to build. This way, I was able to work on my adaptability and resilience. Secondly, I managed to see how the UX-geared elements of the process, including research and wireframing, complement the UI-focused parts of the process, such as mood boarding and interface development.