L3HDS

L3harris Design System

A complete set of standards intended to manage design at scale using reusable components and patterns.

MY ROLE: UX Strategist (Project Manager), UX Researcher, UX Designer, Frontend Development

TARGET AUDIENCE: Company Software Engineers, designers

TEAM: Software Engineers (1), UX Designers (2)

SCOPE: July 2017 - July 2018

Overview

When I first arrived to Harris Corporation one of the first great things my manager did was give me the platform to make suggestions as a new hire with fresh eyes entering the business.

Over the course of 2 weeks onboarding and looking over my fellow UX coworkers shoulders and speaking to developers I saw that we were working in a siloed environment. Each UX designer supported multiple projects and each of those applications being designed (though user tested and thoughtfully designed) looked and functioned completely different than every application that the team worked on even though we were supporting applications in the same department. In short, we were constantly "reinventing the wheel".

The UX team was also severely backlogged and we had developers looking for consultation though outnumbering the UX team 30:5, and we didn't have the bandwidth to support every effort.

What also happened my second week, we had a meeting with our VP. My teammates and I were going around the room to share ideas. This is where all my reading paid off, I proposed creating The design system as a way to highlight our team design principles and create a ui library with guidelines and best practices to help support/mitigate the influx of requests for our team as we create a branded cohesive product. Working with one other UX Designer, I graciously took on this task of getting the design system created at Harris Corporation (now L3harris Technologies)

PROJECT ROADMAP

Before beginning the project I created a roadmap to review with my VP of Technology of how I plan to realistically plan to accomplish this task.

After getting feedback, I updated the roadmap to reflect the timeline as I worked with my coworker to brainstorm how we would accomplish these actions for each phase and who we would need to enlist for support to ensure we meet the due date.

The Challenge

Legacy Software is…cluttered, confusing, not user friendly. Each internal application ui looks different and lacks cohesiveness.

Goal

Create an UI library that provides the employees with ux best practices and code snippets.

OUR APPROACH

Methodology

User Centered Design (UCD) process beginning with Discovery Research

TOOLS: Techsmith Morae Screen recorder, Axure 8-9, Balsamiq, Adobe Illustrator, Skype, paper, pencil, marker, whiteboard, frontend development involving html and css styling

Research

During the discovery phase of the UCD process we conducted a series of brainstorms to capture some quantitative data from the employees to understand what features they wanted/ needed.

Comparative Analysis: Looking for inspiration, I wanted to learn what these top companies were doing right with there design systems and how we could pivot in the right direction since L3Harris didn’t have a system at all.

Google Material Design

I couldn't look at design systems without reviewing Google Material Design as they set most web standards. Even offering a color guideline.

Strengths:

Set standard for modern UI
Most users are familiar with look and behavior of UI
Flat design creates clean interactions
Thorough best practices for UI
Sticky Navigation

Opportunities:

Copy/ Paste button

quickly grab code

Polaris Shopify

Polaris does an excellent job creating an system for there users that is well documented.

Strengths:

Thorough documentation of components
Implementation guidelines
Further Learning Resources for each component

Opportunities:

Copy/ Paste button to quickly grab code

Salesforce

Another great contender, it is amazing all Salesforce accomplishes with there design system and how it is available to anyone.

Strengths:

Thorough documentation of components
Implementation guidelines
Easy copy/ paste to clipboard button

Opportunities:

Some links are buried under other links and may throw first time users off

Insights

Looking over Material, Shopify and Salesforce, after reviewing I came to the conclusion our design system should contain the following:

Getting Started page - Show employees what they need to install and begin using the design system.
Overview page - Highlight all the components.
Components page - Showcase implementation and guidelines.
Typography page - Highlight to employees how to handle font sizes in different situations
Layout - Demonstration of how to use the grid system

The next thing to do was review these assumptions with our potential users: the developers.

UNDERSTANDING THE EMPLOYEES NEEDS

We engaged through several group brainstorm sessions and individual one on one sessions with the developers in the company to brainstorm and understand their wants and needs out of a design system and see if the insights derived from my comparative analysis would be beneficial.

During the sessions we found the developers would really want to use the system if it gave them quick access to copy and paste code and helped them save time developing and most importantly they didn't want to have to design, so any tips and best practices on how to use color/ layout the ui would be completely beneficial.

CREATING PERSONAS

After meeting with our target audience, I created two personas, one to represent early career developers zero to 2 years and the second to represent developers with 10 or more years of experience.

Designing the mvp

During the design phase of the UCD process I reviewed the features the employees came up with and aligned them with requirements and created a prioritization of user stories.

SITEMAP

Verifying what the developers needed as well as doing some card sorting exercises we were able to organize and determine the sitemap hierarchy.

Wireframe

I drafted a wireframe based on all the insights drawn from developers and the structure based on the site map.

Mockup

The final mockup contains the branded colors we demonstrated at our company IT All Hands meeting to build awareness

Usability Testing

The following studies were completed in accessing the design system:

Task Analysis (time on task, ease of use, feedback)
Card Sorting
Surveying

Develop

After demonstrating the capabilities of a company design system to c-suite executives in our previous efforts I was able to grow the design system team that was composed of only one other UX designer and get a super star developer to help develop and handle the heavy aspects of the code.

Getting Started Page

The Getting started page walks the user through registering their app, installing the npm package and all the code associated to implement and begin using the design system also allowing for downloads of previous versions.

Overview Page

The overview page acts as a showcase for all the components that would be relevant to developers within our company.

Component Page

The component page defines the selected component and best practices, a demo of the ui and the easy to copy code snippet are featured as well. Feedback from the usability study led us to adding a section for users to quickly grab the css class name.

Outcome

Since launch in July 2018 in just one month 10 applications adopted the design system. Now in 2021 over 500+ applications have been created using logged using the design system enterprise wide. In November 2018, my team and I were nominated for a quality award and won 1st place for our Segment an award presented by L3Harris Technologies CEO (now board member) Bill Brown and executive board. This not only served as great advertisement to proliferate the design system across the company but also served as a spotlight on our UX team and the capabilities we provide as a whole.

Now the design system team has grown from two UX Designers to 4 UX Designers and two developers.

We now host workshops quarterly/ annually and provide any trainings to dev teams looking to use the design system as well communicate version updates in our changelog through via newsletters to the entire L3Harris developer community.

Testimonials

"This saves me a ton of time in development." - Developer

"The ui is so clean and easy to use" - Developer

"Wow, really impressed, and excited to get my team ready to use this software" - Engineering Manager

"I believe my department should be using the design system moving forward in our applications." - Director

"Where has this been my entire career!" - Sr. Developer

"This is a major contribution to our company and bringing our applications into the 21st century!" - CEO

"I've never touched code before and this really helped me build a page for my team!" - Communications Intern

Takeaway

This process was a great learning experience in the areas of practicing servant leadership, working on some coding skills and overall sticking too and trusting the UX process.

In the beginning at times I felt overwhelmed to lead/ create a system to potentially be used by the entire company and somedays I managed to not accomplish much. I was reminded that I didn't have to be the person with all the answers and that its important to ask questions. Presenting my initial MVP would have saved me more time early on at the beginning and I probably would have gotten support sooner than later. Understanding what my resources were and asking for more ultimately helped me accelerate production.

Working on the design system really helped me understand the importance of project management.

Next project

Page updated

Google Sites

Report abuse