Workday UI Approaches

Overview

Workday’s diverse ecosystem includes multiple tech stacks, each with its own opportunities and constraints. Understanding these will help you make informed decisions, communicate effectively, and achieve your design goals.

There are three main approaches to designing UI at Workday: Generated, Hybrid, and Bespoke. Choosing the best approach depends on many factors and has an impact on the style of interactions you will be able to support, so talk to your team early and often to understand the possibilities.

Approaches

The Role of Canvas

Canvas provides the design point of view for design standards and best practices within Workday. Canvas Kit is a shared library of React components and includes a supporting Figma library that mirrors it’s capabilities. Canvas Kit tends to focus on the lowest level, simplest components that can be used to build more complex components. Canvas is most commonly seen in Bespoke and Hybrid UI but is increasingly used in components in the Generated UI.

Things to Note

1. The UI approaches listed in this article are the most commonly used in Workday. They are tied to the Object Management Service (OMS) which is Workday’s central database. Alternative platforms include ModulR, Lodestar and Extend.

   • Some product areas are built on their own servers and databases, especially those services that began as acquisitions (Prism, Drive, Scout, Peakon, Adaptive Planning, VNDLY). These products are effectively ‘Bespoke UI’ described above, though the relative cost varies depending on how much has been built for reuse.

2. In this article, you will encounter terminology that is different to the industry standard. Namely, the terms widget and layout are interchangeable and have very broad definitions. In a nutshell, widgets are components. They can be singular or composed of multiple widgets. They can be as small as an atom or as large as a page. Layouts are different variations of how certain widgets are organised.

   Widgets = components | Layouts = control components

3. Learn how to access a Single-User Virtual (SUV) which is the main environment for developing and testing the Workday application. This allows you to experience the Workday application without using your own instance of Workday. Access Devhub in an SUV to view the Generated UI widget library which is the closest thing to a Storybook of Generated UI widgets.

Learn More

• The Philosophy of Workday UI
• Approaches to Building UI

Generated UI

Also known as “Metadata UI, XO, Platform, Standard Tooling”.

Generated UI is the backbone of Workday’s user interface, powering the majority of its experiences with ~50k tasks. It leverages XpressO (XO), Workday’s proprietary programming language, to create interfaces automatically from predefined configurations and metadata. This means developers define the underlying data and logic, and Workday’s UI layers take care of generating the visual elements.

On mobile, Generated UI is built using Mobile Application Xpresso (MAX) and it supports ~2k tasks.

Building the UI

Think of Generated UI as assembling pre-fabricated building blocks. These blocks are called widgets — self-contained, reusable components that provide specific functionalities like text inputs, buttons, and tables. With a code library of over 400 widgets for web and 200 for mobile, developers can construct a wide variety of pages and screens.

Design Considerations

While Generated UI excels in efficiency and consistency, it offers limited design flexibility. Developers work within predefined templates and options, with constraints on spacing, element placement, and overall layout. Due to the hard constraints of the medium, there are no natural ways to circumvent these restrictions. However, layouts are available that offer some control over the visual flow and arrangement of components.

Benefits and Trade-Offs

Generated UI is a platform solution that prioritizes rapid development and a unified user experience. It comes with built-in advantages like accessibility, localization, and security, for example. Generated UI provides a lower cost of delivery and ownership to product teams than going bespoke.

However, the trade-off is less freedom for pixel-perfect customization or unique visual treatments. The deep ties to the Object Management Service (OMS) make lightweight interactive experiences or temporary states difficult to achieve.

Examples in Production

Log in as superuser to view the following examples.

• Profile (page-level widget)
• Create Expense Report (edit flow, forms)
• Tables
• Calendar
• Inputs
• Create Expense Report

Key Takeaways

• Development and maintenance is fast and low cost.
• It has a lot of built-in advantages such as accessibility and globalisation.
• There is not a lot of design flexibility.

Familiarize yourself with the capabilities and limitations of Generated UI. Understanding how it works will enable you to collaborate effectively with developers and make informed design decisions within the Workday ecosystem. You can access a comprehensive library of Generated UI widgets to see them in action and understand their capabilities in Dev Hub via an SUV.

Learn More

• Metadata UI
• Access an SUV
• XpressO (XO) Introduction for Non-Developers course

Bespoke UI

While Generated UI provides a strong foundation for many Workday applications, there are times when a customized approach is needed. This is where Bespoke UI shines. Unlike Generated UI, which relies on pre-defined components and automatic generation, Bespoke UI empowers designers and developers to craft unique interfaces from the ground up, offering more design freedom and flexibility.

Building the UI

Bespoke UI leverages components from Canvas Kit and Workday Components (WD-C). Canvas Kit tends to focus on the lowest level, simplest components, while WD-C focuses on more complex components, often but not always combined with specific Workday logic. The use of these empowers the creation of rich, interactive interfaces, all while maintaining a consistent look and feel within the Workday ecosystem.

Design Considerations

Bespoke UI unlocks a world of design possibilities and offers a huge amount of design flexibility. However, it comes at a much higher cost. It’s important to determine if using Bespoke UI offers a significant benefit to the end user compared to utilizing Generated UI. Often, Bespoke UI is used for more complex flows or interactions that cannot be achieved using existing metadata widgets.

Benefits and Trade-Offs

This can be a really desirable approach for the right team and project. It unlocks a world of design possibilities with less constraints.

However, this approach comes with increased development effort such as time, resources and cost. Hidden costs include ongoing maintenance, accessibility and responsiveness across devices etc. It also requires careful design system management to ensure consistency across bespoke applications.

Examples in Production

• Workday Home Page
• Help
• Learning
• Onboarding

Key Takeaways

• Always consider if the same user experience can be achieved using Generated UI first.
• It offers a lot of design flexibility.
• It is expensive.
• This can be a great approach for very complex interactions and flows.
• It is not very scalable.

Learn More

• Bespoke UI

Hybrid UI

Building the UI

Hybrid UI starts with the solid base of Generated UI, leveraging Workday’s pre-defined components and configurations. Then, it strategically incorporates custom or existing bespoke code and components where needed to achieve specific design goals or create unique interactions.

Design Considerations

Mixing Generated UI and Bespoke UI can lead to inconsistencies in appearance and behavior, even for the same component on a single page. While the component looks the same, it is two separate components; one is a Generated UI component and the other is a Bespoke UI component. This can result in subtle differences, such as input fields having different border radii, different behaviour states etc.

Benefits and Trade-Offs

This approach allows you to maintain the overall structure and consistency of Generated UI while adding targeted customizations. It is also a more cost effective approach than Bespoke UI.

Carefully determine which aspects of the UI should be generated and which should be custom-built to achieve the right balance of efficiency and flexibility. It’s important to integrate custom elements with the existing Workday design language to ensure a cohesive user experience. It also requires developers with expertise in both XpressO and front-end web technologies.

Examples in Production

• Audio Name Pronunciation
• Talent Progress Bar
• Talent Skills Summary
• Media Player
• Career Hub

Key Takeaways

Hybrid UI is the ideal choice when you need to enhance generated UI with targeted customizations or incorporate complex interactions. It allows for a more tailored experience while still leveraging the benefits of Workday’s pre-built components.

Learn More

• Hybrid UI