Since 2022, Rockstar’s iFruit app stopped supporting GTA gen9. Millions of players wouldn't be able to customize their license plates—an essential feature of vehicle personalization. With over 118 million plates created by more than 109 million users every month, it became critical to migrate this beloved feature.
We were tasked to bring the license plate customization experience to the website. Our challenge was to build a new, engaging web experience that evolved alongside players’ expectations, all while working within the constraints of a 10-year-old game system
the discovery
At first glance, the flow seemed simple: enter plate number, pick style, select vehicle, and checkout. What else do we want to accomplish with this revamping? I had very limited understanding of the feature as a whole. I partnered with the analytics and community team to understand players’ experience with the existing license plate customization feature in iFruit app from all aspects. The goal was to uncover the core value players gained from the tool.
I mapped out the old flow in iFruit APP
"To this day I haven't been able to get my personalized license plate because the app just doesn't work right."
“ Honestly this app was so sh*t. It always crashed and when it didn’t, I had to sign into social club (crashed right after). If it actually worked, the custom plates wouldn’t even work.”
Suprisingly, despite it was a popular feature, the user flow in the old app was cranky. There’s missing guidance on license plate number requirements, next steps to claim the plate in game, and how to fix an issue when there’s a system error. We observed 34% users started the flow but ended up not checking out successfully.
the discovery
The app was 10 years old without big updates. Its visual failed to meet current players' expectations. This resulted in fewer new users engaging with the feature. Only 2.8% new users signed up in the APP every month.
Old UI of License Plate Editor in iFruit APP
Help Articles Created by Player Community
However, desipite the app’s usability issues, many players still went to great lengths to customize license plates, even creating guides like “How to make the iFruit app not crash.” What made players so dedicated to this feature? I want to dive deeper to the psychology behind this attachment. This will guide our design focus.
There was limited first-hand data collected for the feature. To answer the question, I asked support team and looked into support tickets we received for the feature, and also observed what people were talking about in the player community.
the approach
From the research, we know the major reason that users abandoned the flow was because there was no clear guidance when an error occurred. I collaborated with engineers to identify all potential error scenarios.
I created a framework to clarify complex edge cases beyond our ideal user flow. Previously, these less-than-perfect scenarios were ambiguous. This framework helped us to shift focus to ironing out constraints we face with a 10-year-old system. To pinpoint where users struggled, we looked at the experience through a few broad lenses.:
1. What are the less-than-ideal flows might users encounter?
2. What actions users need to take to recover from these situations?
3. What's the best user experience achievable given our current limitations?
Then, we unwrapped bigger question like “what workarounds users need to take” to specific ones like “what would happen if a user doesn’t own vehicles?” From there, we had a clear picture of all the non-happy paths users may encounter. The question became "How do we guide users back to success when something goes wrong -- like no data, network errors, failed actions etc.
Framework to Facilitate Discussion About error handling
I refined the framework with more details we uncovered and marked out screens that need error handling. I brought in our in-game UX writer to help with error state design. I created a doc with all the possible flows in context and collaborated with two UX writers to refine the flow. This helped us to shape feedback design that’s in the right tone with the game.
collaborating with UX writers on error design
From there, I reversed the polarity of the broken flow to identify the key design challenges. We clarified and narrowed it down to the following:
1. How might we better help users successfully place an order (conversion)?
2. How might we get players to be excited to use the tool frequently (stickness )?
3. How might we make it easy for ALL users to create LP (growth)?
The vision
Sorting out non-happy paths allowed us to do the heavy lifting and explore how to make the feature more playful. Our vision was to move beyond mere functionality and make the experience delightful. To identify what to focus for a delightful experience, I partnered with UX researcher, Bob, and our PM to uncover player’s emotional needs for LP.
It became clear that the car and the visual appeal of the plate were key drivers for players. We decided to focus on highlighting those elements. I shared the findings with the broader design team and partnered with two talented UI designers to shape the visual direction of the experience.
We quickly prototyped a flow, and presented to stakeholders. Everyone was happy with the direction, except for developers. To go with this design, it means we need to pull API of each player's car inventary. That's a lot data to render on the front end. Because we are dealing with a legacy system, there were limited APIs we can use for the feature. Plus, it presented us with more challenges to ensure site performance with heavy API calling.
To evaluate how much worth is with this idea, we proposed to do a user testing to see how effective it is to include vehicle in the design. The idea behind the first version of design is to allow users to customize the plates based on the appearance of the vehicles they own. Our hypothesis was users would be excited to play with it.
reframe
The goal of the redesign is to eliminate frictions and make LP creation flow easy and delightful for all users to use. Our initial hypothesis that a personalized experience with striking visuals would best resonate with players’ emotional needs was wrong. When testing the first version design, we consistently observed that:
Players weren’t thinking about specific cars when placing a plate. While adding car info made the interface more visually engaging, it worked against our goal of keeping the flow simple and focused. My over-accomendating, further compounded by stakeholder feedback was being reflected in my designs.
After third round of testing, we killed the idea of showing a player’s vehicles in favor of a more focused and simplified interface. Bring LP to be the focus.
detailed design
We were happy with the simplified user flows. I feared the new flow is feeling static, and not much of a improvement from what’s in iFruit. To test my guess, I showed it to 5 game testers.
“I will use it. But am I feeling excited about getting a license plate? Not really. It’s similar to place an order for grocery.”
We were certain including a car was important to set context and offer delightfulness for the feature. People seemed more excited and wanted to play with it when there's a car involved. How can we capture that delightfulness while maintaining the simplicity of the feature?
The goal wasn't to show how the plate looks on a specific vehicle, but to help users visualize it through an immersive experience. I suggested using a generic car instead. This allows users to imagine it as their own, while also adding an element of delight through the ability to zoom in, out and rotate. How do we pick a car that's generic enough but also cool? That was tricky.
We collaborated with game team to look into the cars that payers own, and options available. We picked Bravado Banshee. It is a well-known vehicle in the game and frequently used in garage and showrooms due to its sleek design and long-time presence in the franchise. At the same time, it's low-key enough to put the visual emphasis on the plate.
We used the toggle to manage the transition, with the default view set to license plate. The advantages of doing that:
- ensure the focus is on license plate
- reduce loading time as rendering a 3d model takes more resources
- gives players just enough details of the car to make the experience more immersive
the launch
In the next 3 months after my involvement on the project, the team continued to evolve and polish the final visual design, as well as finesse the finer functional details as the feature was being built. Although I was not part of this process, it was great to see most of my work brought to life.
On Apr 20, 2023 the new LP creator tool launched globally — an impressive achievement by the team, considering that it was a complete redesign and rebuild.
The impact
The redesign of the License plate creator feature on the website has had a positive impact. At the 3 month mark, we saw the conversion. Internally, we gained confidence in treating website as extended game experience. we started convo about forming innovation team that focused on ideation of features for the web. With our design manager, I began to hire designers for the team. To this day, the team has grown from 3 designers to 7. More to that later.