While A Runner's Circle has a website, is it not as user friendly as it could be for several reasons. The site loses some of its functionality on the responsive version. It also does not make good use of whitespace, has multiple navigation bars, and has inconsistent coloring. Finally, there is limited information about the products carried in-store.

Based on my research and personal experience, the types of customers most likely to visit this store can be represented by the following two personas:

Before conducting the in-person interviews, I created a list of questions for each persona.

- Do you ever visit A Runner's Circle's website?

- How much are you willing to spend on running shoes?

- When you find a pair of shoes you like running in, do you stick with that model/brand?

- Do you normally shop for running shoes in-store or online?

- Does your running mix with your social life or do you run by yourself?

- Do you run to stay fit or are you training for an event?

- Do you ever visit A Runner's Circle's website?

- How much are you willing to spend on running shoes?

- What aspects of this store drew you to it?

- Are you looking to join a running group/community?

- If the store's website provided information about training, health, and other running related topics, would you be interested in reading this blog?

- What features do you care most about when buying running shoes?

- Chris is in his late 20's and has been running consistently for a few years

- He exercises most days, but in addition to running likes to do spin classes

- He frequently competes in local road races (5k, 10k)

- He would like to run a half-marathon this year

- He wants to continue to stay fit and active

Secondary Persona - Novice Runner​​​​​​​

- Sara is in her early 30's and has never consistently run before

- She sometimes goes to the gym but prefers other forms of cardio

- She wants to run with others in order to lead a healthier lifestyle

- She wants to run her first 5k this year

- She wants to try and run every other day

Now that I had a better understanding of my personas, I listed a handful of tasks that, based on their goals and needs, they would want to accomplish on the site.

As an avid runner, I want to visit the store's blog to read articles.

As an avid runner, I want to use the search bar to look up products and filter my results.

As a novice runner, I want to be able to sign up for the store's newsletter.

As a novice runner, I want to visit the store's calendar that lists upcoming events.

Chris likes to stay in shape by exercising in a variety of ways. He primarily lifts weights, goes to fitness classes, and hikes with friends. Chris has some running experience, but does not consider himself a "runner." He recently saw a post for a half-marathon in his city and wants to challenge himself. However, he does not know which running shoes to purchase and does not understand how to train for a half marathon. When searching online he found A Runner's Circle, a local running shoe store.

On the store's website, he was able to find the store's information as well as a page explaining how they fit their customers for the right shoes. Chris was also able to see which shoes and gear the store has in stock. Finally, Chris came across the store's blog that posts articles about training and nutrition in addition to a list of running groups in the area. After seeing this information and the store's embedded social media posts, Chris is now interested in visiting the store.

1. Go to the products section of the site

2. Filter to find specific items

4. Check if the store has the item in stock

1. Go to the events page

2. Filter events by category like running clubs and races

3. Learn about the event's details

After conducting my own research which included visiting popular running shoe websites, I created a list of features for the new site that were critical to my personas.

You might have noticed that there was no feature listed for purchasing shoes on this website. Although this might seem odd for a retail business, there are a few reasons why online purchases are not available. After speaking with stakeholders, the emphasis of this business involves selling shoes in person so that they can fit their customers. Because there is only one location, this business does not operate on a scale large enough to support shipping products to their customers. They try to keep their inventory costs low by only stocking shoes that are popular, which minimizes the number of pairs that need to be heavily discounted.

After collecting my user data, I started to think about the layout of the website. The sitemap represents the number of templates that would need to be created rather than the specific content for each page. The sitemap below was my final version that underwent several revisions.

For the first version of my wireframes, I wanted to incorporate all my design ideas so I created each wireframe from scratch using Sketch. The wireframes provide us with a preliminary idea as to how the website will look. I only used white and gray for this first version so I could focus more on the design and not worry about the color palette. Both wireframes below are my final versions.

As I started creating my responsive wireframes, I needed to think about how the website's content would appear when stacked on top of each other. The image below shows the critical screens from my final responsive mockup.

Once I had created my wireframes and mockups, I needed to link the pages together to create an experience similar to that of a mobile website. While my first prototype was done using Sketch, this program is limited because it does not allow for animations. A complete version of my prototype can be found here.

In order to create a more realistic prototype, I used an animation software called Principle. This program is based on the idea that you create two states for a screen, one being the current state and the other being the desired state. The program will recognize the changes in the screens and allow you to adjust the transitions (like speed and direction). While the effects created a more realistic user experience, it was too time-consuming to create a few animated transitions. You can see a recording of my Principle prototype here.

In order to further understand two of my users' critical paths, I created prototype scripts that outlined the specific steps that needed to be taken for each path.

Screen 1 - 1.0 Homepage, user scrolls down to the bottom of the screen to the footer

Screen 2 - 1.0 Homepage, user clicks on the hamburger menu and goes to the Category Selector

Screen 3 - 2.0 Category Selector, user clicks on the Men button and goes to the Gender Submenu

