Comic Shop E-Commerce

Overview

picture of a whale eating a donkey

For this project the ultimate goal was to create a structure for a local store’s eCommerce. I designed an eCommerce experience for a comic store “Comicazi” in Davis Sq. in Somerville, Ma.

After doing a variety of card sorts and interviews with the stores and user I created the site.

The site is currently focused on filtering features rather than cumbersome category pages.

Design Process

Backstory

For this project the ultimate goal was to create a structure for a local store’s eCommerce. I designed an eCommerce experience for a comic store “Comicazi” in Davis Sq. in Somerville, Ma.

Before talking to any potential users I went to the store. With two goals in mind:

  1. Find out the store's problem
  2. Learn what their ultimate goal is

After talking with someone working in the store I learned a few things;

  • The store is community focused
  • They host a lot of events and want to get the word out
  • They know when people come in they'll want to stay

Talking with them they interested in the idea of in store pick-up method.

With that in mind I went on to user research.

Researching

I performed two different methods of user research.

First, I sent out a screening survey to find users who purchased any of the goods sold at the comic shop.

I then interviewed 6 users and asked them a variety of questions.

Some of the questions focused on the items at the comic shop.

But I focused on general online shopping.

My goal was to find any pain points that users experienced while shopping online.

I then created an affinity map to back up and see what my users were saying.

Further Research & Analysis

A picture of groupings of post it notes to visualize the thoughts and feelings of my users.

At this point it was clear that there were two separate problems:

The Users Problem:

  • I enjoy supporting local stores, but it is so easy to shop online

The Stores Problem

  • Our store is a community, if we can get people in the door they’ll stay


That's when I realized there was a clear solution:

Create an online shopping platform that encourages users to come into the store.

I knew this would be hard to pull off. Especially considering what my users told me. They like the convenience of shipping from online stores.

But there was hope, my users mentioned something else. They want to support a local business, and they are willing to go out of their way to do so.

It was time to focus on the structure of the site and it's content. Time to focus on the information architecture.

This is where my second method of research comes in.

A Collage Of Items from the card Sort

Using a list of 100 goods that I had gathered from my visit to the shop, I created an open card sort.

My goal was to see how my users saw the content, and how it all related to each other.

But, with my open card sort came some interesting findings:

  • Users as baffled as I was by inventory
  • Results were spread out
  • Users didn’t know the goods
  • Sorted by what they knew
  • Large Variety of Group Names

This was when I realized that I should have done a closed card sort.

But, there wasn't much time left on the project so I had to move on.

I needed to get my ideas on paper. It was time to sketch wireframes.

Ideation

pictures of sketches of a website ecommerce

I created dozens of sketches of all of the aspects of the website.

Afterwards I switched tools. I moved onto "Axure"

Using Axure I created my first working, and clickable, prototype.

But, it needed a skeleton so I first created a site map.

Then I used my sketches to create a site that I could user test.

pictures of an Axure build of a website ecommerce

Above are two screens from the first version. I wanted to immediately jump into user testing.

So I did.

I tested on as many users as I could in the short time that I had. I was able to understand a few things about their experiences.

  • There was filtering?
  • Why can’t I click here?
  • Everything was easy to find
  • User enjoyed knowing about the store
  • Top Filter = Unclear
  • Site wasn’t reacting as expected
  • There Was sensible organization
  • Character of the store is important
This information told me a few key things.
  1. The structure was clear
  2. The filtering needed to be reworked
  3. The store was the biggest draw
With all of this in mind iterated and created the current version of the prototype.

Current Version

A wireframed prototype of a  website ecommerce

In the current version I changed a few key things based on feedback:

  • Made The Entire Card Clickable
  • Re-Worked the Filtering System
  • Added a full review feature
See the prototype.

Reflecting

A wireframed prototype of a  website ecommerce, showing instore pick-up as the default option

The clearest way I solved the stores problem is pictured above. I set the default to "In Store Pick-Up".

The structure for the site is sensible. It has room to be expanding for a growing list of creators.

One thing that I feel I haven't accomplished as well as I could is the community side of the site.

The current version falls short of doing everything possible to bring users in. I need to do more research and build out more tools that bring people into the store. A stronger focus on the problems that I found.