Blossoms Bookhouse
Team:
My Role:
Type:
Duration:
Tools:
Self
UX Research, Interface Design, Prototyping
Client Project ; Blossoms Bookhouse
4 weeks.
Adobe Illustrator, Adobe Photoshop, Adobe XD
Objective
Redesign the website for Blossom Book House, an established bookstore in Bangalore known for its curated collection and unique business model. The goal was to create a responsive website that not only reflects the brand identity but also enhances the user experience by introducing streamlined user flows for both guest and member interactions. Additionally, the design incorporated Blossom's exclusive "Return and Get 50% Off" model, making it fully accessible online.
Existing Website Review
In reviewing the current Blossom Book House website, I identified multiple areas for improvement to better reflect its brand identity and optimize the user experience:
Lack of Branding and Visual Identity:
The site uses a generic e-commerce template that limits branding opportunities. With no unique colors, typography, or layout, it feels disconnected from the distinctive identity of this well-known bookstore.
The site uses a generic e-commerce template that limits branding opportunities. With no unique colors, typography, or layout, it feels disconnected from the distinctive identity of this well-known bookstore.
Information Gaps:
Only the title and author’s name are shown with each book cover, leaving out essential details like genre, description, and author background. These additions would support users who wish to explore books before purchasing.
Only the title and author’s name are shown with each book cover, leaving out essential details like genre, description, and author background. These additions would support users who wish to explore books before purchasing.
Browsing Experience:
The product page lacks features to display related books by genre, theme, or author, resulting in “dead ends” where users can only return to the main page. This disrupts browsing continuity, adding unnecessary loading and cognitive strain.
The product page lacks features to display related books by genre, theme, or author, resulting in “dead ends” where users can only return to the main page. This disrupts browsing continuity, adding unnecessary loading and cognitive strain.
Competitive Analysis
I conducted a competitive audit of similar bookstores in Bangalore, as well as larger online retailers, to benchmark features and gain insights.
Using a detailed checklist, I evaluated key aspects such as competitor type, locations, product offerings, business size, target audience, unique value propositions, first impressions on both desktop and mobile, interaction flow, key features, navigation, brand identity, and content tone.
This analysis helped me identify strengths and gaps in competitor designs, guiding my approach to enhance usability and align with Blossom Book House's unique brand in my redesign.
Using a detailed checklist, I evaluated key aspects such as competitor type, locations, product offerings, business size, target audience, unique value propositions, first impressions on both desktop and mobile, interaction flow, key features, navigation, brand identity, and content tone.
This analysis helped me identify strengths and gaps in competitor designs, guiding my approach to enhance usability and align with Blossom Book House's unique brand in my redesign.
- Local Competitors: Champaca Bookstore’s branding and Sapna Book House’s diverse offerings inspired sections like events, gift boxes, and curated collections.
- Direct and Indirect Competitors: Analysis of Books Wagon and Crossword emphasized the importance of personalized recommendations, easy navigation, and genre-based browsing.
User Interviews
Since this project was during COVID-19, I had limited chances to conduct in-person interviews with customers at Blossom Book House due to fewer visitors and understandable hesitancy toward interactions. Nonetheless, I’m grateful for the eight brief interviews I was able to conduct, which offered valuable insights.
Many customers emphasized the importance of physically exploring a book’s back cover and sample pages. They noted that current websites only offer cover images, which made it challenging to feel confident in their purchasing decisions without more in-depth information.
Many customers emphasized the importance of physically exploring a book’s back cover and sample pages. They noted that current websites only offer cover images, which made it challenging to feel confident in their purchasing decisions without more in-depth information.
The MyFive Membership
Blossom Book House has a unique business model that allows members to return any number of books from their purchase and receive a 50% discount on their next purchase, based on the amount of the returned book(s). For instance, if a member buys five books and returns one, their next purchase will have 50% off the value of the returned book.
To manage this system, I designed a “MyFive” dashboard, which displays the current five books in the customer’s account. The dashboard provides an interactive way for users to view, exchange, and track their books.
Additionally, a slide-in overlay version of “MyFive” is accessible throughout the site, allowing members to easily manage their books while browsing.
Additionally, a slide-in overlay version of “MyFive” is accessible throughout the site, allowing members to easily manage their books while browsing.
Additionally, a slide-in overlay version of “MyFive” is accessible throughout the site, allowing members to easily manage their books while browsing.
Design System
Final Design
- The brand identity was entirely derived from Blossom Book House's existing logo, which informed the overall design aesthetic. I introduced a complementary color to enhance all calls-to-action (CTAs) and interactive elements, ensuring a cohesive and visually appealing user experience.
- Pop-Up Information Cards: Clicking on a book reveals basic information in a pop-up, with an option to navigate to the product page or continue browsing.
- Additional Features:
Staff Picks & Curated Collections: A collection of featured books chosen by staff, allowing users to explore a diverse range of titles.
Gift Section: Curated gift boxes and gift certificates for personalized gifting experiences.
Event Listings: A dedicated section for author signings, book launches, and other community events to build brand loyalty.
- Each book page features essential details such as genre, a synopsis, author information, and reviews and ratings from the Blossom community (or Google reviews when community feedback is unavailable).
- Additionally, it includes a selection of related books to keep users engaged and encourage further exploration.