Landing Juno: J1's Design System
Shepherding a New Era for J1's User Interface
Shepherding a New Era for J1's User Interface
Shepherding a New Era for J1's User Interface
JupiterOne had big design aspirations but its existing UI systems couldn't deliver. We needed better usability, aesthetics, and code quality to achieve our vision. A strong design systems practice unlocked a new era of better product design.
JupiterOne had big design aspirations but its existing UI systems couldn't deliver. We needed better usability, aesthetics, and code quality to achieve our vision. A strong design systems practice unlocked a new era of better product design.
JupiterOne had big design aspirations but its existing UI systems couldn't deliver. We needed better usability, aesthetics, and code quality to achieve our vision. A strong design systems practice unlocked a new era of better product design.
Role
Principal Product Designer
Featured Skills
Design Systems, UI Design, Operations
Impact
Created a system and drove its adoption across all parts of J1's platform over ~20 months.
Establishing practices and operations
Establishing practices and operations
Establishing practices and operations
I joined JupiterOne as the first IC product designer.
The product was 2 years into development but design input had been minimal and the company had no design tooling.
I started from scratch and got to work establishing our basic operations:
Figma ops
Libraries and resources
Dev tooling and storybook
Wiki and documentation
Work planning
I joined JupiterOne as the first IC product designer.
The product was 2 years into development but design input had been minimal and the company had no design tooling.
I started from scratch and got to work establishing our basic operations:
Figma ops
Libraries and resources
Dev tooling and storybook
Wiki and documentation
Work planning
I joined JupiterOne as the first IC product designer.
The product was 2 years into development but design input had been minimal and the company had no design tooling.
I started from scratch and got to work establishing our basic operations:
Figma ops
Libraries and resources
Dev tooling and storybook
Wiki and documentation
Work planning
I established our operations from scratch.
Driving adoption over time
Driving adoption over time
Driving adoption over time
Creating a design system was never an official company priority.
I advocated for this work because I knew we needed it to execute quality UI at scale and achieve our design ambitions.
Driving system adoption around our other roadmap projects took patience and persistence, but we made steady progress month over month.
Reaching full adoption across the platform took about 20 months.
Creating a design system was never an official company priority.
I advocated for this work because I knew we needed it to execute quality UI at scale and achieve our design ambitions.
Driving system adoption around our other roadmap projects took patience and persistence, but we made steady progress month over month.
Reaching full adoption across the platform took about 20 months.
Creating a design system was never an official company priority.
I advocated for this work because I knew we needed it to execute quality UI at scale and achieve our design ambitions.
Driving system adoption around our other roadmap projects took patience and persistence, but we made steady progress month over month.
Reaching full adoption across the platform took about 20 months.
Our "land and expand" design system workflow.
Primitives, components, patterns
Primitives, components, patterns
Primitives, components, patterns
We worked across the full spectrum of system elements.
Primitives: Color, typography, spacing, effects, etc.
Components: Buttons, inputs, dialogs, etc.
Patterns: CRUD conventions, page layouts, form structures, etc.
We worked across the full spectrum of system elements.
Primitives: Color, typography, spacing, effects, etc.
Components: Buttons, inputs, dialogs, etc.
Patterns: CRUD conventions, page layouts, form structures, etc.
We worked across the full spectrum of system elements.
Primitives: Color, typography, spacing, effects, etc.
Components: Buttons, inputs, dialogs, etc.
Patterns: CRUD conventions, page layouts, form structures, etc.
UI before and after
UI before and after
UI before and after
I designed thousands of screens for the projects supporting system adoption.
We touched every existing corner of the UI (and some new ones!).
Below are a few before and after comparisons to give you a sense of where we arrived versus where we started.
I designed thousands of screens for the projects supporting system adoption.
We touched every existing corner of the UI (and some new ones!).
Below are a few before and after comparisons to give you a sense of where we arrived versus where we started.
I designed thousands of screens for the projects supporting system adoption.
We touched every existing corner of the UI (and some new ones!).
Below are a few before and after comparisons to give you a sense of where we arrived versus where we started.
After
/
Before
Dashboards.
After
/
Before
Data sources.
After
/
Before
Cyber asset inventory.
After
/
Before
Settings.
System success!
System success!
System success!
We improved our user experience, visual aesthetics, and UI code quality through this initiative.
Design and front-end engineering also built a strong relationship that enabled better design collaboration and quality on every project.
Overall, a big success!
Check out my article "The 3 Ways I've Tried to Land a Design System Into Existing Software" for more about my design systems experiences.
We improved our user experience, visual aesthetics, and UI code quality through this initiative.
Design and front-end engineering also built a strong relationship that enabled better design collaboration and quality on every project.
Overall, a big success!
Check out my article "The 3 Ways I've Tried to Land a Design System Into Existing Software" for more about my design systems experiences.
We improved our user experience, visual aesthetics, and UI code quality through this initiative.
Design and front-end engineering also built a strong relationship that enabled better design collaboration and quality on every project.
Overall, a big success!
Check out my article "The 3 Ways I've Tried to Land a Design System Into Existing Software" for more about my design systems experiences.
A globally respected source for creative technology insights. 5200+ tech pros in all 50 US states and 121 countries read each week.
Open to Work
©2024 Patrick Morgan
A globally respected source for creative technology insights. 5200+ tech pros in all 50 US states and 121 countries read each week.
Open to Work
©2024 Patrick Morgan
A globally respected source for creative technology insights. 5200+ tech pros in all 50 US states and 121 countries read each week.
Open to Work
©2024 Patrick Morgan