Books & Books
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 to remain competitive, and profitable,
and keep their literary community engaged.
My role
Research, UX, UI
Objectives
Redesign the Books & Books website in a modern, user-friendly way that also stays true to the brand; Restructure site information and content
Scope
156 hours Self-started project
Research
I analyzed the UI and features of competitor websites to gain a better understanding of industry standards. I then compared these to the Books & Books website.
Competitive Analysis
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.
COVID-19 caused participants to rely more on online shopping.
There were many complaints about disorganization and visual design (fonts, colors, etc.).
Participants exhibited confusion and hesitation around locating information and navigating the site (information overload).
It was not obvious that the store sold books online, and participants had difficulties locating the books they wanted.
Usability Testing
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
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.
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 the readability of buttons, the usability testing was successful.
Final Version
Next Steps
Design remaining pages
Test conversion rate on old website vs. a new website