High fidelity prototypes | Mobile
Score - Case Study
Score - Case Study
Project overview | Mobile & web application
Project Overview |
Mobile & Desktop Application
Project overview | Mobile & web application
"Score" is an application that let's anyone host or join sport events with local players designed for anybody from casual players, to active sports enthusiasts, to event organizers and coaches. Score is a proposal for humans who want to compete, have fun and stay healthy in an era of instant gratification.
"Score" is an application that let's anyone host or join sport events with local players designed for anybody from casual players, to active sports enthusiasts, to event organizers and coaches. Score is a proposal for humans who want to compete, have fun and stay healthy in an era of instant gratification.
|
Solo Project
:( unfortunately
|
My Role
UX designer, Researcher
|
|
Solo Project
Timeline
:( unfortunately
Mar 2024 - May 2024
|
|
My Role
Tools
UX designer, Researcher
Figma, Lucidchart
|
Timeline
Mar 2024 - May 2024
|
Tools
Figma, Lucidchart, Notion
|
Responsibilities
(UX) Research, Design, Testing
We are built to move. | Problem statement
We are built to move. | Problem statement
Many sports enthusiasts struggle to find and organize local games that match their skill level, schedule, and location preferences. Existing options for arranging casual sports meetups are often fragmented, unreliable, or lack features that cater to both recreational and more competitive players. This results in missed opportunities for staying active, building social connections, and improving in their chosen sports.
Many sports enthusiasts struggle to find and organize local games that match their skill level, schedule, and location preferences. Existing options for arranging casual sports meetups are often fragmented, unreliable, or lack features that cater to both recreational and more competitive players. This results in missed opportunities for staying active, building social connections, and improving in their chosen sports.
So… | Goal
So… | Goal
My goal is to design an intuitive, engaging platform that makes it easy for people to find, join, or host sports matches in their area. This app aims to foster a dynamic community, providing users with location-based game discovery, reliable scheduling, and skill-matching options to encourage participation, convenience, and connection
My goal is to design an intuitive, engaging platform that makes it easy for people to find, join, or host sports matches in their area. This app aims to foster a dynamic community, providing users with location-based game discovery, reliable scheduling, and skill-matching options to encourage participation, convenience, and connection
Welcome to
SCORE
Welcome to
SCORE
My Design Process
My Design Process
The backbone of user-centric design | My process
The backbone of user-centric design | My process
The backbone of user-centric design |
My process
|
11 User Flows
7 Desktop, 4 Mobile
|
9 Interviews
Real humans :)
|
2 Surveys
100 Participants Total
|
Competitive Audit
Playo, Sporty, Reclub
|
11 User flows
7 Desktop, 4 Mobile
|
9 Interviews
Real humans :)
|
2 Surveys
100 Participants Total
|
Competitive Audit
Playo, Sporty, Reclub
User research results and key findings
User research results and key findings
(01) They don't know.
~80% of The sport enthusiasts I surveyed were not aware about the existence of platforms such as Playo or Reclub. 65% of Students that are actively participating in a team sport between the ages of 17 and 22 have reported only practicing their respective sport with their team or alone. 100% of these participants wish they could compete in their respective team sports outside of their clubs or teams.
"If I knew I would've been using these apps."
"If I knew I would've been using these apps."
Anonymous badminton player (translated from french)
Anonymous badminton player
Anonymous badminton player
(translated from french)
"Going to public courts is fine but the people playing often aren't very good."
"Going to public courts is fine but the people playing often aren't very good."
Anonymous volleyball player (translated from french)
Anonymous volleyball player
Anonymous volleyball player
(translated from french)
"Volleyball is fun but none of my friends play, it'd be nice to be able to play real matches with decent players"
"Volleyball is fun but none of my friends play, it'd be nice to be able to play real matches with decent players"
Anonymous volleyball player
Anonymous volleyball player
Anonymous volleyball player
(02) Experience
The few people that are aware of sport finding applications have reported not using them because they are unable to find any games. This relates back to (01), these kind of applications require a large amount of users to be viable in medium sized neighborhoods or communities.
(01) They don't know.
~80% of The sport enthusiasts I surveyed were not aware about the existence of platforms such as Playo or Reclub. 65% of Students that are actively participating in a team sport between the ages of 17 and 22 have reported only practicing their respective sport with their team or alone. 100% of these participants wish they could compete in their respective team sports outside of their clubs or teams.
(02) Experience
The few people that are aware of sport finding applications have reported not using them because they are unable to find any games. This relates back to (01), these kind of applications require a large amount of users to be viable in medium sized neighborhoods or communities.
User pain points
User pain points
Lack of skill-based matchmaking.
Lack of skill-based matchmaking.
Inconsistent scheduling, poor organization.
Inconsistent scheduling
Inconsistent scheduling
Limited social connections.
Limited social connections.
Limited sport options
Limited sport options
Lack of centralized social platform.
Lack of centralized social platform.
Safety concerns.
Safety concerns.
Unreliable attendance.
Unreliable attendance.
Difficulty finding local games.
Difficulty finding local games.
Based on these findings, I narrowed down the most critical issues I would need to focus on alongside features I found using the MoSCoW method. 8 is not highlighted as it isn't a pain point I can faithfully address with design alone.
Based on these findings, I narrowed down the most critical issues I would need to focus on alongside features I found using the MoSCoW method. 8 is not highlighted as it isn't a pain point I can faithfully address with design alone.
MoSCoW prioritization matrix
MoSCoW prioritization matrix
Must have
Must have
Report function
In-app payments and bookings.
Option for skill level filters.
RSVP functionality.
Location-based search.
Report function
In-app payments and bookings.
Option for skill level filters.
RSVP functionality.
Location-based search.
Should have
Should have
Rating system for other players.
Waitlist.
Centralized messaging platform.
Profile badge and achievements.
Rating system for other players.
Waitlist.
Centralized messaging platform.
Profile badge and achievements.
Rating system for other players.
Waitlist.
Centralized messaging platform.
Profile badge + achievements.
Could have
Could have
Social media integration.
Personal stat tracking.
Social media integration.
Personal stat tracking.
Won't have
Won't have
Wearables integration.
Live-streaming or recording of games.
Wearables integration.
Live-streaming or recording of games.
Competitive audit
Competitive audit
I measured all my biggest competitors in terms of what they do well and what they don't. By doing so I was able to gather good ideas/solutions, as well as elements to avoid while building SCORE.
Key information retained:
Playo
Playo
No web functionality (desktop & Mobile).
No web functionality (desktop & Mobile).
Major connection issues.
Major connection issues.
Extensive resources (nutrition, tactics etc.)
Extensive resources (nutrition, tactics etc.)
In-app venue booking
In-app venue booking
In-app messaging platform
In-app messaging platform
Large variety of sports
Large variety of sports
Sporty
Sporty
Only available in Norway
Only available in Norway
"Clunky" user interface
"Clunky" user interface
Limited options apart from booking.
Limited options apart from booking.
Recurring match function
Recurring match function
In-app venue booking
In-app venue booking
Reclub
Reclub
No web functionality (desktop & Mobile).
No web functionality (desktop & Mobile).
Geared towards serious sports organizers
Geared towards serious sports organizers
Report function
Report function
Tournament feature.
Tournament feature.
In-app messaging platform
In-app messaging platform
Detailed game descriptions
Detailed game descriptions
Ideate
Paper wireframes
Paper wireframes
The sketching and brainstorming step helped me visualize the app's layout and core functionality. Sketching the frames alongside constructing the information architecture created a clear direction for potential user flows.
The sketching and brainstorming step helped me visualize the app's layout and core functionality. Sketching the frames alongside constructing the information architecture created a clear direction for potential user flows.
*Apologies about the quality of these pictures.*
*Apologies about the quality of these pictures.*
Information architecture
Information architecture
I value an efficient information architecture because it creates a clear direction for potential user flows.
I value an efficient information architecture because it creates a clear direction for potential user flows.
Prototype
Lo-fi wireframes
Lo-fi wireframes
Featured desktop wireframes:
Featured desktop wireframes:
Featured Mobile wireframes:
Featured Mobile wireframes:
Visual identity | Colors
Visual identity | Colors
Master gradient
#5282FF, 0045F5
Master gradient
#5282FF, 0045F5
Blue off-white
#EBEDFF
Blue off-white
#EBEDFF
Action green
#68F06C
Action green
#68F06C
Blue dark-grey
#27282B
Blue dark-grey
#27282B
Hot pink
#FF4694
Hot pink
#FF4694
Blue black-grey
#18191B
Blue black-grey
#18191B
Master gradient
#5282FF, 0045F5
Blue off-white
#EBEDFF
Action green
#68F06C
Blue dark-grey
#27282B
Hot pink
#FF4694
Blue black-grey
#18191B
Style Guide | Typography & components
Style Guide | Typography & components
Aa
Arial rounded MT Bold
Typography
H1
H2
H3
Paragraph medium
Paragraph regular
Paragraph small
Size
90
32
24
20
16
10
Weight
Bold
Bold
Bold + 0.4 stroke
Bold
Bold
Bold
Purpose
1.2.3.
Main headers
Card headers & details
Paragraph headers
Paragraph sub headers
Payment details and descriptions
Dropdown button
Default 1
Variable
Hover / on tap
Variable
Default 2
Variable
Hover / on tap 2
Variable
Next / Let's go button
Default
1fr
Hover / on tap
1fr
Option switcher
Option
Option
Option
Opt. 1
Opt. 2
Opt. 3
Continue button
Default
Text
Text
Text
1fr
Hover / on slide
1fr
Slider
Default
1fr
Hover / on slide
1fr
Basic button
Default 1
Text
Variable
Hover / on tap
Text
Variable
Form field
Default 1
1fr
Hover / on tap
1fr
Mobile icons
The use of arrows in my design language strongly reinforces direction.
Implementing feedback
Implementing feedback |
Desktop
Featured updates (web & mobile):
Featured updates (web & mobile):
Version 2:
Version 2:
Version 3 (final):
Version 3 (final):
It didn't make sense to put some input cards in the main page and the rest in the 2nd, this layout was confusing amongst testers.
It didn't make sense to put some input cards in the main page and the rest in the 2nd, this layout was confusing amongst testers.
Version 2:
Version 2:
Version 3 (final):
Version 3 (final):
I left the location picker on the main page and the rest of the options in the 2nd as the radius & location was the the most stable input in contrast to time or difficulty.
I left the location picker on the main page and the rest of the options in the 2nd as the radius & location was the the most stable input in contrast to time or difficulty.
Version 2:
Version 2:
Version 3 (final):
Version 3 (final):
All the information in version 2 was already present on the previous page, making it look jarring and disorderly. On the third and final version, I cleaned things up, also making the component easily transferable to the mobile application.
All the information in version 2 was already present on the previous page, making it look jarring and disorderly. On the third and final version, I cleaned things up, also making the component easily transferable to the mobile application.
Version 1:
Version 1:
Version 2 (final):
Version 2 (final):
Comparatively to other applications, my first iteration of the home screen showed direction but no clear functionality. The 2nd version shows a much clearer home screen for the mobile app.
Comparatively to other applications, my first iteration of the home screen showed direction but no clear functionality. The 2nd version shows a much clearer home screen for the mobile app.
Humans are built to move.|
Problem statement
Many sports enthusiasts struggle to find and organize local games that match their skill level, schedule, and location preferences. Existing options for arranging casual sports meetups are often fragmented, unreliable, or lack features that cater to both recreational and more competitive players. This results in missed opportunities for staying active, building social connections, and improving in their chosen sports.
So… | Goal
My goal is to design an intuitive, engaging platform that makes it easy for people to find, join, or host sports matches in their area. This app aims to foster a dynamic community, providing users with location-based game discovery, reliable scheduling, and skill-matching options to encourage participation, convenience, and connection
High fidelity prototypes | Mobile
High fidelity prototypes | Web
High fidelity prototypes | Web
Reflection
Thoughts and experience
Thoughts and experience
Score was a passion project, the idea actually stems from the lack of a good sporting platform when my friends and I wanted to play volleyball.
Score was a passion project, the idea actually stems from the lack of a good sporting platform when my friends and I wanted to play volleyball.
What I learned
What I learned
Paper wireframes help.
Ask for critiques and advice OFTEN.
Prioritize target user instead of a broader population.
Working with solo is not fun, very lonely.
Paper wireframes help.
Ask for critiques and advice OFTEN.
Prioritize target user instead of a broader population.
Working with solo is not fun, very lonely.
I want to draw/design/make wonderful things, for wonderful people.
Leo Fu
I want to draw/design/make wonderful things, for wonderful people.
Leo Fu
Made with LOVEEEEEEEEE, thank you!
© 2024 Leo-Yilu Fu. All Rights Reserved.