All projects

Improving Accessibility Through Theme Sharing in Unreal Engine 5.1

July 1, 2022/ UX Engineer Intern
/ C++Interaction DesignAccessibility Research
Unreal Engine 5.1 Theme Sharing Feature

As an open and advanced real-time 3D creation tool, Unreal Engine (UE) sought a more accessible way to customize the colour of the engine's interface to improve developer and artist workflows and accessibility for creators worldwide.

Challenge

During my internship, I designed and shipped the theme-sharing feature in Unreal Engine 5.1, empowering users to effortlessly share themes with the Unreal Engine Dev Community, which resulted in ~80% time saved to customize colours for accessibility.

Impact

Upon the release of UE 5.1 in November 2022, over 7 million users can now share customized themes, with over 30k themes shared just last year.

My role

UX Engineer — user research, competitive analysis, workflow improvement, frontend development, accessibility research

Team

Erik Dillinger — Icon designer Patrick Laflamme — Mentor Lauren Barnes — Manager

Feature highlights

Leading with Accessibility

As one of the biggest game engines in the world, the theme sharing feature increased usability for users worldwide, and set Epic Games up to become an industry leader who created access for 300 million people with low vision or colour blindness.

01 User Research

First, I wanted to understand why users are motivated to create themes in the engine. I conducted user interviews with 6 internal Epic employees and reached out to the community to gain some initial insights.

[image]

Common use cases

Based on the user interviews, three common use cases surfaced:

  1. Improving personal workflow efficiency.
  2. Enhancing visual clarity for specific tasks.
  3. Addressing accessibility needs (e.g., colour blindness, low vision).

How users were chosen

Selected users have had significant involvement in accessibility projects at Epic Games, with an equal mix of experienced and new UE users. Additionally, 4 out of the 6 participants are members of the disability alliance employee resource group, who helped to identify accessibility enhancements for the engine.

02 Competitors Analysis

Theme-sharing should be as simple as clicking a button.

Most UE users are technically skilled engineers and designers. To ensure a seamless experience, I investigated how other engineering and design software handle theme sharing.

  1. Slack: Users can share themes via direct messages using a "theme code."
  2. Visual Studio: Users can directly download and import community-shared themes from online sources.
  3. Photoshop: Users have limited theme choices with various options in grayscale.

We decided to take a similar approach as Visual Studio, to empower users to effortlessly share themes online with other creators, boosting engagement of the Epic community.

03 How do "themes" work behind the UI?

Currently, theme-related settings are categorized under the "General" settings. However, when exporting the "General" settings, themes are left out, preventing users from sharing these settings with each other.

Why don't we include themes in the "General" export?

Other settings under "General" may be personal. For example, users may not want to share their accessibility preferences, so it's crucial to make non-theme settings private. Technically, themes couldn't be exported with other settings due to a file type mismatch.

Sharing themes intuitively

Allowing users to share themes exclusively is not only the most intuitive but also the most feasible. I added "import", "export", and "delete" beside the existing "edit" and "duplicate" buttons, controlling the entire engine's interface.

Theme sharing buttons UI

04 Implementation in C++

To ensure a seamless experience of theme-sharing, I developed a flowchart outlining the interactions of each theme-related functionality for the implementation in C++ and edge cases.

For example, when creating a new theme, it's crucial to verify for duplicate names. Similarly, when deleting the current theme, the engine should seamlessly revert back to the default theme.

Implementation Flowchart # Placeholder path

1. Select a location to export your current theme

Export theme flow # Placeholder path

2. Select a location to import new themes

Import theme flow # Placeholder path

3. Delete a theme and revert back to the default

Delete theme flow # Placeholder path

4. Verifying duplicate theme names

Duplicate theme flow # Placeholder path

05 Establishing consistency

Given the ability to import themes from both the general settings and the theme setting, some users expected that the theme will automatically update when importing the general setting.

Consistency User Flow Expectation # Placeholder path

Now, when importing general settings, the theme is automatically updated if it's found in the user's collection; otherwise, users are prompted to import a new theme. Additionally, when exporting general settings, the system checks for duplicate themes within the user's collection.

06 Further Design for Accessibility

At this stage, I collected valuable feedback from users eager about further improving accessibility. The next high-impact opportunity lies in refining the colour-picking screen. When users attempt to modify colours in a theme, they are met with an overwhelming number of options.

Overwhelming Color Picker # Placeholder path

An Unmet Expectation

Both experienced and new users expected to see preset themes that not only take into account colour contrasts but also offer the ability for additional customization. Instead, they can customize colours freely. Is that a good experience?

Preset Themes Expectation # Placeholder path

UX recommendations

Based on feedback, key recommendations included simplifying the color picker and introducing accessible preset themes.

UX Recommendations # Placeholder path

07 Further accessibility improvements

Concluding the project, I extended user research to pinpoint further opportunities. I delivered a concise video summary of findings and recommendations, shaping accessibility standards across Epic Games' products. Key improvements include:

  • developing preset themes that are accessible and vision-friendly.
  • generating default colour selections for folders in the content browser based on the chosen theme.

(Link to presentation recording could be added here if available)

08 Learnings

Wearing the designer and developer hat

Advocate for users while considering technical constraints, and obtain design feedback to implement rapid changes.

Understand the 'why'

Understanding the reasons behind current code/design is crucial before implementation. It streamlines adding new code and avoids unnecessary work.

Prioritization & Allocation

Documented out-of-scope ideas and prioritized feature delivery. Passed on proposed changes for future consideration, ensuring a cohesive user experience.

09 Result & Metrics

The project led to ~80% time saved to customize colours for accessibility. Upon the release of UE 5.1 in November 2022, over 7 million users can now share customized themes, with over 30k themes shared as of December 2023.


Huge thank you to my mentors Lauren and Patrick for the unforgettable 4 months! You've helped me fill the gaps in my skills as an UX Engineer and provided opportunities to collaborate with designers across Epic Games through my research. It's been a fruitful learning experience.