The document summarizes work done by Unity to modernize the look and feel of the Unity Editor. It describes problems with the outdated and cluttered interface. Unity conducted user research, prototyped solutions, and refined builds based on feedback. This included selecting new fonts, improving controls with depth, and creating a consistent theming system. The updated editor received positive feedback for its modern and inspiring new design while maintaining usability. Unity will continue improving workflows, accessibility, and responding to bugs and suggestions.

2. GenerativeArt—MadewithUnity
Modernizing the
Look and Feel of the
Unity Editor
Mary Luther
Unite 2019, 9.24.19

3. Outline
3
The Problems
What lead us to improve theming in the Unity Editor?
The Strategies
What process did we follow to improve theming in the Unity Editor?
The Work
What work did we do to improve the Unity Editor?
The Solutions
How has this theming work improved the Unity Editor?
1
2
3
4

4. 1: The Problems
4
Problem 1: Dated
The Unity Editor had not
had a theming update in
over 12 years
Problem 2: Focus
The Unity Editor was busy,
distracting, and disorienting
Problem 3: Quality
Many tiny issues were
adding up to poor quality

5. 5 Unity Editor, version 2019.2.0f1Problem 1: Dated

6. 6 Unity Editor, version 2019.2.0f1Problem 1: Dated 6

7. 7
“When using [Unity] today, it is really
disappointing, depressing.”
-Unity user, Game Designer
Unity Editor, version 2019.2.0f1Problem 1: Dated

8. Unity Editor, version 2019.2.0f1Problem 1: Dated 8
“My overall impression of it is that UI is very dated.. reminds me
of early 2000 for 3D program. the colors and the gray is not up
to date. I am not judgemental as long as it does what I needed
it to do. But all the windows around it are overwhelming… I
would not even know where to start here…”
- Unity User, Studio Founder and Animator

9. Problem 2: Focus 9 Unity Editor, version 2019.2.0f1

10. Unity Editor, version 2019.2.0f1Problem 3: Issues 10

11. 2: The Strategy
11
Defining What We
Needed to Do
Decide where to focus and
which tasks we should do
The Process
Decide how we would work
on these challenges as a
team
The Principles
Figure out how to prioritize
work and make decisions
as a team

12. Defining What We Needed to Do
12
Develop a
consistent way to
theme the Editor
Update the look
and feel
Update the fonts and icons
Improve core interactions
and controls
Create a set of
style guidelines
Create comprehensive
alternatives to hard-coding
Problem 1: Dated Problem 2: Focus Problem 3: Bugs

13. The Principles
13
Efficient
Performing tasks in Unity are
clear and efficient
Modern
Provide a quality and
professional Editor experience.
Familiar
UI is consistent and aligned
with industry standards.
Inspiring
Users feel inspired and
unlimited.
Users First
Solutions are guided by user
feedback and data.
Accessible
Usable to a wide range of
users and their abilities.

14. The Process
14
PROBLEMS
USER
RESEARCH
PROTOTYPE &
BUILD
DESIGN &
TECHNICAL
DEVELOPMENT
{ }

15. 3: The Work
15
Example 1: Flat
Design
Discover how to add depth
to a flat design language
Example 2: Font
Selection
Work to find the best
typeface and rendering
options
Challenges
The challenges we
encountered along the way

16. Example 1: Flat Design
16
Problems
Flat style made the Inspector hard to use.
Principles: Efficient, Accessible
User Research
Users surveyed reported they had difficulty
differentiating controls from each other.
Principles: Users First
2019.2
Early test build

17. 17
Design and Technical
Development
We did a design and technical exploration of
how we could improve the style of the controls.
Principles: Users First, Modern, Familiar,
Accessible, Efficient, Inspiring
{ }
Example 1: Flat Design

18. 18
Design explorations
Example 1: Flat Design

19. 19
Prototype and Build
We updated a build to include the changes.
The results were shared back with users for
more feedback.
Principles: Users First
Example 1: Flat Design

