Client: RockQuest Climbing Center

Role: User Experience Designer 

Objective: Redesign the RockQuest website to a mobile-friendly, responsive design based on user and business needs

 

Project Background

RockQuest Climbing Center wants to redesign their website to be responsive and revamp their branding so their business remains at the top of the market while competitors open up around them.

To understand the situation deeper, the designer will reach out to the business to have a meeting to learn about the business’s design goals. In addition, user interviews will be conducted to discover the needs of the user.

The intersection of the business’s goals and the user’s needs will determine priorities of the new design.

placeit (10).png


search.png

Research 

Building empathy with the user and uncovering their needs through in-person interviews and secondary research

Research Goals 

  • Conduct a site audit of current RockQuest website

  • Meet with RockQuest business owner to determine the business design goals, the target user, and brand values.

  • Use secondary research to fill in any unanswered questions about the business and the market

  • Conduct user interviews to build empathy and uncover needs

  • Use interviews to create an empathy map to uncover insights and user needs -- develop into persona

Methods

  • User interviews: Interview the business owner to understand their needs and goals for this project. Conduct user interviews to learn about user’s experience through in-person interviews/conversations.

  • Secondary research: Learn additional information about the business and industry through online research.

Empathy Mapping

Notes from 7 different user interviews were taken on different colored Post-It Notes, each color corresponding to a user. Research notes were then divided into categories: Doing, Thinking + Feeling, Seeing, Hearing, Pains, and Gains. This method, called empathy mapping, is a way to organize research findings reveal the problems and mindset of the users. Empathy mapping takes all the different pieces of data and creates a cohesive vision that is human-centered. It also makes it easier to find patterns across the data. 

Themes developed from this data became insights, which defined user needs for this project. 

Screen Shot 2017-12-03 at 6.34.29 PM.png

Persona

A persona was developed to present data found from research in a way that is easy to relate to and understand on a human level. It keeps the user and their needs at the center of the design process and helps eliminate designer assumptions as the design process moves forward. A provisional persona was also created prior to research based off of any known user information, which helps get the design team on the same page and reveal assumptions before research begins. The final persona is then defined based on data from research. 

rockquest_persona.jpg

strategy.png

Strategy

Using research to define needs, ideate solutions and test preliminary designs

Asking the right questions

Research results are then synthesized in order to reveal insights and needs. Insights, developed from empathy mapping research, are based off of the main themes found and are used to define user needs. Needs are then written from the user’s perspective with Point of View (POV) statements to help keep the design centered around the user’s needs. POV statements are then rephrased into “How might we..?” (HMW) questions to help with brainstorming solutions for user needs.

POV-HMW chart RQ.png

Defining where user goals and business goals intersect 

I created a Venn diagram of RockQuest's business goals compared to the goals of RockQuest visitors. This shows how the needs of the user and business relate to each other so that going forward the design isn't overly focused on one side's needs. 

RQ business and user goals.png

Brainstorming solutions

I did 5-minute brainstorming sessions using Post-It Notes to brainstorm features that would solve the pre-determined needs. Ideas were then organized into a feature matrix to show what should possibly be developed first based off of low cost/high value to user.

Screen Shot 2017-12-03 at 7.41.05 PM.png
Screen Shot 2017-12-03 at 4.48.59 PM.png

Prioritizing Solutions 

I created a product roadmap based off of the three determined top needs that I brainstormed for. This gives an overview of what solutions are going to be executed on, and prioritizes them. This makes it clear on which features will be developed for this project with the available time and money, and what possible future developments there are beyond the scope of this project.

Sitemap & User Flow

The sitemap shows the websites architecture or structure and shows pages relationship to one another. It also helps show what pages will need to be designed and developed. 

The user flow shows the path a user would take if they had never been to RockQuest before and wanted to learn more about how rock climbing at the gym works for a first time visitor.

It outlines the user's journey through the website and provides the basis for what pages need to be developed. It provides an opportunity to make sure the experience is in line with the user's needs & doesn't leave out any steps in what they're trying to accomplish. It's easier to edit the flow during this phase instead of later on in the process.

sitemap RQ.jpg
user flow v2.png

uiicon.png

User Interface Design 

Using testing findings to develop high fidelity wireframes and UI kit

Low-Fidelity Wireframe Sketches 

From the site map and user flow, I began sketching out the key pages that would be needed to be designed in Sketch and prototyped. This helps to quickly get initial ideas and plans drawn out and edited before spending time on digital designs.

Mid-Fidelity Wireframes

Mid-Fidelity wireframes were then made in Sketch to be used of a prototype made in inVision. This prototype was then used for initial user testing to reveal any pain points with the structure of the site. Testing with grayscale wireframes helps the user not be biased towards images/colors they may favor and focuses the attention on the underlying structure.

Usability Testing

  • User story: Taylor has some friends who are into rock climbing and they invited him to meet them at a climbing gym called RockQuest. He’s never climbed before, so he pulls out his phone to lookup RockQuest and get an idea of what to expect and how to get started.

  • Method: Observe user behavior and have them think out loud through their actions

  • Measurement: Document any frustrations, pain points, or confusion the user encounters -- and how many attempts is takes to achieve each task. Measure error-free rate and task-completion rate.

placeit (9).png

Usability Testing Results

I tested my mid-fidelity prototype with five in-person users. Users were all given the tasks to 1) Find beginner climbing info, 2) Sign up for a climbing class, 3) Sign the waiver, 4) Find facility information. I documented and frustrations or confusion I observed and to then develop design recommendations for the final designs.

Screen Shot 2017-12-03 at 4.47.00 PM.png

UI Kit

Artboard.png