Screen 4 - 2.0.1 Gender Submenu, user clicks on the Shoes category and goes to the Subcategory Landing Page

Screen 5 - 2.1 Subcategory Landing Page, user chooses a pair of shoes from this page and goes to the Product Detail Page

Screen 6 - 2.2 Product Detail Page, user views specifics about the shoes they selected

Screen 1 - 1.0 Homepage, user scrolls down to the bottom of the screen to the footer

Screen 2 - 1.0 Homepage, user clicks on the hamburger menu and goes to the Category Selector

Screen 3 - 2.0 Category Selector, user clicks on Events and goes to the Calendar

Screen 4 - 3.0 Calendar, user can view upcoming events and click on an Event Detail Page

Screen 5 - 3.1 Event Detail Page, user can learn more about an upcoming event

My research plan outlined all the necessary details for conducting an effective research study, including asking relevant and probing questions and having users perform a variety of tasks using a prototype.

Goals: Determine if the user can efficiently navigate the new website and learn about the store's offerings. This includes information about the store, their inventory, and sponsored events.

Assumptions: Users are runners or are interested in running. Users understand how to browse websites for information.

A person who is a runner or someone who wants to start running.

Do you run or want to start running?

1. Have you ever bought running shoes before?

2. If you were to buy running shoes, what places come to mind? (In-store or online)

3. If you have bought running shoes before, what medium did you use (in-store or online) and what did you like/dislike about the experience?

1. You want to visit the store to buy a pair of running shoes. Go to the store's information page to find the hours and location.

2. You are interested in buying running shoes but are unsure about which ones are best for your feet. View the store's page that describes how they fit their customers for the right shoes.

3. You are starting to run more often and want to join a running group. Browse the store's calendar to see upcoming running group events.

4.  You want to learn more about running culture. Explore the store's blog to find articles about running related topics.

5. You want to see if the store has the newest version of a shoe you like. Browse the store's inventory to see if they have it in stock. For this task, look for the "Nike LunarEpic Low 2" shoe.

1. What kind of business do you think this website is for and what do you think you can do on this website?

2. Did the menu titles accurately convey what information would be in that section?

3. Were you ever confused about how to accomplish a task?

4. Was the information on this website organized in a way that made it easily accessible?

5. After learning about their offerings, could you see yourself visiting this store or attending an event sponsored by the store?

For my user testing, I had four members of my target audience perform an unmoderated test using Validately. This platform records the respondent's screen and compiles the information to help you understand your test results.

Below are the compiled results from my user tests.

1. 100% of users passed all the tasks so there was no need for major design changes. That being said, a few respondents commented on how the Calendar page could have been more user friendly. So I added a drop-down menu to make the prototype more realistic.

2. 75% of users said they would shop for shoes online and in-store. They primarily mentioned the in-store advantage of being able to try the shoes on. However, some respondents also mentioned that buying running shoes online gives them a larger selection of inventory and sometimes free shipping/returns.

3. 25% of users noticed that you could not get back to the Calendar from an Event. Even though the browser's back button solves this issue it is not obvious. To fix this problem, a back button was added in the Event header that returns the user to the Calendar.

 4. 100% of users found the article and store information by navigating through the hamburger menu. The hamburger menu was clear, so no changes needed to be made there.

5. 75% of users found shoes by using the search bar. Since users gravitated towards the search bar for looking up products, a more robust search feature could be created. An improved search could include auto-complete and faceted search features.

6. 50% of users commented on not being able to buy shoes through the site. As previously mentioned, stakeholder interactions made it clear that the emphasis of the business is selling shoes to customers in-store. One of the store's main advantages is that they use several techniques to fit each customer for the right pair of shoes. This offering is not available online and is one of the main ways that this store differentiates itself from online retailers. To make this clearer I stated this fact on the Product Detail Pages.

7. There is an important detail that I noticed after conducting my user study. When I told the respondents to find an article, I unintentionally did not give them a specific one. This is different than when I told them to find a pair of shoes, in which case I told them the specific pair. Even though the users could have navigated through the hamburger menu to find the shoes, most of them went straight to the search bar. This showed me that when users are given a very specific task they are more likely to use the option that gets them to their end goal faster. On the contrary, when given a more general task respondents are more willing to navigate the site using the hamburger menu.

A highlight video of my user testing results can be found here.

After performing my user tests and looking at my findings, here are the major changes that I incorporated into my prototype.

Users said they could not understand the Calendar layout. I added a drop-down menu that would help them filter events by category.

Users were not able to return to the Calendar from an Event. The back button takes them back to the store's calendar.

This project vastly expanded my knowledge of user research and usability testing as I was attempting to create a user friendly site. Before taking this course, my design approach simply consisted of adding features until all requirements were satisfied. Now I understand that programmers should also take a goal-based approach by first understanding what their users are trying to accomplish.

I want to give many thanks to my professor, graders, and friends for their input. Their comments and feedback were critical in helping me refine these ideas.

As mentioned before, if you would like to look at my final prototype it can be found here.