Sporty App

Play Sports & Make Friends with Active People
UI/UX
Product Design
Research
Testing

Overview

This bootcamp project aims to create an app for people to play sports and make friends with active people.
My Roles
  • Solo UI/UX Designer
  • Solo Product Designer
  • Solo UX Researcher
Specifications
Duration:
  • May 27, 2024 - Aug 8, 2024
Tools:
  • Figma
Deliverables
  • Secondary Research & Screener Survey
  • One-on-one Interviews
  • Affinity Mapping & Empathy Mapping
  • Personas
  • JTBD & HWM Statements & User Stories
  • Heuristic Analysis
  • User Flows & Site Map
  • Low Fidelity Wireframes & Prototype
  • High Fidelity Wireframes & Prototype
  • Usability Testings

Problem

People struggle to play sports once they leave school.

Solution

After 2 rounds of usability tests and numerous iterations based on test results and feedback, here are the key features of the final design.
Join Plans Effortlessly.
Join the right plans that suit your needs.
Create Plans within Seconds.
Create sport plans with organized sections with ease. Let's get creative!
Connect with Local Players.
Connect and meet local players to play sports.
Chat Before Meeting up.
Chat and get familiar with others before hanging out.
Profile that Reflects Interests.
Show and find compatible players through sports that you're interested in.

Research

From secondary research, studies have found that:
  • 31.5% of participants cited time constraints as the top barrier in sports participation.
  • 30% of participants do not have access to parks / recreational facilities within a 10 minute walk from home.
  • Participants who join sport clubs and organizations have a higher participation rate in sports.
  • Gen Z holds the highest participation rate (55%)  among common sports in the US.
Primary Research
To better understand the problem space, I recruited 5 participants through screener surveys for one-on-one interviews. Below are the shared attributes of the 5 participants:

Affinity Mapping

To synthesize data from interviews , I started with affinity mapping, breaking 127 data points into 3 main themes: Preference, Pain points , and Solutions.

Empathy mapping

With Empathy mapping, I was able to identify the two target personas :
  • Working professionals who play sports casually
  • Young adults who play sports competitively

Personas

Through Personas, I was able to identify the needs, experiences, behaviors, goals, and pain points of the target users.

JTBD & HWM Statements

I listed out the jobs, needs, and circumstances of the target users using the JTBD framework, and came out with 4 HWM Statements as listed below: 
1. How might we help people find players nearby to play sports?
People struggle to play sports when they lack connections.
Proposed Solution 🛠️
An app that allows people to find games and players nearby.
2. How might we help people find players with similar skill levels to enjoy sports?
People find it difficult to enjoy sports with huge skill gaps between players due to the lack of competitiveness.
Proposed Solution 🛠️
An app that allows people to find games and players based on their skill levels.
3. How might we help people get to know each other better to start conversations?
People find games less enjoyable without someone to talk to during, and after games.
Proposed Solution 🛠️
An app that allows people to chat and make conversations before meeting in real life.
4. How might we help people identify respectful players to play regularly?
People tend to stop attending games if they encounter players who are disrespectful and aggressive.
Proposed Solution 🛠️
An app that allows people to add friends with each other and focuses on building friendships with like-minded players.

Ideating Solutions & User Stories

As a solo designer, I started with laddering to ensure that I fully explored and considered multiple facets of the problem space. I then did affinity diagrams and the four categories method to finalize and solidify my solution ideas. Lastly, I did user stories to identify the MPVs.  

User Flows & Site Map

After brainstorming an app solution. Here are the key user flows and site map that I created:

heuristic analysis & Mood boarding & Sketching

To better understand how industry leaders help users to play sports, I did a heuristic analysis on Facebook, Meetup, Bumble for friends, Tennispal, and GoodRec. After mood boarding and iterating on my rapid sketches, here are the final sketches for the app solution:

Early Validation with Paper prototyping

I conducted five one-on-one guerilla usability testings with UC Davis students at my local college gym. After synthesizing the data through affinity mapping, here's what I found: 
Test
Result
Satisfaction rate
4/5
Usability issues
N/A
Findings

Low-fidelity Wireframes

After iterating based on user feedback, here are the
low-fidelity wireframes
:

🔄 Redesign: From player-focused to Game-focused

I decided to redesign the app that prioritizes joining existing games over matching with players since most users find it more useful and efficient. Due to time constraints, I went on designing high fidelity designs and validated the new design through two rounds of usability testings.

Design System

Here is a simplified design system that I have built.

Usability Testings and Key Challenges

Here are the top 3 challenges that I encountered from the 2 rounds of usability tests on red routes with 10 participants in total.
1. Excessive controls making hosting complicated.  
Controls such as repeating games require more hosting management, whereas users want to host games in ease.
Final Solution ✅
  • Make plans as "group chats" to simplify hosting for better flexibility and communication.
  • Make precise location, date, and time optional for better versitility.
  • Remove controls that are less effective and too complex for the users.
2. Sport plans lack versatility for games that have uncertainties.
Due to the complexity on finalizing dates / location / number of players, users feel forced with required inputs before launching the plan.
Final Solution ✅
  • Show city and distance only to non-members.
  • Show full location only towards group members.
3. Users show privacy concerns with public plans revealing locations.
Some users are concerned about privacy issues regarding to unwanted people showing up to the game.
Final Solution ✅
  • Make plans as "group chats" to simplify hosting for better flexibility and communication.
  • Make precise location, date, and time optional for better versitility.

Design validation

The design was validated through two rounds of usability testing and did not encounter errors during the final round. Here are the findings :
1. Intuitive Design and Navigation
Users appreciate the app's intuitive design, user-friendly navigation, and appealing features and visuals.
2. Find Games and Players nearby with Ease
Users find it easy and effective to find games and connect with players nearby.
3. Create Games with Endless Possibilities
Users find game plans (group chats) more flexible and allow them to get creative with their sport related plans.
4. Fun and Friend-focused
Users appreciate the idea of making friends while enjoying sports.

Takeaways  📖

1. Create checkpoints for better time management
I spent too much time on endless iterations, trying my best to fully explore possibilities which decreases the efficient use of time with minimal improvements.
2. Early Design validation minimizes extra work
Through early testings, I was able to redirect and make major changes towards the most efficient way of solving the problem.
3. Quick validations with a UI/UX specialist
Meeting with a UI/UX mentor weekly has improved my workflow and saved time and keeping me on the right track.

If I have more time ⏳

More Projects

Like What You See? Contact

darrenyang.design@gmail.com