20. 20
Problems
Dated low-quality fonts.
Principles: Users First, Modern, Inspiring,
Accessible
User Research
Users reported that text looked blurry on
low-resolution screens and that the Editor
looked dated overall.
Principles: Users First, Modern, Inspiring,
Accessible
Example 2: Font Selection

21. 21
Design and Technical
Development
We selected high-quality fonts and tested
them in the Editor.
Principles: Users First, Modern, Familiar,
Accessible, Inspiring
{ }
Example 2: Font Selection

22. 22
Prototype and Build
The Inter Typeface was the best choice for
the Unity Editor
Principles: Users First, Modern, Familiar,
Accessible, Inspiring
Example 2: Font Selection

23. Challenges
23
Challenge Solution
Develop a new design system
Develop a better technical theming
solution
Fix UI related quality issues
Large scale design systems for the
long-term and near-term Editor
Created a new styling system via USS
(Unity Style Sheets)
Iterated on private beta builds and
refined in response to user feedback

24. 24
300+
Hardcoded styles corrected
400+
User suggestions implemented
5,000
Icons refreshed
Challenges

25. 3: The Solutions
25
Solution 1: Modern
and Inspiring
Redesign in a modern style
while retaining usability
Solution 2:
Clear Focus
Create a clear focus and use
color with intention
Solution 3:
Quality
Work with our users to
improve and refine the builds

26. 26
Unity Editor, version 19.3
Solution 1: Modern and Inspiring

27. 27
Solution 1: Modern and Inspiring
Unity Editor, version 19.3
“This is BEAUTIFUL the perfect UI/UX the
designers deserve a huge raise, everyone should
take inspiration from this UI it reminds me a bit of
blender new UI, which is a good thing i wish
windows 10 looked similar.. they should take
inspiration from you”
User comment on August 2019 blog post

28. 28
Solution 1: Modern and Inspiring
Unity Editor, version 19.3
Would be much appreciated if you could be able to increase the
size of the GUI toolbar for the editor. Not just the Tabs. Im
working on a 4K screen in 4K res, and the toolbar is just too
small. For you who dont know what im talking about, its the
toolbar where you find “File, Edit, Assets etc etc”. Please make
it possible to increase that text aswell. Thank you Unity Crew.
User comment on August 2019 blog post

29. 29
Solution 1: Modern and Inspiring
Unity Editor, version 19.3

30. 30
Solution 2: Clear Focus
Unity Editor, version 19.3

31. Unity Editor, version 19.3
31
Solution 3: Quality

32. What’s Next?
32
Build Common Controls
Create common controls and
control-patterns for use in the
Editor and at runtime.
Research Workflows
Research common workflows
and learn more about
productivity issues.
Make it Accessible
Improve accessibility including
contrast, text size, keyboard
navigation, and click target
size improvements.
Continue Innovating
Continue work on the
long-term vision for the Unity
Editor and continue moving
toward that with each release.
Fix more bugs
We will continue fixing
theming issues.
Improve the Themes
Continue to collect feedback
and improve the themes.
-freepik images

33. Commonly Asked Questions
33
Why isn’t the dark theme available to
all users?
Why spend engineering time on this effort?
Why not fix something higher impact instead?
Why hasn’t my feedback been addressed or
taken into consideration?
Why flat design?

34. Commonly Asked Questions
34
Why isn’t the dark theme available to
all users?
Why spend engineering time on this effort?
Why not fix something higher impact instead?
Why hasn’t my feedback been addressed or
taken into consideration?
“I’m always bitter to see announcements like that. There are
so many things to fix before choosing another set of icons..
It looks good though.”
User comment on August 2019 blog post

35. Commonly Asked Questions
35
Why isn’t the dark theme available to
all users?
Why spend engineering time on this effort?
Why not fix something higher impact instead?
Why hasn’t my feedback been addressed or
taken into consideration?
Why flat design?

36. 36
Volunteer for Unity
User Research
https://unity.com/
advisorypanel
See the Transition
Guide in the Human
Interface Guide
hig.unity.com
Leave feedback in
the forums
forum.unity.com
See a Problem?
Report Bugs
Unity menu > Help >
Report a bug

37. 37
Thanks.
We couldn’t have done it without you.