Books & Books
BackOverview
Background
Books & Books is a locally-owned, independent bookstore and café. Due to COVID-19, they have been forced to rely on virtual events and online sales. They are looking to redesign their website in order to remain competitive, profitable, and keep their literary community engaged.
Objectives
Redesign the Books & Books website in a modern, user-friendly way that also stays true to the brand; Restructure site information and content
My role
Research, UX, UI
Scope
156 hours
Self-started project
Research
Competitive Analysis
I analyzed the UI and features of competitor websites in order to gain a better understanding of industry standards. I then compared these to the Books & Books website.
Usability Testing
Using the existing Books & Books website, I conducted usability tests on 4 Miami locals in order to analyze its strengths, weaknesses, and pain points. This helped me understand what users need and desire in bookseller websites.
1. COVID-19 caused participants to rely more on online shopping.
2. There were many complaints about disorganization and visual design (fonts, colors, etc.).
3. Participants exhibited confusion and hesitation around locating information and navigating the site (information overload).
4. It was not obvious that the store sold books online, and participants had difficulties locating books they wanted.
.jpg)
Persona
Based on my research, I created a persona that is reflective of the typical Books & Books customer.
Information Architecture
Sitemap
I built a sitemap in order to unravel the information and content on the current Books & Books website.
Before
.png)
I found that there was a lot of unnecessary and confusing information, as well as several inconsistencies across the design.
After
After analyzing the existing information architecture, I prioritized, simplified, and restructured the information to create a sitemap for the new site.
.png)
Interaction Design
User Flow
Based on my user research findings and persona, I decided to focus on the book checkout and event registration flows because they seemed to be the most marketable and desired aspects of the Books & Books website.
Wireframes
I then came up with annotated wireframes for the homepage and books pages.
For the events pages, I used a Wordpress events calendar plugin, which I modified to suit the goals and aesthetics of the new Books & Books site.
UI Design
Responsive UI
To ensure the website was resilient across devices, I designed the homepage in both a desktop and mobile view.
Key Task Flow UI
The following are the designs for the book checkout flow and the event registration flow.
Usability Testing
To evaluate the efficacy of the homepage and application process, I conducted usability tests on 4 participants.
Other than minor concerns about readability of buttons, the usability testing was successful.
.jpg)
Final Version
Next Steps
- Design remaining pages
- Test conversion rate on old website vs. new website
Responsive space travel website
View Project