Savannah Comics
Savannah Comics
Savannah Comics Website Redesign
Redesigning the Savannah Comics website for a better online shopping experience for consumers
Redesigning the Savannah Comics website for a better online shopping experience for consumers
Redesigning the Savannah Comics website for a better online shopping experience for consumers
E-Commerce
Web Design
Savannah Comics is an e-commerce platform for comic book collectors, offering graphic novels, manga, and collectibles. However, the original site suffered from complex navigation, redundant categories, and low engagement. Our redesign focused on simplifying the structure, improving navigation, and enhancing product discoverability, resulting in a smoother user experience that encourages exploration and drives sales growth.
Overview
Overview
Overview
Timeline
Timeline
Timeline
2024 Winter Quarter 2024 (10 weeks)
2024 Winter Quarter 2024 (10 weeks)
2024 Winter Quarter 2024 (10 weeks)
What I Did
What I Did
What I Did
UX Research, Web Design, Wireframing, Prototyping
UX Research, Web Design, Wireframing, Prototyping
UX Research, Web Design, Wireframing, Prototyping
UX Design Team
UX Design Team
UX Design Team
3 additional UX design students
3 Additional UX Design Students
3 Additional UX Design Students
Tools I Used
Tools I Used
Tools I Used
Figma, FigJam
Figma, FigJam
Figma, FigJam
Summary
Summary
Summary
Problems
Customers found it difficult to navigate the website due to overlapping categories, hidden product details, and unclear page structure. At the same time, the comic shop faced low online engagement and missed opportunities to promote key events and boost sales.
Solution
We redesigned the site to streamline navigation and improve product discoverability for users, while also surfacing restock schedules, store policies, and promotional content—helping the business better serve its loyal fanbase and drive purchases.
We redesigned the site to streamline navigation and improve product discoverability for users, while also surfacing restock schedules, store policies, and promotional content—helping the business better serve its loyal fanbase and drive purchases.
We redesigned the site to streamline navigation and improve product discoverability for users, while also surfacing restock schedules, store policies, and promotional content—helping the business better serve its loyal fanbase and drive purchases.
HIGHLIGHTS
Home Page
The redesigned Home page features a comic-inspired layout with sections like Just In!, Publishers, Characters, and Recommendations for quick, easy navigation.
Series Listing Page
The Series Listing page allows users to browse by publishers, showcasing top series like Marvel first, followed by an A-Z index for easy navigation.
Product List / Product Detail Page
The Product List page offers "Add to Want List," Quick View, and filter/sort options for easy browsing. The Product Detail page highlights key information, features a clear red CTA button, and recommends related books to enhance the user experience.
HIGHLIGHTS
Home Page
The redesigned Home page features a comic-inspired layout with sections like Just In!, Publishers, Characters, and Recommendations for quick, easy navigation.
Series Listing Page
The Series Listing page allows users to browse by publishers, showcasing top series like Marvel first, followed by an A-Z index for easy navigation.
Product List / Product Detail Page
The Product List page offers "Add to Want List," Quick View, and filter/sort options for easy browsing. The Product Detail page highlights key information, features a clear red CTA button, and recommends related books to enhance the user experience.
Home Page
Home Page
Home Page
The redesigned Home page features a comic-inspired layout with sections like Just In!, Publishers, Characters, and Recommendations for quick, easy navigation.
The redesigned Home page features a comic-inspired layout with sections like Just In!, Publishers, Characters, and Recommendations for quick, easy navigation.
Highlights
Highlights
Highlights
Series Listing Page
The Series Listing page allows users to browse by publishers, showcasing top series like Marvel first, followed by an A-Z index for easy navigation.
The Series Listing page allows users to browse by publishers, showcasing top series like Marvel first, followed by an A-Z index for easy navigation.
Product List / Product Detail Page
The Product List page offers "Add to Want List," Quick View, and filter/sort options for easy browsing. The Product Detail page highlights key information, features a clear red CTA button, and recommends related books to enhance the user experience.
The Product List page offers "Add to Want List," Quick View, and filter/sort options for easy browsing. The Product Detail page highlights key information, features a clear red CTA button, and recommends related books to enhance the user experience.
PROCESS
Design Process
Design Process
Problems
Analyze the Current Website
The current Savannah Comics Store website lacks visual appeal, features repetitive and confusing product categories, and makes it difficult for users to find the information they need. Additionally, some store events are poorly promoted, further diminishing user engagement and overall experience.
The current Savannah Comics Store website lacks visual appeal, features repetitive and confusing product categories, and makes it difficult for users to find the information they need. Additionally, some store events are poorly promoted, further diminishing user engagement and overall experience.
The current Savannah Comics Store website lacks visual appeal, features repetitive and confusing product categories, and makes it difficult for users to find the information they need. Additionally, some store events are poorly promoted, further diminishing user engagement and overall experience.
Key metrics
Measuring Success Through User Engagement and Behavior
Measuring Success Through User Engagement and Behavior
User Visit Duration
Measures how long users stay on the website.
Purchase Behavior
Tracks the number and value of purchases.
Repeat Visits
Indicates user satisfaction and loyalty.
Target Audience
Key Insights That Shaped Our Target Audience
Key Insights That Shaped Our Target Audience
Age
The comic reader base primarily consists of Young adults aged 18 to 35, indicating a target demographic for marketing and content creation.
Gender
Research indicates that Males are nearly twice as likely to be comic book fans as females.
Consumer Behavior
A mix of digital and physical browsing habits, with a clear preference for purchasing Physical Books over e-books.
Purchase Purpose
The bookstore focuses on Collectors who value rarity and condition over casual reading.
Age
The comic reader base primarily consists of Young adults aged 18 to 35, indicating a target demographic for marketing and content creation.
Gender
Research indicates that Males are nearly twice as likely to be comic book fans as females.
Gender
Research indicates that Males are nearly twice as likely to be comic book fans as females.
Consumer Behavior
A mix of digital and physical browsing habits, with a clear preference for purchasing Physical Books over e-books.
Gender
Purchase Purpose
Research indicates that Males are nearly twice as likely to be comic book fans as females.
The bookstore focuses on Collectors who value rarity and condition over casual reading.
Consumer Behavior
A mix of digital and physical browsing habits, with a clear preference for purchasing Physical Books over e-books.
Purchase Purpose
The bookstore focuses on Collectors who value rarity and condition over casual reading.
OPPORTUNITY
How Might We
How Migh We
How might we improve the Savannah Comics Website to help comic enthusiasts easily navigate and discover their desired comic-related products?
Explore
Explore
Explore
E-Commerce
Web Design
Savannah Comics Website Redesign
Redesigning the Savannah Comics website for a better online shopping experience for consumers
Overview
Savannah Comics is an e-commerce platform for comic book collectors, offering graphic novels, manga, and collectibles. However, the original site suffered from complex navigation, redundant categories, and low engagement. Our redesign focused on simplifying the structure, improving navigation, and enhancing product discoverability, resulting in a smoother user experience that encourages exploration and drives sales growth.
Timeline
Winter Quarter 2024
(10 weeks)
What I Did
Web UI Design Lead, UX Research, Wireframing, Prototyping
UX Design Team
3 Additional UX Design Students
Tools I Used
Figma, FigJam
Summary
Problems
Customers found it difficult to navigate the website due to overlapping categories, hidden product details, and unclear page structure. At the same time, the comic shop faced low online engagement and missed opportunities to promote key events and boost sales.
Solution
We redesigned the site to streamline navigation and improve product discoverability for users, while also surfacing restock schedules, store policies, and promotional content—helping the business better serve its loyal fanbase and drive purchases.
Highlights
Home Page
The redesigned Home page features a comic-inspired layout with sections like Just In!, Publishers, Characters, and Recommendations for quick, easy navigation.
Series Listing Page
The Series Listing page allows users to browse by publishers, showcasing top series like Marvel first, followed by an A-Z index for easy navigation.
Product List / Product Detail Page
The Product List page offers "Add to Want List," Quick View, and filter/sort options for easy browsing. The Product Detail page highlights key information, features a clear red CTA button, and recommends related books to enhance the user experience.
Design Process
Explore
Analyze the Current Website
Browsing the Savannah Comics website felt more like solving a puzzle than shopping for comics. Users struggled with redundant categories, unclear menus, and hidden product details, leading to frustration and high drop-off rates. Store events were also poorly promoted, missing opportunities to engage comic fans. Our challenge is to transform the site into an intuitive, engaging, and collector-friendly experience.
Measuring Success Through User Engagement and Behavior
User Visit Duration
Measures how long users stay on the website.
Purchase Behavior
Tracks the number and value of purchases.
Repeat Visits
Indicates user satisfaction and loyalty.
Key Insights That Shaped Our Target Audience
Age
The comic reader base primarily consists of Young adults aged 18 to 35, indicating a target demographic for marketing and content creation.
Gender
Research indicates that Males are nearly twice as likely to be comic book fans as females.
Consumer Behavior
A mix of digital and physical browsing habits, with a clear preference for purchasing Physical Books over e-books.
Purchase Purpose
The bookstore focuses on Collectors who value rarity and condition over casual reading.
HOW MIGHT WE
How might we improve the Savannah Comics Website to help comic enthusiasts easily navigate and discover their desired comic-related products?
Research
Insights from In-Store Observations
Online Ordering is a Priority
Most customers prefer to place their book orders online and pick them up in-store later.
→ This underscores the importance of streamlining the online ordering process to enhance convenience.
Wednesdays Are Key Sales Days
The store restocks comics every Wednesday, attracting many loyal customers, often referred to as "Wednesday Warriors," who visit specifically on that day to purchase new comic books.
→ Highlighting the "Wednesday Warriors" can guide marketing and engagement strategies.
Purchase Limits Clarify Online Restrictions
The store enforces a policy where each individual (or family) can only purchase one copy of a specific comic per designated area.
→ This explains why the online store does not allow customers to change the quantity of certain comics. To prevent confusion, we added a clear explanation in the online ordering process.
Analysis
Mapping and Optimizing the Customer Journey
We outlined the customer journey of purchasing comics through Savannah Comics, dividing it into the current (As-Is) process and our ideal (To-Be) process. Based on the steps involved, we optimized the entire website's usability.
Key Findings that Shaped Our Design Decisions
01. Streamlining Navigation
Users struggled with unclear menus and redundant links, so improving navigation was essential to help them locate products quickly.
02. Restructuring Information Architecture
Overlapping categories and disorganized content made product discovery frustrating, emphasizing the importance of a clearer and more efficient structure.
03. Enhancing Visual Hierarchy
Important elements like CTAs and product details lacked clarity, highlighting the need for a more structured and intuitive layout.
04. Increasing User Engagement
The existing design did not encourage exploration, prompting the need for a more interactive and engaging shopping experience.
Design
Streamlining the Sitemap for Clarity
We used the Hybrid Card Sorting method to reorganize the existing sitemap by laying out all pages and restructuring them.
We reclassified and merged similar pages, enabling customers to find the information they need more quickly.
Page Hierarchy for Clear User Flow
This diagram illustrates the hierarchical structure of the redesigned Savannah Comics website, showcasing the relationships between the main pages and their subpages for a seamless user navigation experience.
Structuring Content Through Wireframes
Based on our research findings about the information customers value most, we created wireframes outlining the content and layout for each page.
Evaluating Designs Through Testing
We designed two versions of the homepage and product detail page and sought user feedback. Both designs were printed on large posters and displayed in high-traffic areas frequented by students and faculty.
Version A:
Clear and structured categorization
Version B:
Comic-inspired layout
How User Feedback Refined Our Final Design
We combined the strengths of both designs: the upper section of the final homepage adopts the comic-inspired layout from version B, while the lower section features the clear and structured categorization from version A. For the product detail page, since version B received more votes, we chose to proceed with that design.
Building a Unified Design System
Our design system takes inspiration from Marvel’s iconic black and red palette. As a leader in the comic industry, this color scheme evokes drama and immersion, helping customers feel like they’re stepping into the world of comics.
Comprehensive View of All Designs
Click on any thumbnail to see the images come to life in full-size!
Home Page
Navigation Bar
Series Listing Page
Product List Page
Product Detail Page
Checkout Page
Comparison
Home Page
Current homepage had two navigation bars and many duplicate links, lacking visual appeal to keep users engaged. In our redesign, we aimed to create a more engaging experience, encouraging customer participation while making it easier for them to quickly find categories of interest.
Navigation Bar
① The existing website had two separate navigation bars, which we combined into a single, unified navigation bar.
② We categorized the content based on the popularity of comic publishers and listed character names under each publisher to help users quickly find the categories they are interested in.
Series Listing Page
① The existing series listing page lacked clarity, so we added prominent publisher headings at the top to improve navigation.
② We placed the more popular series at the top of the page to prioritize user interest.
③ The current website lists all series in one long page, making it cumbersome to browse. We reorganized the series into an A-Z list with shortcuts at the top, allowing customers to quickly find the series they are looking for.
Product List Page
① Similar to the series listing page, we made the current series title more prominent to clearly indicate the user’s location within the series.
② We reorganized the visual hierarchy of the product cards by removing unnecessary text and streamlining the design for better clarity.
Product Detail Page
① We reorganized the visual hierarchy of the product description section by emphasizing key information and CTA buttons while minimizing or removing unnecessary details.
② Our research revealed that comic fans, especially collectors, highly value information about publishers, authors, and illustrators. Therefore, we ensured this crucial information is prominently displayed below the main details.
What's Next
Future Enhancements & Metrics
Analytics Tracking
Monitor session duration, category clicks, and purchase rates to refine the user journey.
Iterate & Improve
Use real user feedback to fine-tune navigation and discoverability, ensuring a frictionless shopping experience.
A/B Testing
Compare redesigned pages against the original to measure impact on engagement and conversions.
Conclusion
What I Learned
Effective Information Architecture Simplifies Complexity
Redesigning the categorization system to handle a vast inventory of comics demonstrated how a well-organized hierarchy can transform an overwhelming site into an intuitive, enjoyable experience.
User Research Drives Better Design
Visiting the comic store and interviewing staff and customers provided valuable insights into how people browse and categorize comics, which shaped the reorganization of the site’s structure.
In-Store Visit
Insights from In-Store Observations
Insights from In-Store Observations
Online Ordering is a Priority
Most customers prefer to place their book orders online and pick them up in-store later.
→ This underscores the importance of streamlining the online ordering process to enhance convenience.
Purchase Limits Clarify Online Restrictions
The store sources its books from a major distributor called Pull Box, which many customers use to browse and place pre-orders.
→ This explains why the online store does not allow customers to change the quantity of certain comics. To prevent confusion, we added a clear explanation in the online ordering process.
Wednesdays Are Key Sales Days
The store restocks its inventory every Wednesday, attracting many loyal subscribers, often referred to as "Wednesday Warriors," who visit specifically on that day to purchase new comic books.
→ Highlighting the "Wednesday Warriors" can guide marketing and engagement strategies.
Online Ordering is a Priority
Most customers prefer to place their book orders online and pick them up in-store later.
→ This underscores the importance of streamlining the online ordering process to enhance convenience.
Wednesdays Are Key Sales Days
The store restocks comics every Wednesday, attracting many loyal customers, often referred to as "Wednesday Warriors," who visit specifically on that day to purchase new comic books.
→ Highlighting the "Wednesday Warriors" can guide marketing and engagement strategies.
Purchase Limits Clarify Online Restrictions
The store enforces a policy where each individual (or family) can only purchase one copy of a specific comic per designated area.
→ This explains why the online store does not allow customers to change the quantity of certain comics. To prevent confusion, we added a clear explanation in the online ordering process.
Research
Analysis
Research
Analysis
Analysis
Analysis
Sitemap
Streamlining the Sitemap for Clarity
Streamlining the Sitemap for Clarity
We used the Hybrid Card Sorting method to reorganize the existing sitemap by laying out all pages and restructuring them. We reclassified and merged similar pages, enabling customers to find the information they need more quickly.
Page Hierarchy
Page Hierarchy for Clear User Flow
Page Hierarchy for Clear User Flow
This diagram illustrates the hierarchical structure of the redesigned Savannah Comics website, showcasing the relationships between the main pages and their subpages for a seamless user navigation experience.
Customer Journey Map
Mapping and Optimizing the Customer Journey
We outlined the customer journey of purchasing comics through Savannah Comics, dividing it into the current (As-Is) process and our ideal (To-Be) process. Based on the steps involved, we optimized the entire website's usability.
Research Insights
Key Findings that Shaped Our Design Decisions
Key Findings that Shaped Our Design Decisions
Increasing User Engagement
The existing design did not encourage exploration, prompting the need for a more interactive and engaging shopping experience.
Enhancing Visual Hierarchy
Important elements like CTAs and product details lacked clarity, highlighting the need for a more structured and intuitive layout.
Restructuring Information Architecture
Overlapping categories and disorganized content made product discovery frustrating, emphasizing the importance of a clearer and more efficient structure.
Streamlining Navigation
Users struggled with unclear menus and redundant links, so improving navigation was essential to help them locate products quickly.
Increasing User Engagement
The existing design did not encourage exploration, prompting the need for a more interactive and engaging shopping experience.
Enhancing Visual Hierarchy
Important elements like CTAs and product details lacked clarity, highlighting the need for a more structured and intuitive layout.
Restructuring Information Architecture
Overlapping categories and disorganized content made product discovery frustrating, emphasizing the importance of a clearer and more efficient structure.
Streamlining Navigation
Users struggled with unclear menus and redundant links, so improving navigation was essential to help them locate products quickly.
What's Next
What's Next
What's Next
Future Enhancements & Metrics
Future Enhancements & Metrics
Measure Engagement
Use analytics tools to track metrics like session duration and page views to determine if users are spending more time on the site.
Use analytics tools to track metrics like session duration and page views to determine if users are spending more time on the site.
Use analytics tools to track metrics like session duration and page views to determine if users are spending more time on the site.
Evaluate Purchases
Monitor conversion rates, including the number of items purchased and average order value, to assess if the redesign drives increased sales.
Monitor conversion rates, including the number of items purchased and average order value, to assess if the redesign drives increased sales.
Monitor conversion rates, including the number of items purchased and average order value, to assess if the redesign drives increased sales.
Perform A/B Testing
Compare the redesigned pages with the original version to measure the impact on user behavior and confirm the effectiveness of the updates.
Compare the redesigned pages with the original version to measure the impact on user behavior and confirm the effectiveness of the updates.
Compare the redesigned pages with the original version to measure the impact on user behavior and confirm the effectiveness of the updates.
Conclusion
Conclusion
Conclusion
What I learned
What I learned
User Research Drives Better Design
Visiting the comic store and interviewing staff and customers provided valuable insights into how people browse and categorize comics, which shaped the reorganization of the site’s structure.
Effective Information Architecture Simplifies Complexity
Redesigning the categorization system to handle a vast inventory of comics demonstrated how a well-organized hierarchy can transform an overwhelming site into an intuitive, enjoyable experience.
User Research Drives Better Design
Visiting the comic store and interviewing staff and customers provided valuable insights into how people browse and categorize comics, which shaped the reorganization of the site’s structure.
Effective Information Architecture Simplifies Complexity
Redesigning the categorization system to handle a vast inventory of comics demonstrated how a well-organized hierarchy can transform an overwhelming site into an intuitive, enjoyable experience.
User Research Drives Better Design
Visiting the comic store and interviewing staff and customers provided valuable insights into how people browse and categorize comics, which shaped the reorganization of the site’s structure.
Effective Information Architecture Simplifies Complexity
Redesigning the categorization system to handle a vast inventory of comics demonstrated how a well-organized hierarchy can transform an overwhelming site into an intuitive, enjoyable experience.
Home Page
Current homepage had two navigation bars and many duplicate links, lacking visual appeal to keep users engaged. In our redesign, we aimed to create a more engaging experience, encouraging customer participation while making it easier for them to quickly find categories of interest.
Comparison
Comparison
Comparison
Navigation Bar
① The existing website had two separate navigation bars, which we combined into a single, unified navigation bar.
② We categorized the content based on the popularity of comic publishers and listed character names under each publisher to help users quickly find the categories they are interested in.
① The existing website had two separate navigation bars, which we combined into a single, unified navigation bar.
② We categorized the content based on the popularity of comic publishers and listed character names under each publisher to help users quickly find the categories they are interested in.
Series Listing Page
① The existing series listing page lacked clarity, so we added prominent publisher headings at the top to improve navigation.
② We placed the more popular series at the top of the page to prioritize user interest.
③ The current website lists all series in one long page, making it cumbersome to browse. We reorganized the series into an A-Z list with shortcuts at the top, allowing customers to quickly find the series they are looking for.
Product List Page
① Similar to the series listing page, we made the current series title more prominent to clearly indicate the user’s location within the series.
② We reorganized the visual hierarchy of the product cards by removing unnecessary text and streamlining the design for better clarity.
Product Detail Page
① We reorganized the visual hierarchy of the product description section by emphasizing key information and CTA buttons while minimizing or removing unnecessary details.
② Our research revealed that comic fans, especially collectors, highly value information about publishers, authors, and illustrators. Therefore, we ensured this crucial information is prominently displayed below the main details.
Design System
Building a Unified Design System
Our design system takes inspiration from Marvel’s iconic black and red palette. As a leader in the comic industry, this color scheme evokes drama and immersion, helping customers feel like they’re stepping into the world of comics.
Design System
All Screens
Building a Unified Design System
Building a Unified Design System
Comprehensive View of All Designs
Our design system takes inspiration from Marvel’s iconic black and red palette. As a leader in the comic industry, this color scheme evokes drama and immersion, helping customers feel like they’re stepping into the world of comics.
Click on any thumbnail to see the images come to life in full-size!
Home Page
Navigation Bar
Series Listing Page
Product List Page
Product Detail Page
Checkout Page
Wireframes
Structuring Content Through Wireframes
Design
Wireframes
Structuring Content Through Wireframes
Design
Based on our research findings about the information customers value most, we created wireframes outlining the content and layout for each page.
Version A:
Clear and structured categorization
Version B:
Comic-inspired layout
Feedback
35 votes
Homepage: 11 vs. 11.
Product Detail Page: 3 vs. 10
How User Feedback Refined Our Final Design
We combined the strengths of both designs: the upper section of the final homepage adopts the comic-inspired layout from version B, while the lower section features the clear and structured categorization from version A. For the product detail page, since version B received more votes, we chose to proceed with that design.
User Feedback
Evaluating Designs Through Testing
We designed two versions of the homepage and product detail page and sought user feedback. Both designs were printed on large posters and displayed in high-traffic areas frequented by students and faculty.