COMPETITIVE RESEARCH
Features
Client
Now Serving
Direct Competitor #1
Barnes & Nobles
Direct Competitor #2
Thriftbooks
Navigation
Layout
Visual Aesthetic
Recommendations
New In
Sales
Shop By Categories
Trending
Filters
Reviews
Detailed Description
Photos/Preview
Fast Checkout
Secure Payment
About Us
Design
Home Page
Product Listing
Checkout
Etc
✓
❌
❌
✓
✓
✓
✓
❌
❌
❌
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
❌
❌
❌
❌
❌
❌
✓
❌
✓
❌
❌
❌
✓
❌
❌
❌
❌
✓
❌
I analyzed other e-commerce websites with strong user experiences. Here’s what they offered that Now Serving’s site lacked:
1
Customer Reviews
2
Multiple Images and Previews
3
Product Specifications
I performed a heuristics evaluation to identify pain points in the current design. The key issues
included:
HEURISTICS EVALUATION
Consistency and Standards- Right off the bat, users might be confused about the purpose of this website
Aesthetic and Minimalistic Design- The home page should offer information that steers customers towards products they would want
A. Observation Notes
B. Hueristic Violation
C. Severity Rating
D. Recommendation
Homepage does not really tell me what I can expect from this site
Homepage is doesn’t have much content besides book covers. There are not many words
When I pressed "Shop" it took me to a page with different "collections" but the categories seemed random
On "Shop", I also see categories for different percentages of "Summer Sales". I clicked on most but they have no products on the page.
I want to buy a book so I hovered over "Read", but again has too many subcategories to choose from.
For product listing, I can't see all details e.g. dimensions, cover type, etc.
I clicked on the top box to add my address. As a test, I put in the wrong address but it still accepted it.
During checkout I can still see my cart pop up and remove items from there. However, it doesn't update my order summary.
Efficiency- Customers might have a hard time finding books because of this
Error Handling- This will be confusing to users if they click on a page and it is blank
Efficiency- If there are too many choices, it will be hard to find the category
Match Between System and Real World- Users should be able to know as much information as if they were buying the book in store
Error Prevention- Sending a package to the wrong address is a big problem!
Visibility of System Status- Visibility of System Status- Updates should always be consistent with the changes that are being made
Put some sort of message or indicator telling visitors what they should expect on the site
Design is TOO minimal especially for a homepage.There shoud be more context. We can also add more categories for users to browse from, not just "newly released"
Put some sort of filter option or allow users to search within this section. Can also add clearer categories
Put the all of the "Summer Sales" into one category and maybe on a different page
Some categories can be grouped into further subcategories
Make sure to include necessary information so that user can have same info as if they are browsing in physical store.
Either have address suggestions as user is typing or have some way to validate correct address
Make sure everything is showing as updated as changes are being made by the user so that there is no confusion.
This made it hard for users to browse and discover cookbooks of interest, making navigation a frustrating and overwhelming experience for users, ultimately causing them to lack confidence in their ability to explore the site effectively.
Unclear Categorization
This design failed to provide sufficient information about the products, prompting users to seek additional details on other websites, even at times might lead users to abandon the site entirely and turn to other websites to complete their purchases.
Minimalist Design
The lack of intuitive design and clear guidance led to delays, errors, and abandoned carts. At this critical step, users often felt the site was unreliable, which discouraged them from completing their purchase and undermined their confidence in the platform.
Confusing Checkout Flow
SITE EVALUATION
During the site evaluation, I identified several issues with the navigation and product listing page:
The navigation featured over 40 individual sections in one area, making it overwhelming for users. Many of these sections seemed redundant or could have been grouped together for better organization. Users had to scroll excessively to view all the options, which negatively impacted their browsing experience.
Too many categories, most of them can be grouped together
The site navigation was overcrowded
There was only a single image of each book and no detailed descriptions or user reviews to inform purchasing decisions. Additionally, there was a persistent loading circle on some pages, which created frustration as content failed to load properly. These issues significantly hindered the user experience and contributed to user abandonment of the site.
Only one picture of book,
just the cover photo
No context of book besides
the synopsis
The product detail page was too minimal
PROBLEM STATEMENT
Leah needs a way to see details about the quality of a cookbook’s content on recipes of cuisines that she has not yet tried because she wants to feel informed enough to find recipes that reflect what she enjoys about cooking so she can build a deeper connection with her audience as try out new dishes together.
LEAH- The Mindful Browser
Leah is a cooking blogger who loves sharing her passion for food with her audience. She enjoys cooking a variety of cuisines around the world. For her blog each month, Leah focuses on one cookbook and makes weekly recipes from it.
Age: 31
Location: Los Angeles, CA
Occupation: Cooking Blogger
To discover new and unique cookbooks to share with her audience
To have a collection of pretty cookbooks on display
GOALS
To be able to see reliable reviews of cookbooks that she is interested in purchasing
To be able to see detailed information about her cookbook to give her a similar experience as if she were browsing in store.
Online book shopping experience does not compare to browsing in store
NEEDS
FRUSTRATIONS
To personify our findings, I created a user persona: Leah, a cooking blogger.
USER PERSONA
The research identified that users felt a gap between the in-store experience of browsing a book’s content and the limited information available online. This shaped the direction of the redesign to prioritize access to reviews, detailed descriptions, and visual previews.
KEY INSIGHT
I began with a research phase focusing on book-purchasing habits, motivations, and user frustrations. Through interviews, I learned that most potential users:
USER RESEARCH
Value Recommendations
Want Reliable Reviews
Browse Mindfully
RESEARCH
The redesign focused on improving the user experience by introducing a detailed product description page, enhanced global navigation, and a redesigned homepage with categories to guide customers to relevant products. Key additions included multiple images, customer reviews, previews, and product specifications to enable more informed decisions.
MY ROLE
OUTCOME
The redesign focused on improving the user experience by introducing a detailed product description page, enhanced global navigation, and a redesigned homepage with categories to guide customers to relevant products. Key additions included multiple images, customer reviews, previews, and product specifications to enable more informed decisions.
TIMELINE
3 Week Sprint
TEAM
Solo Project
ROLE
UX Research, UX Design
TOOLS
Figma/Figjam, G-Suite
PROJECT OVERVIEW
Now Serving is a cookbook and culinary shop in Los Angeles, California, offering a curated selection of cookbooks from around the world. The project aimed to redesign their website to serve “mindful browsers” who research extensively before making a purchase. This case study showcases the design journey I undertook to create a more engaging, informative, and user-friendly online shopping experience for Now Serving’s customers
OBJECTIVE
The primary goal was to address the minimalism of the original website, which hindered users’ ability to access the detailed information necessary for confident purchasing decisions. I sought to create an online experience that mirrors in-store browsing, empowering users with comprehensive product details.
Now Serving eCommerce Website Redesign
IDEATION
CHECKOUT
PRODUCT DESCRIPTION
HOME PAGE
VIEW CART
PRODUCT LISTING
SKETCHES
Here are the sketches I made based on the user flow above.
USER FLOW
Task: Checking out a French Pastry Cookbook on Now Serving.
Home
Do you have a
book in mind?
YES
YES
NO
NO
Select Book
Product Listing
Does this match your preference?
Done w/purchase?
Go to Cart
Checkout
Confirmation Page
Add to Cart
Browse w/ Search Bar
Browse by Categories
CARD SORTING
To address the issue of unclear categorization, particularly within the navigation categories identified during the site evaluation, I gathered all the existing categories and conducted a card sorting exercise. This approach allowed me to understand how users naturally group and organize information, providing valuable insights to create a more intuitive and simplified navigation system.
SITE MAP
Using the categories derived from the card sorting exercise and insights from my research, I created a site map to establish a clear blueprint for the site. This structure was designed to make it easier for users to navigate and find cookbooks of interest intuitively, while also encouraging them to discover new titles seamlessly.
TESTING
USABILITY TEST PLAN
To validate the design, I conducted usability testing, gathering feedback that informed further refinements. Test participants interacted with the prototype, focusing on ease of navigation and the clarity of product information. I had the participants follow the user flow task which was the check out a French pastry cookbook.
RESULTS
Based on the result of this test, here were some of the findings. I used these findings and implemented them into the final design. Because this was a 3 week sprint, I decided to focus on finalizing the home page, product listing page, and product detail page.
Learnability: Users were not able to accurately tell me what this website offers Learnability
Learnability, Efficiency: Users were confused about the categorization of books on the top
Efficiency, Satisfaction: Users were expecting to see more images of the book which leads to difficulty in assessing quality
Efficiency, Satisfaction: Users said they don’t really look at product specifications when looking to purchase a book
Efficiency, Satisfaction, Consistency and Standards: Users wanted to see if they could purchase similar books
Visibility of System Status: Users wanted to know what step of the checkout process they are on
Efficiency, Satisfaction: Users wanted a simple way to check out instead of clicking through all the steps
Screen
Violation(s)
Solution
Home Page
Product Details
Check Out (Final Step)
Change up wording of categories/subcategories and include clear brand statement or photo to indicate what the website offers. This will entice users to delve deeper into the site and allow them to explore new and exciting cookbooks.
More images and context of book to help lead users in making informed decisions and allow them to compare books on the site to be confident about their purchases
Prioritization of info (product specifications can be made smaller)
Make checkout flow horizontal rather than vertical and making headings of each process step clear.
VISUAL DESIGN
To guide the visual design, I created a mood board inspired by the following keywords: wood counter/bookshelf, open kitchen concept, people coming together, food as a universal language, and building community through shared meals. These ideas informed the design's aesthetic, emphasizing simplicity, openness, and a natural feel that evokes warmth and connection.
I used a muted mauve color palette to align with the brand’s original color scheme while reinforcing a sense of calm and unity. This approach ensured the design stayed true to the brand’s identity while enhancing its appeal and usability for a diverse audience.
MOOD BOARD
FINAL DESIGN
#f1c6bb
#62161b
#e9ebef
Brand Colors
Tones/Textures
This is the final design for the product description page. I also redesigned the product listing and homepage design as well, ensuring a cohesive and user-friendly experience across the site. You can explore the final prototype by clicking the link below.
Visual Content Builds Trust
High-quality photos (covers, sample pages) help users evaluate a product and feel confident about their purchase.
Clear Organization
Improves Navigation
Categorizing by cuisine, themes, and cooking styles helps users explore and discover cookbooks easily.
Highlighting curated collections or unique cookbooks invites users to discover new favorites.
OUTCOMES
The final design successfully addressed the core issues of the original site, providing users with an enhanced cookbook discovery experience through comprehensive product information and an improved navigation system. The redesigned site now offers users enough information to make confident purchasing decisions, with detailed product pages and easy navigation.
Although I focused on enhancing the product pages, which significantly contribute to improving the user experience on the site, there are still additional features I can implement to further elevate the website and improve cookbook discovery. Some ideas to enhance the experience include:
Personalization Features
Enhanced Product Pages
GOALS ACHIEVED
KEY TAKEAWAYS
FUTURE IMPROVEMENTS
Add interactive previews of cookbooks, such as flip-through features or video previews of sample pages.
Integrate recipe excerpts or 'look inside' options to give users a deeper sense of the book's content.
Include user-generated content like photos or testimonials from customers who tried the recipes.
Offer custom recommendations based on user preferences, browsing behavior, or past purchases.
Create wishlists or save-for-later features for books users might want to revisit.
Add a 'You May Also Like' section to encourage exploration and cross-selling."
View More Work
Menu
COMPETITIVE RESEARCH
Link to Full Competitive Analysis
Features
Client
Now Serving
Direct Competitor #1
Barnes & Nobles
Direct Competitor #2
Thriftbooks
Navigation
Layout
Visual Aesthetic
Recommendations
New In
Sales
Shop By Categories
Trending
Filters
Reviews
Detailed Description
Photos/Preview
Fast Checkout
Secure Payment
About Us
Design
Home Page
Product Listing
Checkout
Etc
✓
❌
❌
✓
✓
✓
✓
❌
❌
❌
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
❌
❌
❌
❌
❌
❌
✓
❌
✓
❌
❌
❌
✓
❌
❌
❌
❌
✓
❌
I analyzed other e-commerce websites with strong user experiences. Here’s what they offered that Now Serving’s site lacked:
1
Customer Reviews
2
Multiple Images and Previews
3
Product Specifications
Link to full Heuristics Evaluation
I performed a heuristics evaluation to identify pain points in the current design. The key issues
included:
HEURISTICS EVALUATION
Consistency and Standards- Right off the bat, users might be confused about the purpose of this website
Aesthetic and Minimalistic Design- The home page should offer information that steers customers towards products they would want
A. Observation Notes
B. Hueristic Violation
C. Severity Rating
D. Recommendation
Homepage does not really tell me what I can expect from this site
Homepage is doesn’t have much content besides book covers. There are not many words
When I pressed "Shop" it took me to a page with different "collections" but the categories seemed random
On "Shop", I also see categories for different percentages of "Summer Sales". I clicked on most but they have no products on the page.
I want to buy a book so I hovered over "Read", but again has too many subcategories to choose from.
For product listing, I can't see all details e.g. dimensions, cover type, etc.
I clicked on the top box to add my address. As a test, I put in the wrong address but it still accepted it.
During checkout I can still see my cart pop up and remove items from there. However, it doesn't update my order summary.
Efficiency- Customers might have a hard time finding books because of this
Error Handling- This will be confusing to users if they click on a page and it is blank
Efficiency- If there are too many choices, it will be hard to find the category
Match Between System and Real World- Users should be able to know as much information as if they were buying the book in store
Error Prevention- Sending a package to the wrong address is a big problem!
Visibility of System Status- Visibility of System Status- Updates should always be consistent with the changes that are being made
Put some sort of message or indicator telling visitors what they should expect on the site
Design is TOO minimal especially for a homepage.There shoud be more context. We can also add more categories for users to browse from, not just "newly released"
Put some sort of filter option or allow users to search within this section. Can also add clearer categories
Put the all of the "Summer Sales" into one category and maybe on a different page
Some categories can be grouped into further subcategories
Make sure to include necessary information so that user can have same info as if they are browsing in physical store.
Either have address suggestions as user is typing or have some way to validate correct address
Make sure everything is showing as updated as changes are being made by the user so that there is no confusion.
This made it hard for users to browse and discover cookbooks of interest, making navigation a frustrating and overwhelming experience for users, ultimately causing them to lack confidence in their ability to explore the site effectively.
Unclear Categorization
This design failed to provide sufficient information about the products, prompting users to seek additional details on other websites, even at times might lead users to abandon the site entirely and turn to other websites to complete their purchases.
Minimalist Design
The lack of intuitive design and clear guidance led to delays, errors, and abandoned carts. At this critical step, users often felt the site was unreliable, which discouraged them from completing their purchase and undermined their confidence in the platform.
Confusing Checkout Flow
SITE EVALUATION
During the site evaluation, I identified several issues with the navigation and product listing page:
The navigation featured over 40 individual sections in one area, making it overwhelming for users. Many of these sections seemed redundant or could have been grouped together for better organization. Users had to scroll excessively to view all the options, which negatively impacted their browsing experience.
Too many categories, most of them can be grouped together
The site navigation was overcrowded
There was only a single image of each book and no detailed descriptions or user reviews to inform purchasing decisions. Additionally, there was a persistent loading circle on some pages, which created frustration as content failed to load properly. These issues significantly hindered the user experience and contributed to user abandonment of the site.
Only one picture of book,
just the cover photo
No context of book besides
the synopsis
The product detail page was too minimal
PROBLEM STATEMENT
Leah needs a way to see details about the quality of a cookbook’s content on recipes of cuisines that she has not yet tried because she wants to feel informed enough to find recipes that reflect what she enjoys about cooking so she can build a deeper connection with her audience as try out new dishes together.
LEAH- The Mindful Browser
Leah is a cooking blogger who loves sharing her passion for food with her audience. She enjoys cooking a variety of cuisines around the world. For her blog each month, Leah focuses on one cookbook and makes weekly recipes from it.
Age: 31
Location: Los Angeles, CA
Occupation: Cooking Blogger
To discover new and unique cookbooks to share with her audience
To have a collection of pretty cookbooks on display
GOALS
To be able to see reliable reviews of cookbooks that she is interested in purchasing
To be able to see detailed information about her cookbook to give her a similar experience as if she were browsing in store.
Online book shopping experience does not compare to browsing in store
NEEDS
FRUSTRATIONS
To personify our findings, I created a user persona: Leah, a cooking blogger.
USER PERSONA
The research identified that users felt a gap between the in-store experience of browsing a book’s content and the limited information available online. This shaped the direction of the redesign to prioritize access to reviews, detailed descriptions, and visual previews.
KEY INSIGHT
I began with a research phase focusing on book-purchasing habits, motivations, and user frustrations. Through interviews, I learned that most potential users:
USER RESEARCH
Value Recommendations
Want Reliable Reviews
Browse Mindfully
RESEARCH
The redesign focused on improving the user experience by introducing a detailed product description page, enhanced global navigation, and a redesigned homepage with categories to guide customers to relevant products. Key additions included multiple images, customer reviews, previews, and product specifications to enable more informed decisions.
MY ROLE
OUTCOME
The redesign focused on improving the user experience by introducing a detailed product description page, enhanced global navigation, and a redesigned homepage with categories to guide customers to relevant products. Key additions included multiple images, customer reviews, previews, and product specifications to enable more informed decisions.
TIMELINE
3 Week Sprint
TEAM
Solo Project
ROLE
UX Research, UX Design
TOOLS
Figma/Figjam, G-Suite
PROJECT OVERVIEW
Now Serving is a cookbook and culinary shop in Los Angeles, California, offering a curated selection of cookbooks from around the world. The project aimed to redesign their website to serve “mindful browsers” who research extensively before making a purchase. This case study showcases the design journey I undertook to create a more engaging, informative, and user-friendly online shopping experience for Now Serving’s customers
OBJECTIVE
The primary goal was to address the minimalism of the original website, which hindered users’ ability to access the detailed information necessary for confident purchasing decisions. I sought to create an online experience that mirrors in-store browsing, empowering users with comprehensive product details.
Now Serving eCommerce Website Redesign
IDEATION
CHECKOUT
PRODUCT DESCRIPTION
HOME PAGE
VIEW CART
PRODUCT LISTING
SKETCHES
Here are the sketches I made based on the user flow above.
USER FLOW
Task: Checking out a French Pastry Cookbook on Now Serving.
Home
Do you have a
book in mind?
YES
YES
NO
NO
Select Book
Product Listing
Does this match your preference?
Done w/purchase?
Go to Cart
Checkout
Confirmation Page
Add to Cart
Browse w/ Search Bar
Browse by Categories
CARD SORTING
Link to full Card Sort
To address the issue of unclear categorization, particularly within the navigation categories identified during the site evaluation, I gathered all the existing categories and conducted a card sorting exercise. This approach allowed me to understand how users naturally group and organize information, providing valuable insights to create a more intuitive and simplified navigation system.
Link to Site Map
SITE MAP
Using the categories derived from the card sorting exercise and insights from my research, I created a site map to establish a clear blueprint for the site. This structure was designed to make it easier for users to navigate and find cookbooks of interest intuitively, while also encouraging them to discover new titles seamlessly.
TESTING
USABILITY TEST PLAN
To validate the design, I conducted usability testing, gathering feedback that informed further refinements. Test participants interacted with the prototype, focusing on ease of navigation and the clarity of product information. I had the participants follow the user flow task which was the check out a French pastry cookbook.
RESULTS
Based on the result of this test, here were some of the findings. I used these findings and implemented them into the final design. Because this was a 3 week sprint, I decided to focus on finalizing the home page, product listing page, and product detail page.
Learnability: Users were not able to accurately tell me what this website offers Learnability
Learnability, Efficiency: Users were confused about the categorization of books on the top
Efficiency, Satisfaction: Users were expecting to see more images of the book which leads to difficulty in assessing quality
Efficiency, Satisfaction: Users said they don’t really look at product specifications when looking to purchase a book
Efficiency, Satisfaction, Consistency and Standards: Users wanted to see if they could purchase similar books
Visibility of System Status: Users wanted to know what step of the checkout process they are on
Efficiency, Satisfaction: Users wanted a simple way to check out instead of clicking through all the steps
Screen
Violation(s)
Solution
Home Page
Product Details
Check Out (Final Step)
Change up wording of categories/subcategories and include clear brand statement or photo to indicate what the website offers. This will entice users to delve deeper into the site and allow them to explore new and exciting cookbooks.
More images and context of book to help lead users in making informed decisions and allow them to compare books on the site to be confident about their purchases
Prioritization of info (product specifications can be made smaller)
Make checkout flow horizontal rather than vertical and making headings of each process step clear.
VISUAL DESIGN
To guide the visual design, I created a mood board inspired by the following keywords: wood counter/bookshelf, open kitchen concept, people coming together, food as a universal language, and building community through shared meals. These ideas informed the design's aesthetic, emphasizing simplicity, openness, and a natural feel that evokes warmth and connection.
I used a muted mauve color palette to align with the brand’s original color scheme while reinforcing a sense of calm and unity. This approach ensured the design stayed true to the brand’s identity while enhancing its appeal and usability for a diverse audience.
MOOD BOARD
FINAL DESIGN
#f1c6bb
#62161b
#e9ebef
Brand Colors
Tones/Textures
This is the final design for the product description page. I also redesigned the product listing and homepage design as well, ensuring a cohesive and user-friendly experience across the site. You can explore the final prototype by clicking the link below.
LINK TO FINAL PROTOTYPE
Visual Content Builds Trust
High-quality photos (covers, sample pages) help users evaluate a product and feel confident about their purchase.
Clear Organization
Improves Navigation
Categorizing by cuisine, themes, and cooking styles helps users explore and discover cookbooks easily.
Highlighting curated collections or unique cookbooks invites users to discover new favorites.
OUTCOMES
The final design successfully addressed the core issues of the original site, providing users with an enhanced cookbook discovery experience through comprehensive product information and an improved navigation system. The redesigned site now offers users enough information to make confident purchasing decisions, with detailed product pages and easy navigation.
Although I focused on enhancing the product pages, which significantly contribute to improving the user experience on the site, there are still additional features I can implement to further elevate the website and improve cookbook discovery. Some ideas to enhance the experience include:
Personalization Features
Enhanced Product Pages
GOALS ACHIEVED
KEY TAKEAWAYS
FUTURE IMPROVEMENTS
Add interactive previews of cookbooks, such as flip-through features or video previews of sample pages.
Integrate recipe excerpts or 'look inside' options to give users a deeper sense of the book's content.
Include user-generated content like photos or testimonials from customers who tried the recipes.
Offer custom recommendations based on user preferences, browsing behavior, or past purchases.
Create wishlists or save-for-later features for books users might want to revisit.
Add a 'You May Also Like' section to encourage exploration and cross-selling."
chokathleen97@gmail.com
© Kathleen Cho 2024
chokathleen97@gmail.com
© Kathleen Cho 2024