Roblox app is built on web view
Currently, when you open up a page inside the app, it’s technically opening up a browser within the app.
Web view has limitations...
But, web view is far from perfect. For example, it cannot be used in consoles or other mediums. And it can’t leverage the full extent of native device functionality such as camera, geo-location, and more.
A redesigned Roblox app built with the design system
Thus, a few years ago, Roblox made the technical decision to Lua-fy the Roblox app. This means to re-create the Roblox front-end interfaces with Lua, the code language that developers use in Roblox. There are many benefits to this such as cross-platform experiences, increase in app efficiency, and more.
And for designers, we have a design system that’s built for Lua called uiBlox. And I used the design system frequently during my project.
Redesigned 40+ pages & proposed design solutions
As the design intern on the Core UI team, I focused on the six main pages that are under “Settings” in the Roblox mobile app.
I audited all six pages and documented all the potential issues using heuristic evaluation and listed the functional requirements of each page. I then organized the issues into two categories: Visuals vs UX. These two categories eventually turned into two different stages of the project.
In the end, I not only redesigned all six sub-pages (50+ screens) under Settings using the uiBlox design system in stage one, but I also tackled the top four priority UX issues identified in the “Account Info '' sub-page in stage two.
Different goal for each stage
As I mentioned, there were two main stages of the project. Thus, here were the goals for each of the stages:
Stage 1 | “Lua-fy”
Visually redesign the pages using uiBlox design system
Stage 2 - “Propose”
Improve the overall user experience of Settings
A visual overhaul using uiBlox design system
Most of the design changes implemented here are visual-based or things that don’t make sense from a design perspective. Below are snippets of the designs I did:
For all pages, the major visual changes include increasing font size, setting header & label color to white, using new components, and adding a spacing system.
Now, I’ll delve into two specific problems (of the many) that I tackled during stage 1 of my project.
Problem 1 / Top navigation
The placement of the “My Settings” text makes it seem like it’s under “Security” in the hierarchy, but it’s actually the opposite. Also, the user can use a dropdown to navigate through different pages. But the problem is that the header doesn’t update.
I removed the “My Settings” text and dropdown all together. I did consider a text dropdown or a tab, but I didn’t use them because normally users come to settings for a single purpose. Thus, it’s not very necessary to let them easily switch between pages.
Problem 2 / Input field
After entering their password, users have no idea what field corresponds to which. And they can’t check their password.
I added input labels to keep the users informed and an eye toggle to give the users a sense of control and assurance.
Improve the overall UX of settings
During this stage, I focused on the “Account Info” page because it’s the most complicated and extensive page out of the six sub-pages. And I tackled the four top priority problems I identified in the audit.
In this case study, I’ll delve into one of the four problems I tackled, which I titled “Misleading Structure.”
Currently it’s hard for users to find what they want on the “Account Info” page. For example, “App Language” and “Theme” are currently under the category of “Personal.” This can be misleading for users who want to find these fields as quickly as possible.
So, we did an online open card sorting. We created 14 cards, which corresponded with the number of functional requirements in the Account Info page.
And after getting ten responses, here were the key findings:
01 | 3 groups emerged 👀
Social media, accessibility, and account information.
01 | App language & theme 🤝
All ten users grouped app language & theme together into a group
But, we realized that under the category of “Account,” there were a total of 7 items, which is a lot.
Thus, we did another round of open card sorting but this time with 7 cards. And here were the results from the 3D Cluster view. Cards that are closer together were more frequently sorted into the same category.
Here, we see two triangles, which are the two groups splitting up the 7 items - “Personal” & “Account.” But (again), if we look deep into the “Personal” category, we realize that “Phone Number” is in this category.
In the current app page, “Phone Number” is actually under “Account," which is different.
In the end, I still moved “Phone Number” to “Account” because behind the scenes, the phone number is used for account verification.
Final information architecture
So, based on rounds of user research, I changed the information architecture of the Account Info page. I moved “Display Name” under “Personal” because it aligns more with the user’s mental model. And I added a new category “Customization” with “App Language” and “Theme” under it.
In addition, I made changes to the final UI accordingly.
Design rationale, documentation, and more
Three months flew by just like that. I am incredibly grateful for Roblox giving me this opportunity to grow as a designer and all the amazing designers and interns I’ve met. Here were things I learned along the way:
01 | Design rationale 🤔
Always ask why when designing. Then ask more whys. And think about how my design decisions will affect the users.
02 | Design documentation 📝
I also learned how to structure and document my Figma files for my team members to easily understand my work. It's important to always keep track of my design decisions as well.
03 | Intricacy of a design system 🧶
I used the uiBlox design system everyday, and I really got a taste of the complexity and value of a design system.
04 | Mindset is key 💭
This was crucial for me. To be very honest, at first I wasn't fond of the project because it wasn't "glamorous." But then, I realized that this mindset won't help me at all. So, I tried to change my mindset and told myself - "Hey I will do my best work no matter what! I'm sure this will be a great learning experience!" And turns out I learned a lot more than I expected!
You're a superstar 🌟
Thank you for reading this case study! If you’re interested, feel free to check out my other projects 👇