Enterprise Internal Design System
Overview
Designed from the ground up over a two year span and continuously evolving, this design system is a formal UI kit for internal design and development. There is an IT wide effort to implement the kit into any new or upgraded developments and development efforts to transform components into primary coding languages for developer use.
Legal Disclaimer: The entire content of this page is highly confidential and not to be redistributed or copied.
Role
Design Lead
Responsibilities
System Design
Design Strategy
User Research
Prototyping
Retrospective
Team
Erin Tilley, HCD Manager
Katherine Mitchell, Design Lead
Chris Ellis, Design
Isuelle Kim, Design
John Dang, Research
Narrative
Tyson’s internal apps were designed based almost solely on function and UX decisions were made by developers. When the Human Centered Design team was established, the opportunity for a strategic and cohesive systems approach to application design and development became an apparent need for the company. A UI Kit seemed like the most effective tool and our team was up to the task of researching and making each decision to create an extensive system that would impact our applications enterprise wide.
Process and Research
Target Users
Enterprise app developers who likely didn’t have a background in design, may or may not have access to Adobe CC, and are looking for existing code for repeating components and patterns
Team members designing internal tools who may not have background in design, may or may not have access to Adobe CC, and could be in any part of the enterprise
Project planners and managers who know their project will require custom application design and coding, desire efficient project delivery, and want to adhere to internal design guidance
After we established the approach, it was finally time to begin designing the components!
Goals
Quicker time to design and to develop for projects and less-experienced team members
More supportable code and fewer tickets
Better, streamlined user experience and recognizable Tyson brand
Creating a system that scales from pixel to company wide application
Long term goal: Design governance for all internally developed custom applications
Challenges & Goals
Challenges
Our custom internal tools are hard to use and have different look/feel, and can be confusing to use, time consuming to develop, and require specialized support
Establishing internal adoption
Process
The users were fairly established First we needed to create design components in XD source file and for our team members without Adobe licenses, the component guidance was manually uploaded to a Sharepoint site. Once the components were finalized, we moved them to a Creative Cloud assets library. Then, using Visual Studio Code, we refreshed the DSP to upload the components and guidance. From there, each individual component could be coded by our developers in 3 coding languages and the updates would be pushed to a GitLab folder for broader developer access.
The first big decision was defining our grid.
Grids help to determine spacing, responsive scaling, and provide a sense of organization and layout for the design. A good grid is the foundation of a great design.
Next came colors, font, and navigation.
Using the Tyson brand guide and Material.io, these decisions required only a bit of customization and additions to better meet users needs.
We chose Proxima Nova as our font and added a systems color palette, transparency guidance, and data indicators to the existing brand colors. The system colors help to ensure that brand colors are not associated with positive or negative perception, which was a common occurrence before the system. By using Material.io as our base it reduces the effort of custom coding individual components.
Followed by individual, common components.
Think icons, buttons, footers, text fields, and a whole lot more. There are countless elements that makes up an excellent UI.
This is just a peek into an extensive design system.
Hundreds if not thousands of design decisions were made to stand up this comprehensive, evolving, designer and developer friendly system with detailed guidance on design and accessibility standards. Frankly, it was a large effort to go from nothing to the extensive kit being used enterprise wide today.
And ya know what, I’m super proud of it.
Outcomes
The design system is widely adopted throughout Tyson IT and is readily referenced by designers and developers across the enterprise. When developers run across a UI challenge, they reach our to our team to see if a solution exists in the design kit. The best part? It usually does!
Design decisions made easy. My team can swiftly pull together a wireframe to discuss with users and stakeholders. Designing on the fly or rehashing a design mid-project (although not ideal) is not the overhaul effort it once was. Our designs are standardized and efficient thanks to the design system.
New design challenges aren’t lost at the end of a project. When my team encounters the need for a new component or pattern, we research, iterate, decide on the best approach, and add it to the design system for future use. We are finding the design edge cases and capturing them in a sustainable, living document so when the challenge appears again in the future, the answer is in the design system.
The individual components requiring custom code are actively being developed by our dev partners. Having the coded components will allow our developers to quickly pull the code they need to deliver applications that meet design specifications.