NASA HCI Design System
Making it easier to create quality digital products for the agency
At NASA Ames, I co-led the creation of our team’s first design system. I designed a process that worked for my team’s unique needs, helped us overcome technical and design debt, and increased the number of issues we resolved per sprint by 10%.
Outcomes and impact
90% of components converted to standardized designs
10% more front-end tickets completed per sprint
Project details
Partner
NASA Ames HCI Group
My role
Design Co-Lead
Team
- Chris Mueller
- Ron Kim
My contribution
- Product management
- Interaction design
- Product design
- HTML/CSS
Background
My team at NASA was struggling with design and technical debt.
NASA Ames’ HCI Group designs and builds internal software for human spaceflight groups as they track data and make decisions. As the agency was preparing to launch Artemis I, my team had doubled in size, and the number of products and user communities we were supporting had increased exponentially. We were spending too much time working on small things like what a button should look like, and not enough time on more important things like accessibility or performance. Our user interfaces were increasingly inconsistent, even within the same product. At the same time, our engineering team was undertaking an effort to rebuild key pages of our flagship product in React. While great for performance, we risked introducing even more competing standards. We knew the time was right to start thinking about our design practice in a new way. A few colleagues and I began an effort to introduce our first design system.
Result
We built a practical, pragmatic system that worked for us and helped our team get things done.
When I left the team, we had completed design work on almost all of our components, and development work on almost half. There was a ways to go before everything was fully implemented into our products, but we saw both designers and engineers start to adopt the system and think in a new way.
It used to be that every front-end update needed a designer’s full attention and a lot of back and forth between design and development. “Smaller” issues were ignored because of cost. With even a partial design system in place, we saw noticeable increase on what the front-end dev team was able to accomplish, coming out to about 10% more tickets completed per sprint.