Online Sports Team Information For Spectators
A team profile that reimagines how spectators engage with and learn about their team.
Timeframe
November 2023
2 Months
Type
Personal Project
Disciplines
Interface Design
Prototyping
Tools
Figma
During high school, I worked as a contracted photographer for my varsity boys’ basketball team. As I began applying to design schools, I sought out projects that could blend my passion for photography with my growing interest in design.โจโจ
Here’s how it all came together...
Please switch to a bigger screen for the full showcase
Development
Inital Motivations
โ
๐ As an avid basketball photographer, I struggled to find and navigate team information
As a photographer at sporting events, I received illegible paper handouts with information about the teams' games. I noticed that most people discarded them, which created waste and reduced sustainability. Moreover, finding and navigating the team's website had been challenging due to its limited and unattractive information.
๐ก I wanted to develop skills in Figma and UI Design
This was my first user interface and UX project. I wanted to see how much I could learn about Figma and UI design, and also bring my concept idea to life! This project was done before design school, but upon revisiting I refined it.
Market Analysis
Before I started designing the user interface, I wanted to explore what other interfaces looked like, identify their shortcomings, and analyze their strengths.
โ
I focused on two groups for my research: the visual design of current team websites from a fan's perspective and the team staff's perspective on building and maintaining such a website.
Group 1: Visual Design
Available products lacked responsiveness, leading to a poor mobile experience
๐ณ Amateur teams lack the resources that professional teams have
๐ซค Poor responsiveness leads to a worse mobile expierence
Group 2: Website Builders
Current options offer outdated templates or complex builders that hinder non-tech users
Current website builders are not solely focused on sports profiles; they offer build-from-scratch options, which leads to added complexity
๐คทโ๏ธ
๐ซค Poor responsiveness leasds to a worse mobile
๐ฐ๏ธ Outdated design
Define
The Problems
After analyzing the problems, I identified two user groups with distinct issues. This project focused on Group 1, but exploring the other group in the future could be valuable.
โ
I also accounted for coaches' limited time and resources, tailoring design choices to accommodate these constraints.
Spectator Challenges
๐ Difficult to access and navigate information
๐ซค If found, websites are not always user-friendly for less tech savvy users
๐ Traditional handouts are illegible, cluttered, and discarded
๐ฑ Existing platforms lack responive layouts
Coach and Team Staff Challenges
๐ป Existing platforms don't offer much flexibility to tailor content.
โฑ๏ธ Staff often lack the skills or resources for a modern, up-to-date design.
Target Audience
๐ต๐ป๐ง๐ฝ๐จ๐ป๐ฆฐ
Primary
Spectators
People who attend the game could be fans, photographers, or scouts. They are of all ages.
๐๐จ๐ป๐ป
Secondary
Coach and Team Staff
Individuals responsible for managing the team and supporting media-related efforts.
How might I create an accessible and engaging digital platform that provides fans with instant access to team information while also being easy for coaches and team staff to manage?
Information Architecture
Design
Wireframe
Color and Home Page
A common theme throughout my projects is ensuring that the color scheme of the interface reflects the character of the product, team, or object. Using a variable color that changes based on the context creates a sense of unity between the UI and the overall experience.
Adaptive Design
In designing the UI, I considered the team staff's perspective. Coaches can input two team colors, and the platform automatically adapts the UI to match, ensuring versatility and adaptability.
Revisions a Year After
Revisiting this project a year after I created it, and after spending some time in design school, I enjoyed seeing the improvements I could make. I've learned how much visual design matters, and how small changes can make a big difference.
The Solution
Quick Access
Scan the QR-Code
Using a QR code scan posted at events allows for easy access via phone. They can be placed at doorways, in the bleachers, or on the jumbotron hanging in the air at a sporting event.
Homepage
Glance at the options
After scanning the QR code, fans are directed to quick access buttons and scrollable categories that provide easy navigation and a quick overview.
Media
Explore stories and highlights
Browse the team's roster and coaches, with the option to view detailed information about recent events.
Schedule
View how the team is preforming
View how the team is performing this season with the ability to get notifications for future games.
Roster
Find out who is playing
Browse the team's roster and coaches, with the option to view detailed information about each individual player.
Mobile and Desktop
Next Steps
I designed this UI with the intent of customizability. Originally, I approached this project utilizing masked cutouts of players and images. If I wanted to widespread this UI design, I realized that I had to create a compatible image and text layout.
Final Thoughts
Reflections
๐ Design is always evolving
This was my first time designing a User Interface, and revisiting this project after a year in design school has been valuable. I've learned so much from my studies, and seeing how I can apply that knowledge to old projects really highlights my growth. The process of constantly revising and refining designs has reinforced the idea that design is always evolving and never static.
๐ต๏ธโ๏ธ Dig deep into users
This project primarily focused on the visual aspects of design. If I were to revisit it in the future, I’d like to dive deeper into the research side of product development, exploring how user insights can inform and enhance the overall experience.