top of page

Erin Murphy

internal employee portal

Design System Library

introduction

After entirely handing off version 1.0 of the internal employee portal to developers, the design for version 2.0 started. 

​

  • As this website is used for a federal agency’s internal employees as a sign-on portal site, under a security clearance, varying levels of detail are shown in this portfolio piece.

​

Additionally, the scope of this client project changed:

​

  • The team grew from myself and one customer experience team lead to three team leads, multiple front-end developers, and multiple designers.

  • Designs incorporated SAFe Agile and Scrum methodologies.

  • We created an extensive design system library for use across many of the client’s websites.

    • The first of the websites to use the new design system library was the internal employee portal.

design process

The implementation of Agile and Scrum to the design work coincided with the transition from a small team to a larger design team. The change created a design team within a larger client project with hundreds of other team members. Utilizing the Agile method allowed the team to deliver designs in a faster iterative process, get feedback quicker, allow client feedback earlier, finalize designs, and create quick handoffs to developers for implementation.

design system library

A significant area of focus for the design team was to build a design system library so that redesigns of multiple applications and websites for the client would be possible. Having the design system library enabled the team to:

​

  • Create a consistent “brand” for the client across many different applications.

  • Mobile and 508 Compliance (Accessibility) built into the designs.

  • Keep a consistent brand and visual design, with multiple designers working the on same client site, but on different web pages.

 

building the design system library

To build the design system library, the first decisions I made included:

​

  • I researched icon libraries, documented the benefits and issues with each library, and proposed the final icon library to leadership.

  • I researched the typography/font options for the design system library, reviewed the font pairings, and proposed the final font options to leadership.

  • I researched the client’s branding color palettes and passed all the research to the visual designers on the team for the final color palette.


With those starting decisions made, each designer on the team began to create many different components for the design system library. This system used the U.S. Web Design System (USWDS) as the base.

​

When I created all the components in the design system library the process below was used:​

  1. I reviewed the component on the U.S. Web Design System website and its documentation.

  2. I researched UX best practices and compared the same component to other design system libraries.

  3. Based on the research, I decided:

    • Redesign the component - document changes from the original design and have a feasibility review with the front-end developers on the team.

    • Do not redesign the component instead, use the base design from the original design system library. 

  4. I added the client’s branding to the component, including font, icons, and colors.

  5. I reviewed and received feedback from team members. 

  6. I finalized the component and passed it to the front-end developers to code.

 

An example of a component I designed, following this process is shown below.

version 2.0

As the team was onboarding to the project and building the design system library, designs for version 2.0 of the internal employee portal began. As the subject matter expert, I has multiple responsibilities such as:

​

  • Introducing team members to this portal

  • Providing information on decisions made for design 

  • Explaining all technical language used

  • Assisting other designers in feedback sessions 

​

 As workflows intersected between the design system library components and the design of the internal employee portal, months of work included: 

​

  • Multiple iterations of the wireframe designs

  • Creating consistent page layouts by page type

  • Meetings with product owners, business analysts, and development teams

  • Creating new functionality to the internal employee portal, which in turn added new pages with complex business rules. 

 

For example, I worked on the Profile page, which in version 1.0 had a few form fields but only a little content. For version 2.0, however, the final iteration was a very complex page with many conditional form fields, conditional menu items, and conditional portions of the page based on business rules and employee-level access.

 

With multiple designers on this project, I took the opportunity to create the final clickable prototype of the site through Adobe XD. To do this, I gathered all the pages across many designer files, linked them together, gathered the pages’ mobile versions, and ensured all pages were complete. After I created this prototype, I presented it to our product owners and received approval on the final designs.

​

Language Edit

The comprehensive language edit to all the web and mobile designs involved language changes, adjusting the designs as content changed, and many client meetings with the product owners. In a holistic view, this process was:

Finalizing the content was the last major touch point I’ve consistently had with this redesign. I am still the main team member who maintains the Adobe XD file for the development teams.

bottom of page