One Gig: An Ecommerce Site Project

Objective

I set out to create a concept website for One Gig, a local skate shop specializing in one-of-a-kind apparel and skate equipment. One Gig had a webpage but was limited to telling customers to visit the store in person if they wanted to make purchases. I was tasked with developing an Ecommerce site that operated clearly and efficiently while meeting users' expectations around information architecture and usability.

The site needed to be on-brand with the skate shop, and I had a huge challenge in organizing all their disparate stuff, from skate decks to chromed-out grillz!

Project Overview

Process

Competitive Analysis

I researched comparable local competitors (Orchard and Thuro) as well as larger online warehouses (Karmaloop and Skatewarehouse) to help establish my feature set and design aesthetic. I documented multiples pages in a matrix of features and attributes.

User Interviews

I performed three user interviews with individuals who actively skate now or identify with skater culture.

Major takeaways:

1) Skate Shops are highly effective at making people welcome and instilling a sense of community for everyone, regardless of background or ability.

2) Users aren’t worried about price if they can get custom products that are unique.

3) Brands are important. People trust specific brands and want to stay away from others.

Card Sorts

In order to establish information architecture and hierarchy, I performed 3 open and 3 closed card sorts.

By giving test subjects pictures of 100 actual items from the store, I was able to establish patterns based on categories they created to group items in what’s called an open sort.

I then verified these categories by testing different individuals remotely using Optimal Workshop’s card sorting feature for a closed sort, in which the categories were pre-established. Users were able to sort 100 products into 6 main categories which would form the global navigation.

Major Takeaways:

Many individuals noted a desire to see custom-made products listed separately from off-the-rack, factory items.

I had a lot of random printed items like pillows or stickers, and users couldn’t agree on categories to place them into. I even had chromed grillz to place on my navigation menu!

Defining the Problem

The user needs a way to shop for One Gig gear and apparel online because the only way to purchase from the store currently is to visit their brick and mortar location in downtown Boston.

Solution

We believe that by creating an Ecommerce site for One Gig, we will increase sales and interest in the shop.

Design Decisions

Issue: The store had a very wide variety of products

Solution: Building a global menu that will remain flexible for evolving inventory became a priority

Issue: Users noted the importance of brands

Solution: The homepage needed a clear option to search or browse by brand

Issue: The site needed to instill a sense of community around the shop and its artists

Solution: Incorporate artist bios page, products by artist, pictures of the shop

Lo-Fidelity Wireframes

By sketching ideas into wireframes, I was able to compare display options and develop a hybrid for the site. These sketches combined major features of competitors that showed the most promise for testing purposes.

Mid-Fidelity Wireframes

I designed the next level of wireframes in Axure so I could begin testing homepage, item listing, item detail, and checkout pages.

Site Map

The existing website had a blog and some fashion pictures of models wearing One Gig Apparel. But there was no existing way to view any products or make purchases. I designed a global navigation menu that offers users the ability to quickly locate the items they’re looking for.

Work Flow: The Checkout Process

Testing and Iterations

Users were pleased with seeing their status in the checkout process but they wanted a clear call to action button (proceed to checkout). They also requested a clearer way to remove items from the cart, so I added color to the X to indicate it’s an available option. In future iterations I might reduce the size of the X in order to not encourage the user to remove items.

Users were also somewhat confused by the credit card info label because some believed it was a call to action. I moved the label higher and removed the border. I also made the call to action (Confirm and Pay) green to call attention to it.

View The Prototype

Future Considerations

• I would further develop and test the checkout process.

• Later iterations would take color, photography, and typography into consideration.

• The main image on the landing page should extend beyond the fold to indicate more content being available down the page.

• Perform more usability tests to determine which order the local navigation should follow.

Project Takeaways

My biggest lesson learned was about scope. I invested time in building cool features like a lightbox checkout cart that eventually led to confusion in usability when people wanted to exit the cart. I learned I should limit my initial feature set to create a solid, beautifully designed product to test. More isn’t always better, especially when it comes to early iterations and lower fidelity prototypes. Build, test, learn, repeat.