Internship
Internship
Internship
Reflection
Reflection
In 2024, I spent three months as a UXUI designer at Spots.Excitement, a small 20-person company based in New York. Since the business was just getting started, there was no app, no website, and not even a logo or design system. It was exciting to build everything form scratch, but also overwhelming at first, I wasn't sure where to begin. Together with the founder, PM, developers, graphic designers, and marketers, we met twice a week and built things step by step, from the very beginning all the way to launch.
Role
Team
Tools
Solo Designer
Design System
Role
Team
Tools
Solo Designer
Design System
Role
Team
Tools
Solo Designer
Design System
Problem
Problem
Problem
Designing as a Team of One
When I joined the Sports Excitement project, I was the only designer on the team. There was no design system yet, and everyone was building their parts in different ways. Colors, typography, and layouts looked a bit inconsistent, which made the product feel less professional.
Since this platform was all about student-athletes connecting through profiles, feeds, and messages, even small design mismatches could break the user experience. I realized that if we wanted to move fast and keep things consistent, I needed to create a basic design system (MVP) that the whole team could use.
When I joined the Sports Excitement project, I was the only designer on the team. There was no design system yet, and everyone was building their parts in different ways. Colors, typography, and layouts looked a bit inconsistent, which made the product feel less professional.
Since this platform was all about student-athletes connecting through profiles, feeds, and messages, even small design mismatches could break the user experience. I realized that if we wanted to move fast and keep things consistent, I needed to create a basic design system (MVP) that the whole team could use.
When I joined the Sports Excitement project, I was the only designer on the team. There was no design system yet, and everyone was building their parts in different ways. Colors, typography, and layouts looked a bit inconsistent, which made the product feel less professional.
Since this platform was all about student-athletes connecting through profiles, feeds, and messages, even small design mismatches could break the user experience. I realized that if we wanted to move fast and keep things consistent, I needed to create a basic design system (MVP) that the whole team could use.
Design
Design
Design
Building the System Step by Step
Research (Week 1–2)
I kicked things off with research. With no system to start from, I looked at competitor platforms and studied what student-athletes might need in a community space. This gave me a clear picture of the problems we had to solve: speed and consistency.
Research (Week 1–2)
I kicked things off with research. With no system to start from, I looked at competitor platforms and studied what student-athletes might need in a community space. This gave me a clear picture of the problems we had to solve: speed and consistency.
Research (Week 1–2)
I kicked things off with research. With no system to start from, I looked at competitor platforms and studied what student-athletes might need in a community space. This gave me a clear picture of the problems we had to solve: speed and consistency.
Planning (Week 3–4)
Next, I set the scope. Since I couldn’t cover everything in just twelve weeks, I decided to focus on three core screens: Feed, Profile, and Messages. These were the heart of the product and the best way to prove the value of a design system.
Planning (Week 3–4)
Next, I set the scope. Since I couldn’t cover everything in just twelve weeks, I decided to focus on three core screens: Feed, Profile, and Messages. These were the heart of the product and the best way to prove the value of a design system.
Planning (Week 3–4)
Next, I set the scope. Since I couldn’t cover everything in just twelve weeks, I decided to focus on three core screens: Feed, Profile, and Messages. These were the heart of the product and the best way to prove the value of a design system.
Foundations (Weeks 5–8)
Once the plan was set, I built the foundations:
Colors → a brand palette to reflect the student-athlete identity.
Spacing & Grid → an 8px scale and responsive layout system.
Typography → a type scale and hierarchy for clarity.
Icons & Shadows → consistent visual language across screens.
Foundations (Weeks 5–8)
Once the plan was set, I built the foundations:
Colors → a brand palette to reflect the student-athlete identity.
Spacing & Grid → an 8px scale and responsive layout system.
Typography → a type scale and hierarchy for clarity.
Icons & Shadows → consistent visual language across screens.
Foundations (Weeks 5–8)
Once the plan was set, I built the foundations:
Colors → a brand palette to reflect the student-athlete identity.
Spacing & Grid → an 8px scale and responsive layout system.
Typography → a type scale and hierarchy for clarity.
Icons & Shadows → consistent visual language across screens.
Components (Weeks 9–10)
With the basics in place, I built only the most essential components such as buttons, cards, and a profile module. Even with a small set, the difference in consistency was obvious.
Components (Weeks 9–10)
With the basics in place, I built only the most essential components such as buttons, cards, and a profile module. Even with a small set, the difference in consistency was obvious.
Components (Weeks 9–10)
With the basics in place, I built only the most essential components such as buttons, cards, and a profile module. Even with a small set, the difference in consistency was obvious.
Application (Weeks 11–12)
Finally, I applied everything to the real product. Rebuilding Feed, Profile, Message and Notification screens with the system made the product look and feel much more cohesive.
Application (Weeks 11–12)
Finally, I applied everything to the real product. Rebuilding Feed, Profile, Message and Notification screens with the system made the product look and feel much more cohesive.
Application (Weeks 11–12)
Finally, I applied everything to the real product. Rebuilding Feed, Profile, Message and Notification screens with the system made the product look and feel much more cohesive.
Feed
Feed
Feed
Profile - General
Profile - General
Profile - General
Messages
Messages
Messages
Notifications
Notifications
Notifications
A Design System MVP
By the end of the project, I had created a design system MVP for Sports.Excitement:
Foundations: A set of tokens (colors, spacing, typography, icons, shadows).
Components: Reusable components organized in a component library.
Screens: Four core flows redesigned with consistency and scalability in mind.
Documentation: Comprehensive guidelines and usage examples for adoption.
This wasn’t a full design system yet, but it was enough to show the value, improve clarity across the system, and set the stage for future growth.
By the end of the project, I had created a design system MVP for Sports.Excitement:
Foundations: A set of tokens (colors, spacing, typography, icons, shadows).
Components: Reusable components organized in a component library.
Screens: Four core flows redesigned with consistency and scalability in mind.
Documentation: Comprehensive guidelines and usage examples for adoption.
This wasn’t a full design system yet, but it was enough to show the value, improve clarity across the system, and set the stage for future growth.
By the end of the project, I had created a design system MVP for Sports.Excitement:
Foundations: A set of tokens (colors, spacing, typography, icons, shadows).
Components: Reusable components organized in a component library.
Screens: Four core flows redesigned with consistency and scalability in mind.
Documentation: Comprehensive guidelines and usage examples for adoption.
This wasn’t a full design system yet, but it was enough to show the value, improve clarity across the system, and set the stage for future growth.
Next Steps
Next Steps
Next Steps
Where It Could Go
If I had more time, I would expand the system to include:
More advanced components (forms, navigation, notifications).
Clear usage guidelines for other designers and developers.
Accessibility improvements like contrast testing and dark mode.
Integration with development for a code-based library.