thumbnail image
broken image

Mark Pedersen

  • Home
  • Work
  • About
  • Edge boardshop website redesign

    Edge boardshop

    Shred like a pro.

  • UX Role Icon

    My Role

    User Interviews

    Affinity Diagram

    Contextual Inquiry

    Competitive Analysis

    Information Architecture

    Ideation & Sketching

    User Flow

    Persona Development

    Storyboard

    Paper Prototyping

    Wireframing

    Interactive Prototyping

    Usability Testing

    UX Timeframe Icon

    Timeframe

    Two Weeks

    UX Tools Icon

    Tools

    Paper

    Pen

    Sketch

    InVision

    Optimal Workshop

  • The Challenge

    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

    Original Edge boardshop website

    Competitive Research

    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:

    Hand sketches of Edge homepage and competitor homepages

    Findings

    • 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

    User Research

    Contextual inquiry of the Edge website

    Contextual Inquiry

    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.

     

    Key Findings

    • 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."

    Affinity Diagram of user interviews

    Affinity Diagram

    I crafted an Affinity Diagram to condense insights.

    "I use filtering just about every time I order from Edge. It's awesome!"

    Personas

    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.

    Ace on skateboard

    Ace

    16 | Student | Cares About: Performance, Cool-Factor

     

    "I need a sick board so that I can shred with my friends!"

     

    Pain Points

    • 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
    Susan smiling

    Susan

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

     

    Pain Points

    • Getting Lost on a site
    • Being bombarded with popups
    • Finding exactly what she needs without much effort

    Solution

    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.

    User flow of Edge website

    User Flow

    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.

    Sitemap of Edge website

    Site Map

    The site map illustrates the information architecture of the website, showing how a user will navigate it.

     

    IA Changes:

    • 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
    Storyboard of Ace shopping on Edge website

    Storyboard

    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.

    Six different hand sketches of potential Edge homepages

    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:

     

    Test Results

    1. Remove background beneath product images in New Arrivals carousel, which was distracting
    2. Add product make and model to New Arrivals carousel, providing the user with pertinent information about the product
    3. 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
    4. Foreshadowed visual design changes needed in the primary and secondary navigation, such as larger text and lighter background
    Iterations of wireframes

    Final Prototype

    Final Prototype

    Interactive Prototype

    View Interactive Prototype

    Final Thoughts

    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.

© 2016

Cookie Use
We use cookies to ensure a smooth browsing experience. By continuing we assume you accept the use of cookies.
Learn More