Rockstar website experience
Rockstar website experience
Among the time I work at Rockstar Games, I helped shape the entire website experience from designing the content architecture to building new design system together with my team. In this post, I wanted to give an overview of how these projects unfolded. Feel free to reach out if you 'd like to learn more deeply about any of the projects.
Among the time I work at Rockstar Games, I helped shape the entire website experience from designing the content architecture to building new design system together with my team. In this post, I wanted to give an overview of how these projects unfolded. Feel free to reach out if you 'd like to learn more deeply about any of the projects.
News hub
Every week, Rockstar marketing team posts 2-3 times. That totals approximately 100-140 articles, and 700-1400 high-resolution assets. On the users end, chanllenge is to decide the amount of info unrevealed to different user groups. Inside, we lack a system to optimize resource to handle the frequent updates invovling cross-functional teams.
News hub
Every week, Rockstar marketing team posts 2-3 times. That totals approximately 100-140 articles, and 700-1400 high-resolution assets. On the users end, chanllenge is to decide the amount of info unrevealed to different user groups. Inside, we lack a system to optimize resource to handle the frequent updates invovling cross-functional teams.
caption
I created a customized content management system that streamlines process for publishing. Rockstar has specfic visual requirements to optimize visual storytelling. I wanted to make sure the new system offers the right amount of template vs flexibility that meets our unique context.
I created a customized content management system that streamlines process for publishing. Rockstar has specfic visual requirements to optimize visual storytelling. I wanted to make sure the new system offers the right amount of template vs flexibility that meets our unique context.
The content management system (CMS) that empowers the frontface.
The content management system (CMS) that empowers the frontface.
This cut the time needed to populate weekly news to half. Stakeholders from broader team saw the benefit of this approach. I pushed to scale the content building process to the entire web ecosystem.
This cut the time needed to populate weekly news to half. Stakeholders from broader team saw the benefit of this approach. I pushed to scale the content building process to the entire web ecosystem.
Modular Content System
Every week, Rockstar marketing team posts 2-3 times. That totals approximately 100-140 articles, and 700-1400 high-resolution assets. After a detailed audit of existing content published, I sythesized the generic pattern. That gives us the bone of CMS structure, customized to Rockstar's unique context.
Modular Content System
Every week, Rockstar marketing team posts 2-3 times. That totals approximately 100-140 articles, and 700-1400 high-resolution assets. After a detailed audit of existing content published, I sythesized the generic pattern. That gives us the bone of CMS structure, customized to Rockstar's unique context.
CMS architecture
CMS architecture
The next step is to translate frontend UI to CMS's data modle. This lays the foundation to exact resuable grid system, site template and components for long-term use. Within design team, this approach cultivated the habbit to get to the root of fundenmental building blocks for every design projects.
The next step is to translate frontend UI to CMS's data modle. This lays the foundation to exact resuable grid system, site template and components for long-term use. Within design team, this approach cultivated the habbit to get to the root of fundenmental building blocks for every design projects.
THE EXTERIOR
An architectural statement, crowned with presence.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunti labore et dolore magna aliqua.
Driveway
Driveway
Driveway
Yoga Studio
Driveway
Open Bar
Rooftop Helipad
Hot Tub
GridWrapper
TextBlock
TextBlock
TextBlock
ImageBlock
ImageBlock
ImageBlock
ImageBlock
ImageBlock
ImageBlock
ImageBlock
ImageBlock
Grid
Grid
12col/
6col/5col
Wrap
3col
Wrap
Breaking down design to its fundational building blocks
Design with data
As a content focused game company, it's not in Rockstar's gene to make decisions based on data. Data doesn't tell us the why, but def a good source to picture what's happening. At the time, I partnered very closely with data team, and tried to understand website's role in players' purchasing and playing journey. One example is a web offer feature. It has been run for over 6 times. We captured different signals to inform gift giving strategy for GTA 6.
Design with data
As a content focused game company, it's not in Rockstar's gene to make decisions based on data. Data doesn't tell us the why, but def a good source to picture what's happening. At the time, I partnered very closely with data team, and tried to understand website's role in players' purchasing and playing journey. One example is a web offer feature. It has been run for over 6 times. We captured different signals to inform gift giving strategy for GTA 6.
Mapping out coversion and drop off points through out user journey
Mapping out coversion and drop off points through out user journey
We had a lot of ambiguities when strategizing GTA+ membership. Why users sign up for one-month then unsubscribe? I visualized data with the membership offering. This helps us uncover the real problem with the membership.
We had a lot of ambiguities when strategizing GTA+ membership. Why users sign up for one-month then unsubscribe? I visualized data with the membership offering. This helps us uncover the real problem with the membership.
Mapping out coversion and drop off points through out user journey
Mapping out coversion and drop off points through out user journey
We redesigned the layout to efficiently offer users a clear message, and rebrand the membership based on findings. Only 13% users churn after first month, compared to before an average of 43%
We redesigned the layout to efficiently offer users a clear message, and rebrand the membership based on findings. Only 13% users churn after first month, compared to before an average of 43%
Production quality
What's unique about Rockstar website is its visual storytelling, which is a results of collaborating with production and art teams for the web assets. The complexity lies in how to build up a pipeline that smooth communication and ensures final production quality. Initially, we did most at the desk quick chat, but that fails to scale when the project and teams get larger. I created production guideline which is used as the tempalte for all asset request doc for nowaday projects.
Production quality
What's unique about Rockstar website is its visual storytelling, which is a results of collaborating with production and art teams for the web assets. The complexity lies in how to build up a pipeline that smooth communication and ensures final production quality. Initially, we did most at the desk quick chat, but that fails to scale when the project and teams get larger. I created production guideline which is used as the tempalte for all asset request doc for nowaday projects.
Hero template showcasing look and feel across breakpoints
Hero template showcasing look and feel across breakpoints
With also a photoshop file, production team can drop assets and play with it in the tool they are familar with, to bridge the communication gap. This saves us production time from 2 weeks for a hero asset to a couple of days.
With also a photoshop file, production team can drop assets and play with it in the tool they are familar with, to bridge the communication gap. This saves us production time from 2 weeks for a hero asset to a couple of days.
Scaling the workflow
As our design team grows bigger, it became important to scale the workflow. I looked back on the mistakes I made and things I did right, and created a communication (spec) template to make sure our work is consistent and efficient.
Scaling the workflow
As our design team grows bigger, it became important to scale the workflow. I looked back on the mistakes I made and things I did right, and created a communication (spec) template to make sure our work is consistent and efficient.
A clean file structure that speaks to eng, pm and other stakeholders.
A clean file structure that speaks to eng, pm and other stakeholders.
With dev team's feedback, I was able to create a spec template that's used for all projects nowadays. This speeds up the implementation phase and reduced significantly the back-and-forth convo about design details.
With dev team's feedback, I was able to create a spec template that's used for all projects nowadays. This speeds up the implementation phase and reduced significantly the back-and-forth convo about design details.
Design specs template that uniforms how to communicate design within the team.
Design specs template that uniforms how to communicate design within the team.
Acknowledgments Thanks to everyone who gave feedback for the above projects. Many of them touches various systems, so it involves a lot of knowledge share. Special thanks to Bobby Marcus, Kyle Lamble (killer dev) for pushing the limit of CSS, KJ for generously sharing deep knowledge about data, and Jack Koloskus for teaching me many things about data modal.
Acknowledgments Thanks to everyone who gave feedback for the above projects. Many of them touches various systems, so it involves a lot of knowledge share. Special thanks to Bobby Marcus, Kyle Lamble (killer dev) for pushing the limit of CSS, KJ for generously sharing deep knowledge about data, and Jack Koloskus for teaching me many things about data modal.