Roblox

← Home Context Problem Solution Contribution Goals Stage 1 Stage 2 Learnings

CONTEXT

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.

The account info page with a red box on it highlighting where web view starts

Everything under that "X" is from a browser 😅

Problem

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.

solution

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.

A series of app mockups of the final roblox app designs

Some of the MANY screens I've created 👀

mY CONTRIBUTION

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.

A diagram showing the six sub pages under Settings

The six sub-pages under Settings 6️⃣

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.

How I organized the issues 🧹

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.

GOAL

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

stage 1

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:

Main pages

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.

Before and after of the account info page

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

The before version of changing password in account info

After entering their password, users have no idea what field corresponds to which. And they can’t check their password.

The after version of changing password in account info

I added input labels to keep the users informed and an eye toggle to give the users a sense of control and assurance.

stage 2

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.

The account info page on the left and the four problems I tackled on the right

The four top priority problems in "Account Info" 🥲

In this case study, I’ll delve into one of the four problems I tackled, which I titled “Misleading Structure.”

Problem

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.

The current account info page information architecture

The current information architecture 🏗️

Research

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.

A list of 14 cards for the open card sorting exercise

All 14 cards we created 🃏

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

Graph analyzing the results from the first card sorting

All three categories and the associated cards 📊

But, we realized that under the category of “Account,” there were a total of 7 items, which is a lot.

A zoom in to the account category formed during the card sorting

Zooming into the category "Account"

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.

3D cluster view showing the two categories - personal and account

Results of the 2nd open card sorting 📖

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.

Zooming into the "Personal" category 👀

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.

Current to the proposed IA 💨

Final design

In addition, I made changes to the final UI accordingly.

A before and after version of the home page where the display name is moved to personal category

Moved "Display Name" to "Personal" ⚒️

A before and after version of the home page where a new "customization" section is added

Added new section "Customization" ⚒️

learnings

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!