beyond the yellow brick road

Roblox is an online game platform and game creation system developed by Roblox Corporation that allows users to program games and play games created by other users.

Elton John is an English singer, pianist and composer.

I was brought on to this project by the Sawhorse Productions team as the sole UX resource. A majority of the experience and digital world had already been built out by the time I was onboarded, so that meant creating a design system for a product that was about 90% complete.

Before beginning any design work, I worked with the Project Lead and Creative Directors to make an exhaustive list of all the UI that would be needed for the experience. This step helped us understand the scale and scope of the UI needed for the project and where components could be leveraged to make the experience easily scalable.  

I started by looking for design or component patterns in other Roblox experiences.
‍
For example, here are screenshots of various notification modals that I found to see the different combinations of text, buttons, icons, etc. that are used in a Roblox experience.

The Elton John team sent their style guide. The guide was used as a reference to make sure the UI did not feel too stylistically separate from his other products.

Lastly, we explored UI that had a specific visual style we could combine with Elton John's existing style to create a unique UI for the Roblox experience.

I began with blocking out components in low fidelity. This way, styles could also be easily applied once they were approved by the Sawhorse creative team and client.

With the creative directors on my team, we used an iterative process to explore the overall UI style.

After our iterative process and client feedback, we landed on the below image as our final style.

The ability to test was restricted by privacy requirements before release and time constraints. I relied on feedback from other team members on fully clickable prototypes

There were a couple obstacles that arose once the UI development process began:

1. Roblox development is different from web development, especially when it comes to responsiveness.
‍
2. The bandwidth of the developers affected how they could approach the implementation of the UI and the amount of QA that was able to be done.

UI on Roblox is based on a UDim2 value, which is based on the size of the viewport. For example (1,1) is 100% on X/Y, which means that component will take up the whole viewport. There can be pixel measurements, but they don't scale well. This lack of exact pixel measurements cause inconsistencies in button size, padding and other details.

Below are screenshots of the desktop version. The font size, button size, padding and other attributes of the design system vary between each of these screens.

Due to time and resource constraints, the developers were unable iterate on these screens. That meant that the design system inconsistencies like button size, padding, etc. were not addressed. In addition, general UI development issues that happen in every development processes were unable to be corrected.

This experience involved some complex interactions, so I created a number of prototypes to make sure the interactions were clear to the developers and users.