thumbnail image

Mark Pedersen

  • Home
  • Work
  • About
  • 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