Emma Sage Kalayjian
Proxima Digital Design System
OVERVIEW
Proxima is the Digital Design System for NASA JPL’s Enterprise Web, Mobile and Desktop applications.
We chose to name the this project "Proxima" after the star,
Proxima Centauri.
TOOLS
MS Suite, Figma, GitHub, VS Code
ROLES
Lead & Supervise User Research
Visual Design & Branding
Accessible Code Compliance
TIMEFRAME
2020
Highlights
Proxima is a Digital Design System used primarily for NASA JPL's internal Enterprise desktop and mobile applications.
Problem
Developers expressed frustration with having to continually recreate UI components from scratch (header, footer, etc.) for each new project, resulting in lots of extra time being spent recreating the same components repeatedly...ultimately to create a non-cohesive digital experience for end users. Thus, the need for a design system had been sparked.
Process
Proxima began with inspiration from Google Material's design principles and JPL's existing branding guidelines. From there, I was able to enhance these designs, thanks to the research findings done early on in the project.
Result
The final result: an accessible digital component library for developers to download and implement into their applications in order to both save time and create a cohesive brand experience.
My Role
I was Co-Lead of this project, along with our team's Senior Designer. We also had a few UX Research summer interns. At a high level, here's what I did:
1. With our Senior Designer, interview and select our intern hires for the summer.
2. Lead our interns with their research development, hold check-in meetings with them to review and assess findings.
(Why have interns do the research? Part of the problem was that I personally was already so familiar with the issue and, in part, shared similar frustrations as the developers. We hired UX Research interns so that someone with an outside perspective could give an objective assessment and either confirm or challenge initial beliefs.)
3. Review research findings with interns and translate them into design requirements.
4. Research accessibility for compliance.
5. Attend Art Center College of Design - Extension Program for a course in Visual Communications to better understand dynamic lighting and how to create a sense of depth in the interface by using various lighting and shading techniques.
6. Design entire color system, shading system, and co-design components.
7. Run accessibility checks.
8. Assist in developing components
Research
Key
🔵 Leading role
🔺 Supporting role
1 / Interviews 🔺
Perform full panel suite of interviews with Software Engineers, Enterprise Systems Analysts, and Project Managers
3 / Create Checklists 🔵
Create list of technical requirements, user requirements, and site architecture from the UX research artifacts
2 / Synthesize Raw Data 🔺
Create personas, empathy maps & journey maps based on research data
4 / Research Accessibility 🔵
Research accessibility guidelines to ensure compliance with both WCAG AA 2.1 and Section 508
Design
1 / Design Color System 🔵
Design colors to be in compliance with all accessibility requirements & branding requirements of our three governing brands: NASA, Caltech, and JPL
3 / Design UI Layouts 🔺
Design optimal UI layouts for various design templates, code frameworks and hardware devices
5 / Design Components 🔺
Design 35 full components incorporating created design elements
2 / Design Typography 🔺
Determine optimal sizing & layout for various design templates, code frameworks and hardware devices
4 / Create Shading System 🔵
Design combinations of gradients, drop shadows and lighting environments to bring the components to life
6 / Accessibility Checks 🔵
Examine all components to ensure full WCAG AA 2.1 & Section 508 compliance
Develop
1 / Develop Schematics
Instantiate the EBIS Schematics Library on GitHub where the code for specific application compliance lives
3 / Develop Components 🔺
Utilize VS Code to develop components, then merge into the dev branch on the EBIS Component Library Repository
2 / Create Repository
Fully develop the EBIS Component Library on GitHub to ensure capability across the Division’s active applications
4 / Launch
Proxima is live! 🚀
Color Palette
Full original color palette in compliance with our three governing brands: NASA, Caltech, and JPL.
Each application consists of a few colors: 1 Background, 1 Component, 1 Interaction.
Accessible Gradients
Some applications are more widespread and call for a highly accessible Interaction Color. Other applications are more niche with a small user base but have known colorblind users. In either case, a monotone Interaction Color won't do. What's visible for one user may not be for another, yet the Call To Action needs to be emphasized regardless. These accessible gradients have been created for these instances. By playing with the hue, shading, and tone, these swatches will be eye catching across the board...no matter how you see.
Typography
Pulled directly from the Material typography and enhanced for application environments.
Lighting & Shading
Just because Proxima was intended for digital applications doesn’t mean it has to feel flat. By utilizing elements such as accessible color scheming and dynamic lighting environments, we were able to create a sense of natural depth in an otherwise monotone environment.Our mission was to create one centralized digital design system that is robust in its own design yet highly user (and developer) friendly in its implementation.
By combining a gradient atop the individual component with either an inner shadow or drop shadow, a three-dimensional sense is created with shading.
Before & After
Subcontracts Wizard
An Enterprise application using Proxima.
QARTA
An Engineering application using Proxima.
Impact
🧩
35 fully accessible components
🕰️
30% est. development time saved per project
🖼️
3 frameworks
🏆
1 JPL Team Award
Our final product was the Proxima Design System offering 35 fully accessible components in 3 frameworks: Angular, React, and Vue.
Once Proxima went live and project teams began implementing it into their project pipeline, developers reported back an estimated 30% time saved per project due to no longer having to recreate these core components.
Proxima also was the recipient of a JPL Team Award.
