Sideline: Illustrated UI

Design Scope

Illustrated UI Design

client

Betty Labs (Sideline)

year

2019-2020

Project Overview


Sideline was a sports prediction app designed to enhance fan engagement during live NBA and NFL games. The app integrated real-time game interactions, allowing users to make predictions and win cash prizes. To make the experience more visually compelling, Sideline incorporated custom illustrations as a core part of its UI, creating a distinctive identity that set it apart from other sports apps.

My Role


Ethan Simonds from Betty Labs reached out to me about contributing custom illustrations for the Sideline UI. My responsibilities included:
• Creating player illustrations to be used throughout the season.
• Developing special themed artwork for key matchups and events.
• Ensuring the illustrations integrated seamlessly into the UI design.
• Collaborating closely with Ethan to refine ideas and enhance the creative vision.

The Challenge


Sideline needed a visual identity that was both engaging and unique. The challenge was to create illustrations that:
Enhanced the UI without overpowering functionality.
Captured the energy and culture of NBA and NFL matchups.
Maintained brand consistency while allowing flexibility for special events like Thanksgiving.

Design Process


1. Illustration Style Development


I initially started with vector illustrations, but over time, my style evolved into detailed Procreate-based illustrations, which better captured expressive details and storytelling elements. The goal was to create artwork that wasn’t just decorative but added to the narrative of each game.

From sketch to screen: The journey of integrating illustrations into Sideline’s UI.

2. UI Integration & UX Considerations


To ensure seamless UI integration:


• Illustrations were designed within a structured safe zone, ensuring key elements wouldn’t be cropped across different screen sizes and UI placements. This constraint shaped the composition of each illustration, requiring thoughtful positioning of focal points.
• The color palette and composition complemented Sideline’s existing UI design.
* The artwork was designed to enhance engagement, acting as visual cues that guided user attention to key matchups.
* Illustrations helped users quickly recognize key matchups and increase their likelihood of participation.
* By associating memorable artwork with high-stakes games, the UI design subtly encouraged users to engage in predictions and betting.
* Collaborated with Ethan for feedback, making necessary adjustments to ensure the best results.

3. Special Storytelling Highlights


Some pieces were crafted specifically to reinforce game narratives and add a deeper layer of engagement:

• Kirk Cousins donning a Viking helmet while attacking cheese wedges, referencing their rivalry with the Packers.
• Dak Prescott riding a bear into Chicago, symbolizing the Cowboys’ showdown against the Bears.
• A strong focus on storytelling through visuals, making the user experience more immersive.

Outcome & Impact


• The illustrations became a defining aspect of Sideline’s brand, making it instantly recognizable.
• Seasonal activations like Thanksgiving brought extra engagement by making the UI feel fresh and dynamic.
• The illustrations helped increase participation in key matchups by making them visually distinct and memorable.
• The creative approach was well-received, with positive feedback from the team, including CEO Howard Akumiah.
• This project led to more illustration work opportunities as Betty Labs later transitioned to Locker Room, which was eventually acquired by Spotify.⠀

Final Thoughts


Working on Sideline allowed me to explore the intersection of illustration, UI design, and storytelling in a product that genuinely resonated with sports fans. The experience reinforced my ability to create visuals that are not only aesthetically engaging but also strategically enhance the user experience.
If I were to approach a similar project today, I would:

• Incorporate A/B testing to measure how different illustration styles impact engagement and retention.
Explore animation or micro-interactions to make the artwork more interactive.
Collaborate more closely with UX researchers to tie visual decisions directly to measurable user behaviors.

This project was a stepping stone in understanding how illustrations can be a functional part of UI design rather than just decorative elements.