Overview
My Role
Team Spotlight
Product Design
Motion Design
Product & Engineering
Business & User  Goals
01
Developed a cohesive TC brand identity for App Store visuals, highlighting 2024 features with engaging UX writing and a fun user experience to boost app downloads and engagement.
02
Established a centralized TC component library—a single source of truth for responsive, scalable components—supporting light and dark modes as well as mobile and tablet devices.
Challenges
01
Balancing speed and quality under tight deadlines—while refreshing the App Store’s brand visuals, prioritizing design system updates, and leading parallel projects—was no small feat!
02
Developing an engaging App Store design that showcases live sports data storytelling—while ensuring detailed, accurate content and submission mocks—was another major challenge.
đź””
Disclaimer
Certain design processes and data have been purposefully excluded in compliance with NDAs to safeguard the confidentiality of both the company and its clients.
Impact
+60%
YoY Player Growth
This project contributed in part of the player growth. By Q3 2024, the men's bracket grew by 15% and the women's bracket surged by 45%!
564
Component Optimized
Enhanced 73 components, accounting for 564 total states and variants. All were responsive and scalable across dark and light modes.
1
Variables Workshop
Led a workshop on building efficient component libraries with variables, empowering the team with new design system techniques.
1
Single Source of Truth
Created the first TC component library and App Store brand visual system, boosting design efficiency for the entire TC squad.
The Process
Enhance UX Storytelling
Our previous screenshots featured minimal copywriting. We needed engaging UX storytelling to clearly demonstrate how new features integrate into the user flow.
Improve Readability
The fun TC brand patterns, when used as background elements behind screenshots and headers, decreased readability and distracted users from the main content.
The Process
New Logo Integration
User feedback showed strong connections with our new logo, so I incorporated it into a background pattern that includes our accent orange TC color.
UX Flow Storytelling
Collaborated with the cross-functional team to develop a user flow-integrated screenshot strategy, ensuring that both new and existing users easily understand the updated features.
Brand Visual Balance
Following TC brand guidelines, I balanced grunge sports patterns and fire-and-ice bracket graphics to design App Store backgrounds that enhance brand visuals without overwhelming users.
Result
I finalized mobile and tablet designs and partnered with Motion Design to add a dynamic sizzle reel to the App Store. Inspired by competitor analysis, this motion graphic engages sports fans and showcases our 2024 features, ensuring a cohesive TC brand visual through storytelling.
Design System Optimization Process
Component Usability
New feature components were incompatible with existing TC components, requiring new variants. Complex nested sub-components and poor variant logic increased design file sizes.
Unresponsive Issues
Many components lacked auto-layout, causing responsiveness issues across devices from 320px smartphones to 1024px tablets.
Component Inconsistency
Inconsistent naming conventions, specifications, type ramp and color schemes across components, including dark and light modes.
No Single Source of Truth
Components were scattered across files with some using screenshots instead of UI designs, hindering onboarding and alignment with engineering codes.
Design System Optimization Result
đź’ˇ
The bracket card is the TC app’s core feature, displaying team picks and metadata. It is one of the most visited and highly interactive components, serving as the primary destination for sports fans to make their March Madness picks each year.
The Process
Result
Identify Reusable Components
Based on the results of my stakeholder interviews and component audits, these three highly utilized components are ideal for reuse as nested components due to their essential roles in user interaction and experience.
Team
Game Data
Pick Data
My Component Build Techniques
Result
Tablet Bracket Card
Bracketcast
Championship Pick Card
Result
TC Color Variables
Result
January 2024 marked the launch of the Motion Reel on the TC App in the Apple Store and Google Play, utilizing the optimized components I developed alongside the refreshed TC brand visuals, including updated App Store backgrounds and pattern designs. These components integrated real-world sports data and the latest user flows, accelerating motion design production, enhancing cross-team collaboration, and streamlining updates and asset exports.
Takeaways
My Figma Forum Post
I reached out to the Figma Forum to tackle a tough responsive component issue. By carefully masking our design assets, I still got the insights I needed without risking sensitive information.
My Edited Video on Component Issues
To respect our IP guidelines, I trimmed my live-recording to highlight only the crucial parts of the component issue. This clear, concise video made it easier for the Figma community to understand my problem and offer swift support.
Figma Support Answer
A big shout-out to the Figma community! Their timely answers and shared tips helped me quickly resolve edge cases and keep our project on track!
My Documentation for Team Learning
Here’s a quick snapshot of how I added these new insights to our centralized TC Design System library. After this discovery, my manager encouraged me to share my learnings with the entire team.
Testimony
Product Promotion
ESPN Tournament Challenge App
Feeling inspired after checking out this case study? Don’t stop here! Jump right in and download the app to get in on the action!
Download Now
© 2025 Rosie Way I Designed with 🫶🏻 on webflow I All Rights Reserved
