top of page

CREATING A SINGULAR DESIGN LANGUAGE FOR HR APPLICATIONS

Case Study - 2020

There was effort to redesign multiple Human Resources applications, which led to the opportunity to revise the design language that was used for all HR applications. Our focus was to reduce the design and development efforts and shorten the iteration time from idea to developed product.

Collaborative Partners

Branco Kuznar, Staff User Experience Designer

Tyler Lubbers, Staff Developer

HR Design System: Text

WHAT'S THE PROBLEM?

The company observed that there was a communication gap between the design of products and their development in the human resources space that led to longer turnaround times and additional time spent discussing design changes. How might we reduce the amount of time spent in design validation with our development partners so that we achieve a shorter lifecycle to get products to market, while reducing the development overhead to creating new features?

HR Design System: Text

HERE'S THE STORY

During a gap in multiple teams’ efforts due to multi-week pilots at similar times, we were approached to revisit the design of our human resources applications. We initially facilitated a goals-building session with our leadership and established the guidelines for completion of this project. There was daily collaboration and rapid ideation of implementing a legible, usable, and viable style for over 50 components. Upon completion of the design, we presented our findings and a live demonstration of design-to-development of UI elements with multiple leadership partners.

HR Design System: Text

OUR USERS

Developers
User Experience Designers
Development Managers

HR Design System: Text
HR Design System: Work

SCOPE & CONSTRAINTS

  • Affecting 34 designers & developers, across five products

  • Conducted during pilot periods of multiple products, limiting time exposure

  • Limited support, three team members created a recommendation and presented it to leadership

  • Development limited the viable design languages to three competing technologies: Flutter, Material, and our homegrown design language

HR Design System: Text

OUTCOMES

  • Reduced time designing, by limiting the components used across multiple teams and products

  • Reduced development time, due to using simplified, out-of-the-box components to recreate the branded style

  • Increased speed-to-market across the area

  • Documentation of the design system in a shared repository for future use

  • Introduction of multiple component variants to support future-case scenarios

  • Allowed for direct development/design collaboration and conversation employing the needs of multiple teammates

HR Design System: Text

ROLE & RESPONSIBILITIES

  • Strategy

    • Research Planning

    • Goals / Anti-Goals Faciliation

  • Research

    • Comparative Reviews of different design languages

    • Subject Matter Expert Interviews

    • Developer interviews

    • Design Component Review & Analysis

  • UI Design

    • High-Fidelity mockups

    • Live Design Reviews

  • Usability

    • Developer Feedback Sessions

  • Collaboration

    • Weekly Report Outs

    • Style Guide documented to internal shared space

HR Design System: Text
bottom of page