Modernized Workiva’s Design System

Simplified complex government compliance processes with Design System refresh for companies in a variety of industries such as Duolingo or Southwest.

Executive Summary

UX Design at Workiva is a vibrant culture of different subdisciplines (UX Research, UX Design, Content Design, and UI Design). Combined these disciplines come together to craft delightful products and experiences to continuously drive value to customers.

Project type

UI Design Consultation + Follow Up

Design System Conversion Help

Google Material Design (MUI) direction

Future State Mockups

Timeline:

5 months (January 2022 - May 2022)

My role as a

UI Designer

The UI Design team at Workiva is scaling up at an incredible pace because of a Google Material re-design to become more competitive and user-friendly in a historically esoteric context. Below are some examples of problems I solved and my rationale.

Problem 1

ESG (Environmental, Social, and Governance) Explorer

ESG is a framework for measuring a company's sustainability and ethical impact. It's often used in business to inform investment decisions and to help companies report on their business's impact. To help out, several organizations have developed frameworks and standards that work together to ease comparable, consistent, and reliable disclosures in ESG reporting.  But knowing which framework, or frameworks, makes the most sense for a business isn’t always straightforward.

ESG Explorer is the tool that gives Workiva customers the ability to browse multiple frameworks and standards to identify the disclosures that matter—or are material—for ESG reporting in one location.

Before UI Refresh

Points 1 thru 5 are a mix of problems ranging from:

  • page layout issues,

  • lack of headers (see Num 2),

  • and overall old UI,

After UI Refresh

This is one of many explorations of what direction I wanted to take regarding the ESG Explorer tool in the future.

Working with the designers on this team we improved many aspects of this design:

  • Points 1 through 5 were improved with cleaner design, bolder headings, and clear textual hierarchy

  • Points 5 - 10 were added through a new component unique to the ESG Explorer tool.

    • I added the right-hand panel component to preview ESG guideline bookmarks quickly by pressing the eye-in page icon (See Num 10), while still keeping the User on the original page.

    • Num 9. Also shows related organizations (such as GRI and SASB) to the selected Bookmark the User is looking at, simplifying the experience of cross-checking between other frameworks.

Problem 2

Component Risk Assessment

A "component risk assessment" refers to the process of identifying and evaluating potential issues or risks associated with individual elements (components) within a user interface. We do this to address potential usability problems and ensure a smooth user experience before launching the design.

This is some Risk Assessment work based on the SelectedItem Component that existed in the past Workiva Design System. The risk assessment was needed due to the different looks that the SelectedItem Component had throughout the Workiva Design System, this process would later be applied to other existing components as well.

Once we were able to gauge the amount of work that would be necessary the next steps would be to:

  1. Design a new component with an ideal look encompassing the best of what currently existed

  2. A design that would be possible within the current design system and also an ideation for what it would look like once we transitioned to Google Material

  3. Present findings to leadership and create mockups based on feedback

Takeaways

My experience at Workiva was an enlightening one. I’ve learned so much about working in the industry and what it means to be part of a multi-faceted team and part of an even bigger company. I received a solid understanding of completing an end-to-end project, but also got to get my hands on handling multiple smaller varied tasks and projects as well.