Role

UX Designer, Editor Team at Cloud Imperium Games

• Drive and help shape the UX experience the Star Engine Editor

• Provided weekly/bi-weekly reports to leadership

• Provided both high and low level constructive feedback and improvement suggestions with Mockups and Prototypes

• Engaged with and represent multiple gameplay disciplines

• Evangelized and improve usage of tools and workflows

• Created Confluence documentation about UX and the Editor

Tools

Tools and Methods used during development

• Qualitative Interviews

• Quantitative Surveys

• Heuristic Evaluation of Software and its Tools

• Miro and Figma for User Flows, Mockups, Wireframes

• Adobe Photoshop, Illustrator for Icons, visual development

• Confluence for Reports and Jira for Feature Requests and Bugs

• Testrail for Test suites and cases

• Microsoft Teams, OBS, Forms for Interviews and Surveys

Project Index

During my time as the Sole UX Designer @Cloud Imperium Games, I worked on a variety of projects:

1. RASTAR Base Builder

2. Patch Notes and Editor Documentation

3. Viewport Visual Manager

4. Color Picker

5. Cinematic Track Library

6. Delete Modal and Object References

7. Content Browser

8. Interface Standardization

9. Gizmos / Manipulators

02. Patch Notes AND Editor Documentation

[Technical Writing]

Problem Statement

“How can we support growth of new tools and provide more for the user when it comes to troubleshooting in the Editor?”

Why was this an issue?

• Editor and Tool documentation was Outdated

• Current Link inside the Editor leads to external documentation

• No Troubleshooting guides, or Contact information to our team

What did we do?

“Patch Notes”

• Created Patch Notes anytime the Editor was Updated and branched

• Created an Archive for Patch Notes to reside

• Lead Engineer wrote a script to auto-publish Change lists

• Included Feature Updates and user feedback forms

• We coupled these with Chat Channel Updates and Global emails

Who did this help?

• Any user who wanted to see what was New and reach out to us about improvements

• New Users who had never touched our tools before

• Our team, as centralizing documentation was a great help for internal communication

Results

• We increased awareness and participation globally

• Allowed us to directly link documentation to a tool in the Editor. Each tool in the Editor new or old would get a Documentation link.

03. Viewport Visual ManageR

[Rendering]

“How can we provide users with a refined control of viewport visualizers?”

Friction:

• Most Levels of have hundreds or thousands of objects

• Each object have “helpers” adding to viewport with clutter, making singular or multi selection difficult, and reduces FPS.

• Many of the options which control the visuals for the Viewport are located in bespoke tool windows in the Editor

What we did:

• Audit of the entire Editor’s viewport visualizer options

• assess if they were functional, duplicates, or needed alterations.

• Created a window which houses all Viewport Visualization options

• Runs parallel with our new Editor Settings Menu which was updated as a result of this project.

• Accessible via Shortcut and Button near top of Viewport

Who did it help?

• This was a win for all developers, as they could easily find, filter, and manage what is currently displayed in their Viewport.

Results:

• Increased FPS by refactoring the ways we rendered specific visualization helpers

• With Presets, users create multiple visual environments, rather than a singular one with on / off.

• If a user needs a set of cinematic visualizers, and another for debugging they can toggle between the two without effecting the other, and return to the Default Visual settings

04. Color Picker

[Tech Art]

“How can we improve our Color Picker to suit Tech Artists needs?”

Friction:

• Outdated Color Picker and Interactions

• Limited Options for Custom Colors

• No Connection to other Tools, which utilize Color Picker often

What we did:

• Added Multiple LUT (Look Up Tables) which allow users to select specific Color Spectrums, ie. for Skin, and Hair

• Updated Interactions, Keyboard Shortcuts, and Custom Color Presets

• Connected our Tint Palette Tool, which gave users quick access to pre-determined Color Palettes.

Who did it help?

• Lighting, Character, Vehicle, Level Design, Environment Art

05. Delete / Object References

[Asset Reference]

“How can we prevent users from Deleting Objects with References and reduce Build Failures?”

Friction:

• When users Delete game objects, our Delete Modal does not inform the user that the game object contains a reference. Because of this, it was causing Build Failures, broken levels.

• This resulted in wasted time applying fixes and reverting changes in Source Control

What did we do?

• Developers I worked with had a very detailed breakdown of the problem and what they wanted. Which was super helpful.

• We create a new tool which would trigger if a Reference was found in the Pending Delete List.

• This would allow users to select and modify the Objects in the pending list

Who did it help?

• New and Old Developers of all kinds. This was a huge time saver for everyone as they now know when Objects have a Reference before they Delete the Objects and cause Asserts and other critical errors in Builds.

Results

• Our group of developers we tested with called it, “a godsend” to saving time.

• Level Decay and bad changes decreased drastically once our tool branched into other streams.

06. Cinematic Track Library

[Cinematic]

“How can we reduce the clicks it takes to find and add Track types to a Node in our Cinematic editor tool?”

Friction

• Our Cinematic tool, “Trackview” and our Cine Team requested a better solution to the way they add, “Tracks” types to on the timeline.

• Nested Lists containing Tracks were too long, and took too long to find specific tracks.

• Code Strings were displaying instead of proper names, and long strings truncated the text

What did we do?

• Fixed Strings

• Created a small pop up window with a filter

• Provided Favorites

Who did it help?

• Cine Team, Marketing, and Animation

08. Interface Standardization

[Design System]

Problem Statement

“How can we standardize Our Editor UI?”

Why was this an issue?

• The Editor’s GUI is a mixture of old Microsoft Library and QT5, with a dash of imgui.

• No Standards across the tools, no established breakpoints or scaling depending on what GUI library the tool was utilizing.

• Icon Library was all over the place in shape, size, colors, and styles

• Typography Sizing was inconsistent across HD, 2K, and 4K displays which devs commonly discussed.

What I did:

• Audit of the Major Editor Window followed by audits of different major tools allowed me to identify our outdated tools, and the tools which needed the most help.

• Began making a design system in Figma

Results

Utilizing my audits, we were able to accomplish the following:

• We utilized my audit findings to reformat our Editor Settings, which allows user to modify the scaling of our text and icon sizes.

• We centralized, resized, and reformatted our engine icon Library to be scalable to our different resolutions needs

• With a newly formatted Editor Settings, the text, and the icons, we had the Foundation for our Viewport Visual Manager and expose other editor features.

9. Gizmos / Manipulators

[Gizmos, Gadgets, and whatsits]

“How can we improve accuracy of selection, translation, and visuals of our Gizmos?”

What did I do?

I was asked to Concept new visualizations for our Transform Gizmos.

• I looked to many other 3D Software packages, all of which were programs we used and ones we didnt use. Unreal, Maya, 3DMax, Zbrush, CAD, game tools like Base Builders, and of course Figma and Miro.

• These are Preliminary Designs for Selection and the Translate, Rotate, and Scale Gizmos. Visuals for States: Deselected, Selected.