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

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 2023

(10 weeks)

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

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.

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.

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.

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.

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.

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.

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.

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.

Comparison: 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.

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

Comparison: 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.

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

Comparison: 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.

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

Comparison: 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.

① We reorganized the visual hierarchy of the product description section by emphasizing key information and CTA buttons while minimizing or removing unnecessary details.

What I Learned

Simplifying Complexity Through Information Architecture

Redesigning the comic site’s structure taught me how clear categorization can turn a cluttered interface into an intuitive experience. It highlighted the power of hierarchy in improving navigation.

Simplifying Complexity Through Information Architecture

Redesigning the comic site’s structure taught me how clear categorization can turn a cluttered interface into an intuitive experience. It highlighted the power of hierarchy in improving navigation.

Designing with Both Users and Business in Mind

Visiting the store and talking with staff and customers revealed how people browse comics and how the store operates. I learned to balance user behaviors with business goals—like highlighting bestsellers and supporting in-store browsing habits.

Designing with Both Users and Business in Mind

Back to Top

More Projects

App Design

Public Sector

B2C

MyTSA｜Travel Prep App

A mobile app to help travelers prepare for airport security and navigate TSA requirements with confidence

AI Design

Vibe Coding

B2C

FrameLog｜Analog Film Organizer

A mobile app to help film photographers organize and rediscover their scanned rolls