Grand Theft Auto License Plate Web App
Grand Theft Auto License Plate Web App
A dying feature
A beloved (by 109 million users!) but broken app (iFruit) was dying. No maintainance is planned internally to upgrade it to serve next gen games. We have to sunset it. Despite how awful the app was, somehow we saw the license plate editor still got millions of use every month. We wanted to take it as an opportunity to experiement the idea of building around-game experience using modern web.
A dying feature
A beloved (by 109 million users!) but broken app (iFruit) was dying. No maintainance is planned internally to upgrade it to serve next gen games. We have to sunset it. Despite how awful the app was, somehow we saw the license plate editor still got millions of use every month. We wanted to take it as an opportunity to experiement the idea of building around-game experience using modern web.
This is about how we made something complex feel welcoming. It's about what makes the web tool feel GTA.
This is about how we made something complex feel welcoming. It's about what makes the web tool feel GTA.
Simplicity: Stripping Back to the Essentials
Many complex products often present all features at once, including iFruit. The first step is to remove the unncessaries and clean out the core flow. The real challenge here is to get buy in.
Simplicity: Stripping Back to the Essentials
Many complex products often present all features at once, including iFruit. The first step is to remove the unncessaries and clean out the core flow. The real challenge here is to get buy in.
iFruit has hundreds of potential paths, requiring intentional design to achieve simplicity.
iFruit has hundreds of potential paths, requiring intentional design to achieve simplicity.
We made a quick prototype to make the flow feel tangible.
We made a quick prototype to make the flow feel tangible.
iFruit has hundreds of potential paths, requiring intentional design to achieve simplicity.
iFruit has hundreds of potential paths, requiring intentional design to achieve simplicity.
From user testing, even it exictes players, but the car and swift transition between car screen and the plate, confuses users about the key task. We need to get the core navigation more focused. We ditched the car idea altogether, and get the license plate to be the focus.
From user testing, even it exictes players, but the car and swift transition between car screen and the plate, confuses users about the key task. We need to get the core navigation more focused. We ditched the car idea altogether, and get the license plate to be the focus.
Fludity
After sorting out the core flow, the question became how do we make the flow feel like effortless?
Fludity
After sorting out the core flow, the question became how do we make the flow feel like effortless?
Fluid transition
Fluid transition
Things get trickier on small screens. We wanted to create something that showcase the key action, but still offer opportunity for users to explore
Things get trickier on small screens. We wanted to create something that showcase the key action, but still offer opportunity for users to explore
left: initial state Middle: action focused state. Right: plate review state
With the core flow, we made quick prototype and tested with 7 users.
With the core flow, we made quick prototype and tested with 7 users.
caption
caption
Suprisingly, even though the core flow is easy to follow and finish, users state they don't feel excited customizing the plate. It feels more like a core, rather than something they look forward to. Car is such key element of the game. To make the flow conhesive from the game world to a web platform, car seems a resonable object to echo in the experience, but how?
Suprisingly, even though the core flow is easy to follow and finish, users state they don't feel excited customizing the plate. It feels more like a core, rather than something they look forward to. Car is such key element of the game. To make the flow conhesive from the game world to a web platform, car seems a resonable object to echo in the experience, but how?
Delight
Our initial idea of rendering users' cars are great, but not realistic. We thought abou using a generic car. But which one? We started to brainstorm with broader teams. Looped in game team and motion team to see what's realistic. We landed on Banshee. A car players are familar with, and low-key to give spotlight to license plate.
Delight
Our initial idea of rendering users' cars are great, but not realistic. We thought abou using a generic car. But which one? We started to brainstorm with broader teams. Looped in game team and motion team to see what's realistic. We landed on Banshee. A car players are familar with, and low-key to give spotlight to license plate.
Brainstorming on the minimal representation of car. Clay, wireframe and darkness.
Brainstorming on the minimal representation of car. Clay, wireframe and darkness.
We pitched a few ideas with 3d motion team to see what fits the branding of the game. After several discussions, we landed on Bravado Banshee, the most iconic vehicles in the GTA series.
We pitched a few ideas with 3d motion team to see what fits the branding of the game. After several discussions, we landed on Bravado Banshee, the most iconic vehicles in the GTA series.
Desktop
Desktop
Mobile devices
Mobile devices
Now we got the car part sorted out. The question became how can we still ensure license plate is the focus, while providing this immersive experience. We tested out the same pattern to shift between car and palte view. The challenge with that, as we offer option to rotate the car. It means users and switch the other state at any angle. Me and the other UX engineer experimented with different transitions to make the transition smooth at any angle.
Now we got the car part sorted out. The question became how can we still ensure license plate is the focus, while providing this immersive experience. We tested out the same pattern to shift between car and palte view. The challenge with that, as we offer option to rotate the car. It means users and switch the other state at any angle. Me and the other UX engineer experimented with different transitions to make the transition smooth at any angle.
caption
caption
We got four pieces information to present in a very small area. We wanted to make sure the actions are clear, but not cluttered. We explored different toggle pattern to fit all the actions.
We got four pieces information to present in a very small area. We wanted to make sure the actions are clear, but not cluttered. We explored different toggle pattern to fit all the actions.
Toggle exploration for 2D and 3D
Toggle exploration for 2D and 3D
2D 3D toggle for device compatibility
2D 3D toggle for device compatibility
The Launch
After initial launch, we saw a 34% conversion rate for the first month. This means the flow gets much pleasant to finish. On top of that, we also saw a increase in the returning rate, showing the feature attracts players to come back and place order frequently. This is gives us signal to continue putting work into create new styles to create a personal bond between players and the game. This is tne most radical change since 2013.
The Launch
After initial launch, we saw a 34% conversion rate for the first month. This means the flow gets much pleasant to finish. On top of that, we also saw a increase in the returning rate, showing the feature attracts players to come back and place order frequently. This is gives us signal to continue putting work into create new styles to create a personal bond between players and the game. This is tne most radical change since 2013.
A spike and steady increase during the first 6 month of launch
A spike and steady increase during the first 6 month of launch
Reflections
This is the first project at Rockstar Games where we tried to establish core design priciples. Similicity, fluidity and delight have been the principles we follow for all design projects after this one. It's a consistent battle. It means making conscious trade-offs while building Rockstar around-game experience. We prioritiesed creating a world-class experience with the acknowledge that it could slow down our pace to launch. Luckily, we showed through this proejct that this approach is essential to craft exactly what helps us stand out among competition. While simplicity, fluidity, and delight guided our creative process, we also committed to fundamental principles from the beginning. Utitlity, performance, accessibility, security, and so on. Despite the time and resources required, creating experiences that deeply resonate with users is profoundly gratifying. Our lives are full of digital interactions and infusing these moments with some degree of magic feels essential, at least to me.
Reflections
This is the first project at Rockstar Games where we tried to establish core design priciples. Similicity, fluidity and delight have been the principles we follow for all design projects after this one. It's a consistent battle. It means making conscious trade-offs while building Rockstar around-game experience. We prioritiesed creating a world-class experience with the acknowledge that it could slow down our pace to launch. Luckily, we showed through this proejct that this approach is essential to craft exactly what helps us stand out among competition. While simplicity, fluidity, and delight guided our creative process, we also committed to fundamental principles from the beginning. Utitlity, performance, accessibility, security, and so on. Despite the time and resources required, creating experiences that deeply resonate with users is profoundly gratifying. Our lives are full of digital interactions and infusing these moments with some degree of magic feels essential, at least to me.
Thoughtfully crafted software showcase a deep respect for the users. My ambition is to offer results that go above and beyond what someone might expect. That's what I am here for.
Thoughtfully crafted software showcase a deep respect for the users. My ambition is to offer results that go above and beyond what someone might expect. That's what I am here for.
Acknowledgments License Plate Web Tool is the result of many individual contributors. The 3D rendering in this post specifically are the exceptional work of Ben Wiley and Rockstar Games 3D motion team. Special thanks to Dan Maffin for insisting a high design standard for the final product. Thanks for Diancheng Hu, Zihui Zhao, and Matthew Alessandri for reading the first draft of it.
Acknowledgments License Plate Web Tool is the result of many individual contributors. The 3D rendering in this post specifically are the exceptional work of Ben Wiley and Rockstar Games 3D motion team. Special thanks to Dan Maffin for insisting a high design standard for the final product. Thanks for Diancheng Hu, Zihui Zhao, and Matthew Alessandri for reading the first draft of it.
Ben Wiley
Lead Software Engineer
Bobby Marcus
Lead UX Engineer
Ivy Cheng
Senior UI Designer
Dan Maffin
Senior Product Manager