UX/UI Design / Product Design
A New Shopping Experience for a Local Bookstore
Designing a e-commerce experience for a local business
Introduction
This is another case study from one of my UX/UI Design bootcamp projects at Ironhack Berlin.
This time, we were requested to apply design thinking methodologies to design an e-commerce website for an existing small business. The first step was to select and approach the business ourselves for this cooperation.
The group I was working with consisted of 4 members — me included — . The time frame we had to complete this project was 4 days.
Let’s first take a look at the client we were working with for this project.
We decided to go a bit further than Berlin. We went all the way to Lisbon, Portugal and contacted a bookstore: Tinta nos Nervos.
I first stumbled upon Tinta nos Nervos randomly, while strolling through my hometown, Lisbon, a few months ago. The façade is as inviting as the owners of the shop. The beautiful interior and unique selection of illustrated books makes it very hard to leave their shop. Tinta nos Nervos also serves as a platform to promote the work of illustrators and organises all kinds of the events for the community — workshops, book launches, exhibitions…
In their words: “Tinta dos Nervos is not only a bookshop, a gallery, an author’s object shop, a café. We are all that and more. The place for Drawing, Illustration, Comics and Graphic Arts.”
However, the user interface and user experience of their website could be greatly improved. So we approached them with our proposal of redesiging their e-commerce experience and they accepted the collaboration.
Design process
The first step in our whole design process was to have an interview with one of the stakeholders.
The interview enabled us to understand a lot about the business: their values, their goals, their vision, the kinds of products they sell, their types of customers, the competitors…
After that, we spoke directly to the user — the customer who buys this kind of books to understand his wants and needs.
We asked the user to navigate through the website and understood that the user experience online could be significantly improved. The current website lacks hierarchy, displays duplicated content and is difficult to identify as an e-commerce website.
In the empathise stage of our design process, we also led several online surveys and questionnaires with the user.
Inês, our user persona.
The information gathered led us to create a user persona: Inês. She is a Software Engineer and devoted mother of two young children. She lives in Porto, Portugal. Inês loves graphic books, comics and other unique books from all over the world. Reading is also an important part in the upbringing of her children. Because of her busy schedule, she needs an online shop to purchase the books she likes for her and her children, while still supporting local commerce.
Both the data we gathered from the user along with the information from the stakeholder completely guided our design.
We were then able to define that Tinta nos Nervos customers needs a better structured e-commerce website because they need to easily find and purchase products they want.
One of our main challenges throughout this project was to reorganise the existing information. Most of it, could be either merged or removed. The point was to simplify the digital experience and diminish the cognitive load for the user.
For that purpose, we created site maps — of the current website and of our design- and task flows.
Task flow demonstrating the process of the user searching for a product and adding it to the basket
After that, each of us started sketching individually, remotely. We then presented to each other our lo-fi prototypes. The team then combined the best elements of each lo-fi prototype in one.
The stage that followed that was the creation of mid-fi protoypes, created digitally. On this stage, we led several usability tests, in order to understand if the user could achieve is main goal: to find a book and purchase it.
After a few tweaks, we were able to find the right mid-fi prototype and we advanced to the high-fi prototyping.
Prototype
We designed a website that represented the essence of Tinta nos Nervos, where illustration took the central stage. Illustrations are all scattered throughout the website, promoting the artists beautiful work.
In terms of typography, we chose a more classy, serif font for the headlines, contrasting with a sans-serif, modern and readable for body copy.
We strived for a clean, functional design, with neutral colors that let the books shine to catch the users attention.
Some screenshots of our high-fi protoypes. The information is fictional and user for demonstration purposes only.
Conclusion
Once again, team collaboration and proper task delegation was fundamental in this process.
At every stage, research both with the stakeholder and the user should be done and inform the design for the next stages.
In our extremely digitalized world, it is also important for businesses to offer customers the best online shopping experience possible. That’s where design can make the whole difference. It is the image of a business and can set it apart, no matter the size.