A persona representing real users helped me to focus on the user goals and needs. I was able to better understand the world of my user to come up with a definitive problem and a solution.
User Pain Points
Our user loves stores like The Last Bookstore, but sometimes doesn’t have the time to go in person. The online shopping experiences are often hard to navigate or non-existent.
I used this method to compare other e-commerce websites in the market. The analysis helped me to come up with the most important features to add and change on the existing site.
As I studied the different layout designs, it becomes clear which would be the starting point of the information architecture and wireframing process for the new version — a simpler navigation and more meaningful interactions.
Once I understood user behaviors, I defined the project scope based on needs and research results:
Branding: Establishing The Identity
Visually, key observations from the store included:
– Natural textures.
– Pops of bright color.
– Illustrations and graphics.
– Friendly and warm.
Low Fidelity Wireframes
To improve the overall experience, when looking for a book, an easy and accessible search system will show up at all times, providing results filtered by books or authors.
The user can discover new books by browsing through related content, which improves a reader’s experience and allows them to ultimately create their own wish lists.
Product Mockup Screens
After the several rounds of user testing on the lo-fi wireframes I created the final visual design of the website.
I emulated the look and feel of The Last Bookstore by using the brand’s colors, focusing on clean and easy to navigate interface, enhancing what is most important: the books.
Minimal Performance Load
An emphasis was placed on minimizing the amount of effort required to complete a task and improve system efficiency. For example, it is possible to quick-read, add to cart, like, and check price directly from the same page.
Error messages have been designed to clearly communicate what went wrong and how to recover from it. Use of conversational language reduces frustration by taking the blame away from users.
User testing with a clickable prototype helped identify user frustrations to address how to improve the page designs, navigation and flow. Here is some of the feedback and observations received from user testing:
– He did not know how many items he added to the cart.
– She had a hard time finding about books she browsed and wanted to keep an eye on.
A video of the digital prototype of The Last Bookstore website redesigns built in Invision.
A next step would be to conduct more research on how people use the website, and how the interface should change based on their behaviors.
Business Pivot: Moving Into Mobile Platforms
To change is to grow. As The Last Bookstore is scaling, they may face a lot of challenges. With people switching to mobile devices and apps, it became increasingly important to prioritize development efforts and focus on strong points. As a result, a mobile app should be considered.