ROBLOX / JAZWARES:
APP INSPIRED WEBSITE
OVERVIEW
In 2019, I was approached by Roblox to redesign their external website in partnership with Jazwares. Jazwares manufactures and distributes toys and collectibles for Roblox and other major companies across the world.
At the time, the site was not optimized for mobile, the branding was out of date, and the toy catalog needed revision and clarity. Search, categorization, and virtual code redemption (one of the big selling points for physical Roblox goods) were confusing to navigate. Additionally, to be more in line with Roblox’s metaverse, it was requested by Roblox to update the Jazwares site to look and feel more like an app extension of the Roblox platform.
Timeline
March-August 2019
Additional ongoing consultation and revisions
Contribution
Design lead
UX/UI
Concept Design
Interaction Design
Prototyping
Challenges
Team coordination (Internal + External)
Limited engineering resources
Team
Multi Team/Company Project
Roblox Business Development
Roblox Marketing
Roblox Product Design
Jazwares Marketing
Jazwares web engineering
IDENTIFYING PROBLEMS
To kickstart the project, I created an information architecture (IA) map of the old site and explored its features and functionality to seek out pain points. This process highlighted two major issues:
-
Redundant page content and navigation: Pages would often repeat content unnecessarily and separate pages were made that only displayed content already shown on the Home page.
-
Unclear motivations: The site was expected to serve as a hub for those interested in Roblox's brand and toys but had several distracting sections that were unrelated.
I removed these distracting elements and planned targeted content based on the goals of each page. The updated IA went from having eight unfocused pages down to a meaningful four. After conducting some gorilla user testing with prototypes, navigation times dropped dramatically and there was noticeably less confusion compared to the original.
RECONSTRUCTION
We took a mobile-first design approach because the site’s analytics indicated that the majority of visits were from mobile devices. By reducing the site’s scope, we created a foundation that encouraged exploration and delivered more immediate gratification. To further this, the hamburger menu was replaced with exposed navigation in favor of faster one-step browsing.
This was a difficult challenge as one of the stakeholder requirements was to always have the redemption code button available while browsing. Finding the space for this on a mobile screen took several iterations.
Before work for the redesign began, I spent a week playing on Roblox to gain a better understanding of the product. The playful experiences and communal rating systems of the platform led me to build a carousel system reflective of that environment. It was designed with touch input in mind.
The stats card and other elements ended up not making it into the final product due to being outside the MVP project scope and technical difficulties. The floating window designs did end up remaining and set up opportunities for the Toys page to pay homage to Roblox's ecosystem.
CATALOG SEARCH
Similar to the shop catalog in the Roblox app, the Jazware’s toys page is displayed in a grid. This was something I wanted to lean on to make the Jazwares site feel like an extension of the Roblox product.
Every purchased toy comes with a bonus virtual item (VI) code that is redeemable on the website. On the original Jazwares site, the relationship between the toys and VIs felt disconnected. To combat this confusion for collectors, I tied the two together with a using previously developed window system.
The virtual items are exclusive to purchased toys and only redeemable by code. After redemption, the item is placed in the user’s Roblox inventory and they can be worn and shown off by the user’s avatar. This is a huge source of pride and gives a sense of exclusivity and uniqueness to users’ avatars as well as scratching the itch for those who are big virtual item collectors. Virtual items were not strongly represented in the previous version of the site, with the redesign, I wanted to ensure that we gave more value and visibility to these exclusive items that are so sought after and play a big role during toy purchase.
To give virtual items more presence, a segmented control toggle was implemented at the top of the page to allow users to more easily browse by toys or by their virtual items. This also made the offerings much clearer.
The filtering system was moved into a browsing bar and utilized menus rather than links to further streamline the site closer to an app-like experience.
REFLECTION & IMPACT
A few of the teams involved had limited experience with UX designers prior to this project. The engineering team also had time limitations to how they could implement the design. I was often the sole design voice during the development stages, so design advocacy and education became a large part of the project. Through this process, I learned a lot about scope management and facilitation. With each new project, I find these tools more and more valuable.
If I could revisit this project, there are a few items I would expand upon. One, in particular, is refining the system rules on scaling, typography, and UI. Due to limited time and resources, and with the shifting gears of the teams involved (myself, Roblox, Jazwares), a lot of the long-term goals for the site were deprioritized. After the initial 2-month design sprint, I would go on to support the site update efforts until the MVP launch nearly a year later. Though there were still refinements I would’ve liked to make, it was exciting to see the project that involved so many groups and partnerships go live and forward to the Roblox community.