North Wales Running Company

Conceptual E-commerce Website Re-design

The Client:

Screen Shot 2019-06-28 at 4.31.49 PM.png

The Objective:

To re-design an e-commerce website for a store with 100+ products and solve for a problem a user of that site would face. 

The Method:

I utilized skills and tools including:

  • Developing Surveys

  • Recruiting Participants

  • Contextual Inquiries

  • Affinity Mapping

  • Personas

  • Storyboarding

  • Paper Prototypes

  • Digital Prototypes

  • InVision

The Process:

With a whole extra week to work with and a current version of the website to examine, I chose to conduct a contextual inquiry of the the NWRC website as well as other running store website for comparison.

The Contextual Inquiry:

By comparing the existing NWRC shop and item pages with other similar stores and providing them as examples to interviewees I was able to gather data on how users wanted their layout to look and function. 

Screen Shot 2019-06-28 at 8.52.10 PM.png
Screen Shot 2019-06-28 at 8.52.26 PM.png

The Affinity Map:

Highlights from compiling results of the user interviews included:

  • How runners narrow down their search

    • "I always stick with the same brand, I'll never leave it"​

    • "I always look for my size first, if it's not in my size obviously I'm not going to buy it"

  • Biggest concerns when shopping online

    • Sizing being incorrect​

    • Not wanting to try new things because of not being able to try things on

Screen Shot 2019-06-28 at 9.50.30 PM.png

The Problem:

Frequent runners need to be able to find the shoe brand, version, and size they wear quickly since they usually buy the same shoe when shopping online.

The Persona:

Working with another new skill, I created my first persona, bringing a face to the design process based on the responses to my first round interviews. 

The Storyboard:

Trying out a new style of storyboard for this project, I chose to create more individualized panels while providing the narration for our user and persona, Joe. This process allowed me to show a little bit more detail of where the design was currently headed at this point in the research process.

Screen Shot 2019-06-29 at 1.34.17 PM.png
Screen Shot 2019-06-29 at 1.42.26 PM.png
Screen Shot 2019-06-29 at 1.34.39 PM.png
Screen Shot 2019-06-29 at 1.34.48 PM.png
Screen Shot 2019-06-29 at 1.34.58 PM.png
Screen Shot 2019-06-29 at 1.35.07 PM.png

The Solution:

A website with easy to find filters (especially brand and size) as well as access recent orders so the frequent runners can find their previously purchases shoes without having to navigate all the steps every time.

Screen Shot 2019-06-28 at 8.52.10 PM.png

User testing the original site had participants saying:

  • "I don't understand why the side menu has +s but the options are already expanded."

  • "Why are there some sections included on the side that have no options underneath?"

  • "Why are there so few items on this page?"

The Ideation Process:

Through 3 stages of ideation, from wireframes, to a paper prototype, and eventually a low fidelity digital prototype I continued to conduct user testing.

Screen Shot 2019-06-29 at 2.13.52 PM.png

Original wireframes had menu options along both the top and down the side of the page. 

Testing the wireframe revealed that user's preferred all their menu options to be in one place rather than split.

Testing at the paper level revealed that users wanted and easy way to find their most recent purchase without having to sift through brands and sizes.

Screen Shot 2019-06-29 at 3.18.30 PM.png
  • Users continued to be confused by the always expanded side menu and the fact that it caused the page to always be twice as long as necessary. 

  • In addition users didn't like that there was the option to view other angles of the shoe, but no other angles were present.

  • Products were also often missing the option to 'add to cart' outright.

The InVision Prototype:

Screen Shot 2019-06-29 at 2.14.03 PM.png

The focus of the product page wireframe was to show all the relevant product information in a more compact format.

The removal of the sidebar menu provided more room for product name, price, and size. Users also suggested adding a 'similar shoes' option.

No significant changes were made between the paper and digital prototype on this page.

The Future:

Due to time constraints during the initial project phase, I did not have time to conduct as thorough research as I would have liked before jumping into my ideation phase. When I get back to this project I will make a few important steps my first priorities:

  • Contacting and interviewing the store's owner

  • Completing a new comparative analysis involving small locally owned businesses similar to NWRC

  • Focusing on more than just experienced runners and creating personas for people of all experience levels