This solo design challenge while at General Assembly was to redesign an e-commerce website, Edge boardshop - a boutique retailer of skate products and accessories - up to and including medium-fidelity wireframes. What added a layer of complexity was the fact that the skateboarding community is a tight-knit group, relatively closed off from outsiders. It was clear that finding a willing user base and gleaning insights, would be no easy feat.
Orignial Edge Website
I began by analyzing the competition. I first visited two local skate shops: One Gig and Orchard – this allowed me to identify differences in shopping in person and online. More importantly, these visits uncovered information that would be integral to the success of my user research - where to find the skaters.
I then identified and focused on three online competitors: SoCal Skate Shop, The Longboard Store and Switchback Longboards. I sketched the home page of each site and followed with taking an inventory of all the features that each site offered:
A couple of sites were very crowded and distracting, while one was more balanced and visually appealing
Most features were fairly consistent across sites, with the exception of navigation and filtering options
I started by conducting a Contextual Inquiry with an online skate products shopper, in order to gain an understanding of how a skater uses the website. I watched him use the site and asked him to think out loud.
The interview process continued with one-on-one interviews with skaters who had previously purchased skating products online. The participants were asked seven questions in order to identify their feelings about and experiences with shopping online for skate products.
Site should carry a wide selection of skating products and accessories
Urban residents have easy access to skate shops - they will use online shopping mostly for parts and customization, due to the large selection offered by online retailers
Company mission and branding is paramount
Navigation is important and can be a challenge
Filtering options are great and used often when they're available
"I want to know that they're truly part of skate culture - not corporate."
I crafted an Affinity Diagram to condense insights.
"I use filtering just about every time I order from Edge. It's awesome!"
With my synthesized research findings in hand, I was able to craft user personas for Edge boardshop, to guide me through the rest of the design process.
"I need a sick board so that I can shred with my friends!"
Too many options when customizing boards
Pricing needs to beat local skate shops
Shop needs to show it's truly part of skating culture - not corporate
46 | Stay-at-Home Mom | Cares About: Convenience
"When I’m looking to buy my son a new board, the site has to be quick and easy to use."
Getting Lost on a site
Being bombarded with popups
Finding exactly what she needs without much effort
For those wanting to shop for skate products online, Edge boardshop provides an easy way to find and purchase skateboards and longboards, as well as snowskates, clothing and accessories.
Once the user enters the site, she can browse by category or search for a specific product. The user then chooses a product and views detailed information about it. If the user then decides to purchase the product and proceed to checkout. If the user elects to not purchase the product, she continues to view detailed product information, or continues to browse the site.
The site map illustrates the information architecture of the website, showing how a user will navigate it.
Snowskates was moved from within the Longboards menu to the main navigation, to properly reflect its distinct category
Footwear was added to the title with Clothing in main navigation, to clearly inform users of the product offering
Categories that were dual-listed in Accessories and other navigation menus were streamlined - listing them under only one menu and removing confusion
Ace just got birthday money and wants to buy himself something nice with it. He realizes that he's got enough money to buy a new skateboard. He decides to go to Edge boardshop because he wants to customized his board. Ace picks out exactly what he wants - a Vision deck, Paris trucks and Venom wheels. When the board arrives Ace is thrilled and can't wait to shred with his friends that day.
Ideation & Sketching
With the research phase completed and personas developed, I was able to move forward with the Design Thinking process and began to ideate. Next, I sketched five to six different versions of the Home, Products Listing and Product pages.
Home Page Sketches
I decided to go with a minimalist look for the site (top-left sketch). Above the fold I'm utilizing a full-screen background image, with visibly present but discreet navigation. Below the fold I chose to showcase a carousel of new products, situated between two banner advertisements that need to be placed in areas of prominence.
Usability Testing & Interactive Prototyping
After choosing a design for the new site, I proceeded to create a set of digital wireframes, leading to an interactive prototype. From there, I conducted usability testing. I repeated testing after each design iteration, culminating in series of five usability tests and six design iterations:
Remove background beneath product images in New Arrivals carousel, which was distracting
Add product make and model to New Arrivals carousel, providing the user with pertinent information about the product
Add price to products in New Arrivals carousel, providing the user with essential information that should be available upfront, before deciding whether or not to explore the product further
Foreshadowed visual design changes needed in the primary and secondary navigation, such as larger text and lighter background
The major challenged I that faced while re-designing this website was balancing the plethora of features that users demanded - revealed through research and testing - with those that Edge boardshop is known for. Further testing in this area would be beneficial.