UX design
Chronicle Books
scroll ↓
Overview
A fictional website redesign of chroniclebooks.com focusing on giving a critical shopper a sufficient amount of information. The user I designed for was the Careful Critic who values quality above all and needs efficient information to make a purchase.
My role
UX Designer : Information Architecture, Competitive Analysis, Feature Prioritization, Sketching, Wireframing, Screen Flows, Responsive Design, Strategy
Team
2 week-long individual project. Some early research was done collaboratively with 3 other UX designers.
Discover
They need more
Research provided showed that the Careful Critic was not receiving the product information they needed to make a purchase on chroniclebooks.com, decreasing their motivation to complete a transaction.
empathy map
user journey map
Quality > Quantity
In the Careful Critic’s journey, we observed as they searched for a graduation gift for their nephew. They began on the home page where they were underwhelmed with the amount of product information on the site but they decide to dive deeper.
Define & refine
Let’s break it down
Based on the findings in my competitive analysis, I identified areas of improvement for the Chronicle Books website: (1) Reorganize the existing content (2) Diversify information sources
competitive analysis
Give them information
My solution was rooted in strategically redistributing information and features. (1) Showcase ample product information directly on the home page. (2) Add an interactive customer comments section on the product detail pages.
Based on the user research, I believe this solution will ultimately lead to an increase in transactions on the website.
Simple > Complex
None of my designs would have worked if I hadn’t started with a content inventory. Doing so, allowed me to view all necessary website content in one place which made designing a new content strategy and information architecture an exercise in modularity.
proposed vs. current sitemap
My proposed navigation focuses on reducing cognitive load.
(1) Simplified browsing (2) Decluttered the mega menu by removing distracting symbols (3) Removed duplicate information across different levels of navigation (4) Consolidated the login button and account button
Deliver
Here’s how I did it
I started with sketches and moved to wireframes, at which point I did initial usability testing. Early results showed: (1) Easy to find product information. (2) Quick navigation. (3) Intuitive comments section.
Splashy and more informative
These findings informed my next iteration. (1) Reduced clutter on the top navigation menu. (2) Added more immediate access to product information.
homepage before and after
Focused browsing
(1) Reduced Clutter by removing the second navigation menu and redundant information. (2) Added more product information.
Category page before and after
Upfront information
(1) Reorganized all information to the right side of the screen to get rid of the hunt for information. This way the user has all they need from top to bottom. (2) Added a comments section to engage the community and give the opportunity to view customer curated information along with the product information.
product page before and after
Needs adjusting
Although the initial usability testing showed positive results, we determined the left-side navigation menu could use some improvement in reducing redundant and cluttered content.
category page versions 1, 2, and 3
Conclude
What worked
In the initial usability testing, we found that users were able to easily complete their given tasks. The following were proven true. (1) Simplifying the layout of the top navigation menu reduced time on task. (2) The minimal design made navigation clear for the users.
Future considerations
Keeping in mind the focus of this redesign, here are some things that are yet to be implemented but would positively impact the Careful Critic’s shopping. (1) Reorganize the Chronicle Books blog page. (2) Add the ability to go back to the home page from the blog page. (3) Add more pictures of the products to increase the aesthetic appeal and the amount of visual information for the user. (4) Set up tag-based rules to support a stronger related products section on each product page.