Alleycat Comics
The Challenge
Student Concept Project
Duration: 120+ hours
Roles: UX designer, UX researcher, visual designer, content strategist
Alleycat Comics is a local comic book shop located in the Chicago's Andersonville neighborhood. The business was started and is owned by two lifelong comic book fans. They've made it their mission to share their passion for all things comic book.
Redesign a local business' website while addressing both the business' needs as well as the potential customers' needs.
A friendly local shop that cares.
"We want to feel like Cheers."
The research phase for this project began with understanding who Alleycat Comics was as a business. Through interviewing the shop's owners, I found the business values friendliness & familiarity.
“We just make sure to be attentive and friendly to all who come into the shop."
"Our website could be more up to date but what [can] ya do?”
How Alleycat stacks up to the competition.
I wanted to be aware of what other local comic shops were doing in regards to their websites. Through a competitive analysis, I was able to create the following chart, which shows each sites' features.
From this, I was able to find what the most common features were across the shops:
-
Many local comic shops have an online store, but still rely mainly on in-store business
-
New releases are typically highlighted in some way
-
Most comic shops offer a subscription service
The customers know what they want.
After researching the business, I turned my attention to the customers. User interviews allowed me to hear first-hand accounts of in-store & online comic shopping experiences.
I moved to synthesizing data. Based on what was said, I was able to create an affinity map, a UX tool used to find trends in user experiences. The images show an affinity map before & after sorting.
The affinity map revealed a few trends. The most prevalent are shown here as I statements:
-
I know exactly what I want when visiting a comic shop.
-
I enjoy interpersonal interaction.
-
I want to be surprised or fascinated.
-
I appreciate the relaxed environment.
-
I value my local comic book community.
-
I want thing to be convenient.
Let's meet the comic book superfan.
Based on the user research, I was able to create an approximation of the target user, otherwise known as a persona.
Goals
-
Buys online ONLY IF unable to find a specific book in-store.
Habits
-
Wants the online shopping experience to be quick & convenient.
-
Prefers to physically pick his books to ensure he gets them in their best condition.
-
Visits the comic shop weekly to pick up his subscriptions.
-
Wants to support his local shop by being able to shop on their online store.
-
Wants to manage his comic subscriptions without having to go to the shop.
What the business needs.
Alleycat Comics’ website needs a refresh that maintains its ease of use & friendly tone but also increases functionality. A redesigned website can help attract more business to the online store and keep customers satisfied.
And how to deliver.
By creating a streamlined online shopping experience on Alleycat Comics’ website, we can create an experience that is convenient for the user and generates more sales for the shop.
Let's give them what they want.
Based on the research conducted on the business & customers, it was necessary a redesign included some things:
-
An online shop integrated onto the website.
-
A section featuring newly released comics and another that featured currently ongoing titles.
-
A way to add comic book subscriptions to ensure customers would receive their monthly (or bi-monthly) comic books
-
Information about the shop (hours, contact info, etc.)
Drawing up the battle plans.
Before I started wire framing in the Sketch software, I wanted to actually sketch some ideas on paper to give myself a starting place.
Let's keep it clean.
After settling on some concepts, I wireframed some pages for a new version of the Alleycat Comics website. I wanted to keep the pages as clean as possible with succinct copy and a sleek UI.
Usability Testing Feedback
After creating wireframes, I needed to test the viability of them. I used InVision to create a clickable prototype and gave potential users tasks to complete using my wireframes. The tasks were:
-
Subscribe to the Batman comic book series
-
Ask the store to make a special order for a statue that was not available on the website
Testing resulted in user feedback. This feedback would be used to inform future design iterations:
-
Header too thick, separate information into a footer
-
Subscription user path is unclear, messy
-
Users wanted more confirmation after actions
-
Unclear on how to contact store
Final Wireframes
To create my final wireframes, I used the feedback received in usability testing. The video below shows the new website design:
Reflection
This project taught me the importance of research. The abundance of data I received from the business analysis and user interviews gave me great insight on how to approach this redesign.
If I had more time on this project, here are some things I would have liked to have included into my design:
-
Wireframe more screens
-
Include confirmation modals
-
Log In & Create Account page
-
Account (personal info & subscriptions) page
-
-
Include personalization based on purchase history
-
Prototype more user flows
-
Include Filters and Sort By in Shop
Thank you to Alleycat Comics for allowing me to invade their space for a few days.
And thank you for reading this case study.