Sports App
UX Design
Revamping the Olympics app to offer sports fans customized news and game updates
The redesigned Olympic app serves as a central hub for real-time updates, event schedules, and news about the Olympic Games, keeping fans engaged with their favorite events and athletes. This project enhances usability and personalization while improving the visual hierarchy, making the interface more intuitive and engaging for users worldwide.
Timeline
Fall Semester 2021
(14 weeks)
What I Did
UX Research, UX Design, Wireframe, Prototype, Usability Testing
Team
Independent Project
Tool I Used
Redesign Goal
The redesigned Olympic app focuses on consolidating features by combining similar functions to enhance usability and reduce clutter. A customizable interface allows users to personalize their experience, ensuring information is more accessible and relevant. By simplifying the design and reducing information overload, the app provides a cleaner interface, improving ease of navigation and overall user satisfaction.
Outcome
The redesigned app streamlines the user experience with improved visual hierarchy and an optimized user flow, enabling users to quickly find the information they need. Enhanced customization features help users to focus on their favorite teams and events, providing a personalized and efficient way to navigate the vast array of Olympic games and schedules.
Favorite Team
Match Reminder
Sports News Sharing
Problems
Analyzing the current Olympics App
Visual Design
The app's poor visual hierarchy creates a cluttered interface, making navigation difficult. Additionally, the overall visual style lacks consistency.
Functionality
Although users can select favorite teams and sports, the interface does not adapt to their preferences, limiting personalization.
Opportunity
How might we help sports fans easily navigate and access the information they care about in the complex and diverse context of the Olympics ?
Competitors
Design Insights from Competitive Analysis
ESPN
Bleacher Report
TheScore
→ Inspired by visually appealing and smooth interfaces, I prioritized a clean and user-friendly layout.
→ Solved the issue of broad groupings by introducing detailed categorization, making it easier to access specific sports and teams.
→ Added interactive elements while focusing on timely updates and reliable content to improve user experience.
App Store Reviews & Users Interviews
What Users Are Saying
"I wish this app had the medal count by the flag and then you opened for the details."
"The app should integrate all Olympic events and information in one place, making it easier for audiences to follow everything."
"As a non-sports professional, I didn’t know marathons are listed under Athletics, so I couldn’t find marathon game information easily."
"The UX is poor, lacking basic features like event reminders. Filters aren't saved, and selecting a favorite country only affects the medal count display."
"The classification of sports is confusing—some categories are grouped together while others are separated, making it hard to find information."
"This app does not remember what country or sports you like."
"The app just lists the competition times and results. It would be better if it included local information or stories about athletes to engage the audience more."
"There is no 'remind me' feature to notify users about upcoming games, which would make the app much more useful."
Research Insight
Research Insights That Guided My Design Focus
Improve Visual Hierarchy
Redesigned the interface to present game information more clearly, allowing users to quickly find the details they need, such as event times, scores, and results.
Optimized Search Functionality
Introduced improved search tools, including filters that enable users to quickly search by teams and events, ensuring faster access to relevant information.
Personalized Information Display
Designed a personalized experience where users select favorite teams or sports, and the app dynamically adjusts to display relevant information.
Optimized Information Architecture
The new design encourages exploration with personalized recommendations and engaging visuals, increasing user interaction.
User Flow
Step-by-Step Interaction Breakdown
Task 1: Set team USA as favorite team
Task 2: Set a reminder of Boxing Women’s fly (48-51kg) final game
Design System
Building a Unified Design System
All Screens
Comprehensive View of All Designs
Click on any thumbnail to see the images come to life in full-size!
Home Page
① Add a Quick View of the event status at the top of the homepage, allowing users to immediately see the highlights of key matches upon opening the app.
② Present sports news in a concise format with headlines limited to 10 words, allowing more news items to appear on the screen for users to choose from.
News (Latest) Page
① Research shows users rarely use the top categorization bar, so I removed it to reduce confusion.
② This page highlights news in three tiers: most important (largest), moderately important (medium), and least important (smallest) for clear prioritization.
News (Latest) Page
① Enable users to swipe horizontally to select the dates they want to view.
② Redesign the visual hierarchy of the event schedule to reduce clutter.
③ Based on feedback from sports experts, brackets clearly present match schedules and formats, so I included them here.
What I Learned
Emotional Connection Through Clarity
A Thai interviewee shared, "During the pandemic, the Tokyo Olympics brought hope to audiences." This insight inspired me to prioritize clarity and accessibility in the app’s design, strengthening the audience’s emotional connection to the event.
Simplifying Complex Data
Managing the Olympics’ extensive data—unique rules, scoring systems, and schedules—was a significant challenge. I learned how crucial it is to organize complex information in a way that users can easily understand and engage with.
