beyond the yellow brick road

A music and fashion experience by Elton John
High fidelity screens and clickable prototypes in Figma
Figma, Roblox
Rocket Productions, Sawhorse Productions, Roblox
Talia Bowles - User Interface & Interaction Designer
Jessica Thomas - Motion Graphics & Creative Director
Kimb Luisi - Creative Director
Dan Young - Creative Director
Dan Young - Creative Director
Patrick Trinh - Project Lead
Mikaela Farrell - Illustrator
Joseph Gutierrez - Roblox Developer
Tyler Gnass - Roblox Developer
Edmon Snyder - Roblox Developer
Design Systems, Visual Design, Interaction Design, Prototyping, Sketching, User Research
*Jump to demo
What is Roblox?
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.
Who is Elton John?
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.  
Market Research
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.
Text only, appears in the middle of the screen, no close button
Text icon, appears from the top of the screen, no close button
Text only, appears from the top of the the screen, no close button
Elton John Style References
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.
Elton John style guide sample
Elton John website hero image
Visual Design Reference
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.
Low Fidelity
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.
Style Exploration
With the creative directors on my team, we used an iterative process to explore the overall UI style.
Final Style
After our iterative process and client feedback, we landed on the below image as our final style.
Final Notification Components
Testing Constraints
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
Testing Constraints
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.
Roblox Development
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.
Developer Bandwidth
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.
Prototype Interactions
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.
*Back to top