Research Plan

To understand the user’s need, it is important to create a research plan before diving into the research phase. I listed research goals, research questions, assumptions, methodologies, participants, and timeline in my research plan.

Research goals:

• Identify the target audience of Sport Club
• Understand the market of platforms related to Sport Club
• Learn about how people are managing their time and money for sport
• Get to know about how people choose a fitness trainer or sport club

Assumptions:

• Members like to choose a professional fitness trainer
• Members prefer to have wide range of selection with variation prices
• Members like to get a diet plan in addition to exercise
• Some members tend to exercise at home under the supervision of a fitness trainer
• Members are constantly looking for a better fitness trainer

Methodology:

• Secondary Research (Market Research)
• Primary Research (User Interview)

Secondary Research

Market Research: Understand the platforms related to sport club, as well as the target audience

Primary Research

User Interview

To understand the user’s need, I tried to dive deeper and make a real connection with members and fitness trainers, to gain direct insights by primary research.

I created an Interview Guide to facilitate the user interview process for both members and fitness trainers, with 10 open-ended questions listed to invite the participants to share their experiences and stories.

In total, 25 participants - members (12 males and 13 females) and 10 participants - fitness trainers (5 males and 5 females) were interviewed about their demands and exercises experience.

Persona

Since I have collected a bunch of data from user interviews, as well as their goals and needs, I use the user persona to represent the needs of a larger group of users. It gives me an idea of how to meet users’ needs or challenges. to address the major needs of the most important user groups. It is both fictional and realistic.I created three major persona for both members and fitness trainers.

Persona for user type #1: Members

Persona for user type #2: Trainers

User Flow

This process helps me walk in an individual user's shoes, and think different about things that the user might encounter with. A complete user flow can be viewed here.

Application Map

Now, I want to build the diagram of an application that shows how pages are prioritized, linked, and labeled. It's also a great way to see all of pages as a whole, and it helps me to visualize the relationship between the content and examine the hierarchy. A complete Application Map can be viewed here.

Wireframe

Sketches

I started sketching low-fidelity screens. I can establish the basic structure of a page and to highlight the intended function of each element. It also enables me to examine my ideas before visual elements like color or fonts are added to the mix.

Mid-Fidelity Prototype

Creating a mid-fidelity prototype is so beneficial for recognize some problems before spending too much time on details. The mid-fidelity prototype was created by Figma application. I used figma to link pages for usability testing.

Usability Testing

A usability study is a research method that assesses how easy it is for participants to complete core tasks in a design. During a usability study, I followed participants as they interact with the product. The user's feedback helps me make important improvements to the user experience. So, I wrote a usability testing plan to define what and why I want to test and get prepared for the test.

Conduct Usability Testing

I then conducted both moderated and unmoderated usability testing with 5 participants, and made notes in excel for each participant based on my observation of their interaction with the prototype. I wrote down their mistakes, slips, and confusions they expressed in the process. This transcript is a perfect raw material for summarizing the patterns of user’s interaction with the prototype.

Affinity Diagram

An affinity diagram is a method of synthesizing that organizes data into groups with common themes or relationships. Affinity diagramming is a quick and easy way to gather observations during a usability study and synthesized data.

I used a unique color for representing each participant, and categorize the observation. I only listed patterns that are shared by a majority of participants. For each pattern, I considered one insight, and generate one recommendation. I then ranked the recommendation based on the priority level, where I will fix problems that affect key functions for our application. A complete an affinity diagram can be viewed here.

Patterns

• 3/5 participant wanted to bold “register in application”. This means that for most users is difficult to find it.
• 3/5 participant wanted to fonts become bigger in different screens.
• 3/5 participant had trouble finding the clickable link such as links in member’s profile.
• 4/5 participant were confused by finding various workout plans in trainers list.
• 2/5 participants wanted change some features and be more user friendly in member’s profile screen
• 1/5 wanted to add purchased workout plans link in hamburger menu.

Insights

• Users think that it’s better to bold or change color for “register now” in login screen
• Users need to see all text more bigger
• Users want to see buttons instead of links for main actions
• Users thinks it’s difficult to access fitness trainer’s workout plan
• Users want to have a simple profile and have access different part of it easily
• User wants add an important feature in main menu

Recommendations

• Change color and font for “register now” to bold it (High Priority)
• All fonts in application should become bigger (High Priority)
• Some links must replace with button style (High Priority)
• Access to workout plans in fitness trainers list need to shorter process (High Priority)
• Categorize information in member’s profile and add button instead of links (High Priority)
• Add some requested information in main menu (Moderate Priority)

Logo Design

I sketched logo for application to establish the brand identity. At first, I started brainstorming objects related to sport club’s name and sketched logos as many as I could. Then I chose one of them and digitized it with Photoshop.

Style Guide

I also developed the visual style of application through the style guide. It includes logo design, color palette, typography, that helps UI design later.

UI Kit

A UI kit, or user interface kit, is a collection of assets that contains a set of design elements such as UI components and styles. UI components are elements that convey meaning and provide functionality to users. A complete UI Kit can be viewed here.

High-fidelity prototypes are detailed, interactive versions of designs that closely match the look and feel of the final product. I created a high-fidelity prototype which have these three pieces:

• visual elements like color, images, icons, and typography.
• navigation to help users move between screens.
• interaction, like gestures and motion, which make the prototype function.

Final, Interactive Prototype can be viewed below or THIS LINK