Savannah Comics

Redesigning the Savannah Comics website for a better online shopping experience for consumers

E-Commerce

Web Design

Overview

Redesigned E-Commerce Site for Comic Fans to Simplify Navigation and Increase Discoverability

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

2024 Winter Quarter 2024 (10 weeks)

What I Did

UX Research, Web Design, Wireframing, Prototyping

UX Design Team

3 additional UX design students

3 Additional UX Design Students

Tools I Used

Figma, FigJam

Problems

Confusing Structure and Poor Visibility Led to Low Engagement and Missed Sales Opportunities

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

Redesigned Site to Simplify Browsing, Highlight Key Info, and Boost Conversions

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

The redesigned Home page features a comic-inspired layout with sections like Just In!, Publishers, Characters, and Recommendations for quick, easy navigation.

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.

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.

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.

Key metrics

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

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 might we improve the Savannah Comics Website to help comic enthusiasts easily navigate and discover their desired comic-related products?

Explore

Responsive Web Design

E-Commerce

Savannah Comics

Redesigning the Savannah Comics website for a better online shopping experience for consumers

Overview

Redesigned E-Commerce Site for Comic Fans to Simplify Navigation and Increase Discoverability

Timeline

Winter Quarter 2023

(10 weeks)

What I Did

Web Design Lead, UX Research, Wireframing, Prototyping

Team

4 UX Designers (including me)

Tools I Used

Figma, FigJam

Problems

Confusing Structure and Poor Visibility Led to Low Engagement and Missed Sales Opportunities

Solution

Redesigned Site to Simplify Browsing, Highlight Key Info, and Boost Conversions

Design Process

Final Web Design 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.

RESEARCH

Current Website Issues

Identified Confusing Navigation and Missed Engagement as Barriers to a Collector-Friendly Experience

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.

Key Metrics

Tracked Engagement Metrics to Gauge Satisfaction, Loyalty, and Conversion

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

Identified Core Audience: Young, Male Collectors Who Prefer Physical Purchases

Age

The comic reader base primarily consists of young adults aged 18 to 35, indicating a target demographic for marketing and content creation.

Consumer Behavior

A mix of digital and physical browsing habits, with a clear preference for purchasing physical books over e-books.

Gender

Research indicates that males are nearly twice as likely to be comic book fans as females.

Purchase Purpose

The bookstore focuses on collectors who value rarity and condition over casual reading.

How Might We…

improve the Savannah Comics Website to help comic enthusiasts easily navigate and discover their desired comic-related products?

In-Store Visit

Customer Habits—Online Ordering, Wednesday Visits, and Purchase Limits—Informed UX and Policy Clarity

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

User Journey Map

Mapped and Redesigned the Customer Journey to Improve Site-Wide Usability

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 Insights

Uncovered Four UX Gaps and Turned Them Into Actionable Design Priorities

#1 Streamlining Navigation

Users struggled with unclear menus and redundant links, so improving navigation was essential to help them locate products quickly.

#2 Restructuring Information Architecture

Overlapping categories and disorganized content made product discovery frustrating, emphasizing the importance of a clearer and more efficient structure.

#3 Enhancing Visual Hierarchy

Important elements like CTAs and product details lacked clarity, highlighting the need for a more structured and intuitive layout.

#4 Increasing User Engagement

The existing design did not encourage exploration, prompting the need for a more interactive and engaging shopping experience.

DESIGN

Sitemap

Reorganized Sitemap Using Card Sorting to Simplify Navigation and Reduce Redundancy

We used the Hybrid Card Sorting method to reorganize the existing sitemap by laying out all pages and restructuring them.

By reclassifying and consolidating similar pages, we made it easier for customers to find the information they need more efficiently.

Page Hierarchy

Clarified Page Hierarchy to Support Intuitive, Seamless 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.

Wireframes

Built Research-Backed Wireframes to Prioritize Content Users Care About Most

Based on our research findings about the information customers value most, we created wireframes outlining the content and layout for each page.

Testing

Tested Two Visual Directions and Merged Top-Performing Elements Into Final Design

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

Combined top-voted elements from both versions to create the final design

We merged the best of both: the final homepage uses version B’s comic-inspired top and version A’s clear bottom layout. For the product page, we went with version B based on majority votes.

Design System

Developed a Bold, Comic-Inspired Design System to Create an Immersive Brand Experience

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.

All Screens

Full Design Gallery – Click Thumbnails to View in Detail

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

Redesigned with comic-style layout and expanded sections to promote genre discovery—leading to longer browsing time and higher user engagement

Current homepage had two navigation bars and duplicate links, making it cluttered and hard to browse. Redesigned with a comic-inspired layout and added sections like New Arrivals, Publishers, and Popular Characters to guide exploration—resulting in longer browsing time and higher engagement.

Navigation Bar

Unified Navigation and Reorganized Content for Faster, Publisher-Based Browsing

① 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

Improved Series Listing to speed up browsing with clear headings, A–Z shortcuts, and prioritized content

① 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

Streamlined Product List to improve clarity and help users browse with ease

① 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

Refined Product Detail Layout to Highlight Key Info and Support Collector Needs

① 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.

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.

Back to Top

More Projects

App Design

Service Design

Airport Security Experience｜Travel Prep App

Airport Security Experience

App Design

Smart Home

IoT

Vapra｜Smart Scent Diffuser

Vapra

More Projects

Vapra - Smart Diffuser

Smart Home

UX App Design

Deloitte x SCADPro

Seamless Airport Security

UX App Design

Service Design

Back to top

Overview

Highlights

Research

Analysis

Design

Comparison

Conclusion

In-Store Visit

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

Sitemap

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

Customer Journey Map

Mapping and Optimizing the Customer Journey

Research Insights

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

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.

Evaluate Purchases

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.

Conclusion

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.

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

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.

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.

Design System

All Screens

Building a Unified Design System

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

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.