Alec Schmidt
Product Designer
Work
About
CV
Menu
A Scalable Design System for Juni Learning
Juni Learning — April 2022
I joined the Juni midway through the creation of its first design system. The foundation had been started, but it lacked structure, scale, and practical guidance for multiple teams. My role was to strengthen, organize, and expand the system so it could support real product work at scale.
Context
When I joined, Juni had recently gone through a company-wide rebrand. The UI still reflected the previous visual language, inconsistent card styles, and an outdated layout structure. The team was already in the middle of a full UI overhaul, presenting a great opportunity to built out a proper system rather than simply reskinning existing screens.
I partnered with the design and engineering to establish a structured component library as we redesigned. This allowed us to modernize the interface while simultaneously building the foundational system. This let us move quickly while each redesigned screen contributed to a growing system of reusable, scalable patterns.
Manual Primitives vs Design Tokens
This work predates modern Figma tokens, so we built scalable primitives manually:
- Unified spacing scale
- Consistent type ramp
- Color system
- Naming conventions and documentation
This structure served the same purpose as tokens do today (enabling consistent reuse) in a pre-variable Figma.
The “Campus” System
We named the design system “Campus” and it became a shared language for our product and engineering teams using a combination of Figma and Storybook. The effects were almost immediately felt:
- Faster design velocity and fewer inconsistencies
- Reduced one-off component creation
- Tighter collaboration with PMs and engineering
- A cleaner, more cohesive product interface across multiple teams
Wanna build something together?
hello@alecschmidt.com
Alec Schmidt
Product Designer
Work
About
CV
Menu
A Scalable Design System for Juni Learning
Juni Learning — April 2022
I joined the Juni midway through the creation of its first design system. The foundation had been started, but it lacked structure, scale, and practical guidance for multiple teams. My role was to strengthen, organize, and expand the system so it could support real product work at scale.
Context
When I joined, Juni had recently gone through a company-wide rebrand. The UI still reflected the previous visual language, inconsistent card styles, and an outdated layout structure. The team was already in the middle of a full UI overhaul, presenting a great opportunity to built out a proper system rather than simply reskinning existing screens.
I partnered with the design and engineering to establish a structured component library as we redesigned. This allowed us to modernize the interface while simultaneously building the foundational system. This let us move quickly while each redesigned screen contributed to a growing system of reusable, scalable patterns.
Manual Primitives vs Design Tokens
This work predates modern Figma tokens, so we built scalable primitives manually:
- Unified spacing scale
- Consistent type ramp
- Color system
- Naming conventions and documentation
This structure served the same purpose as tokens do today (enabling consistent reuse) in a pre-variable Figma.
The “Campus” System
We named the design system “Campus” and it became a shared language for our product and engineering teams using a combination of Figma and Storybook. The effects were almost immediately felt:
- Faster design velocity and fewer inconsistencies
- Reduced one-off component creation
- Tighter collaboration with PMs and engineering
- A cleaner, more cohesive product interface across multiple teams
Wanna build something together?
hello@alecschmidt.com
A Scalable Design System for Juni Learning
Juni Learning — April 2022
I joined the Juni midway through the creation of its first design system. The foundation had been started, but it lacked structure, scale, and practical guidance for multiple teams. My role was to strengthen, organize, and expand the system so it could support real product work at scale.
Context
When I joined, Juni had recently gone through a company-wide rebrand. The UI still reflected the previous visual language, inconsistent card styles, and an outdated layout structure. The team was already in the middle of a full UI overhaul, presenting a great opportunity to built out a proper system rather than simply reskinning existing screens.
I partnered with the design and engineering to establish a structured component library as we redesigned. This allowed us to modernize the interface while simultaneously building the foundational system. This let us move quickly while each redesigned screen contributed to a growing system of reusable, scalable patterns.
Manual Primitives vs Design Tokens
This work predates modern Figma tokens, so we built scalable primitives manually:
- Unified spacing scale
- Consistent type ramp
- Color system
- Naming conventions and documentation
This structure served the same purpose as tokens do today (enabling consistent reuse) in a pre-variable Figma.
The “Campus” System
We named the design system “Campus” and it became a shared language for our product and engineering teams using a combination of Figma and Storybook. The effects were almost immediately felt:
- Faster design velocity and fewer inconsistencies
- Reduced one-off component creation
- Tighter collaboration with PMs and engineering
- A cleaner, more cohesive product interface across multiple teams
Wanna build something together?
hello@alecschmidt.com