top of page

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.