JK Lovelock

The Project

Role

Senior Product Designer

Year

2022 - 2025

Software Used

Figma, Adobe Suite, Webflow, Miro.

Live Project

Link

This project tackled a core scalability problem: our live-ops pipeline couldn’t keep up with the game. Every new expansion required designers and marketers to funnel content through developers, creating bottlenecks in a space where speed and iteration were critical.

‍

My role was to help design a system that removed developers from day-to-day content updates while still maintaining quality, consistency, and technical reliability. Designers and marketers needed the freedom to publish and iterate independently, without sacrificing structure or performance.

‍

At the same time, the product needed to surface expansion information to players as early and as clearly as possible: featured cards, special editions, pack availability, and narrative lore, all delivered in a way that could evolve right up to launch.

‍

Working closely with an engineer, I led research and design efforts to identify a solution that balanced flexibility, speed, and long-term maintainability, benefiting both the internal team and the player experience. The result was a system that empowered non-developers to ship faster, reduced operational friction, and supported a more agile expansion launch strategy.

The Challenge

Eliminating developer bottlenecks while preserving design quality, brand consistency, and technical integrity
Designing for multiple internal user types (design, marketing, engineering), each with different goals, skills, and constraints
Move from static, one-off designs to reusable, scalable components and patterns.
Supporting live-ops, where content changes frequently, often under tight deadlines leading up to expansion launches.
Structuring content for flexibility (cards, editions, packs, lore) while ensuring it remained readable and engaging for players.
Maintaining a strong player experience despite content being authored by multiple internal teams.
Ensuring long-term maintainability so the solution wouldn’t collapse under future expansions or feature growth.

The Objective

Evaluate and select a CMS that balances creative autonomy for marketing and design with the necessary technical constraints to ensure performance, reliability, and long-term maintainability.
Lead the redesign and rebuild of the website on the chosen CMS, transitioning from static pages to a scalable, system-driven platform optimized for live content updates.
Design and produce a modular asset and component library, ensuring new visual elements aligned with brand standards while supporting rapid iteration and reuse.
Maintain and evolve the Atomic Design system, keeping design and development aligned through consistent patterns, tokens, and documentation.
Collaborate closely with marketing and narrative teams to explore and validate effective ways of delivering expansion content and story, balancing engagement, clarity, and production efficiency.
Author clear documentation and reusable templates in Figma, enabling marketing teams to confidently create and manage content without ongoing design support.
Validate the solution through staged user testing, gathering feedback from both internal stakeholders and players, and iterating based on real usage and edge cases.
Lead the launch of the new site, including onboarding and workshops for marketing and design teams to drive adoption, consistency, and long-term success.

The Process

After reviewing a range of scalable website solutions, we met with the Webflow team to validate that the platform could support both engineering requirements and the level of autonomy marketing needed. Once we were confident it could meet those needs, we were given access to a test environment to stress-test key functionality—connecting APIs for cards, remaining pack counts, and future live events.

‍

From there, I ran a workshop to define the core sections and components the site would need. The goal was to shift the day-to-day workload away from engineering, relying primarily on design-led systems and only involving a developer when new APIs needed to be integrated into existing code.

‍

Following the workshop, I created wireframes for the core expansion pages, including a hero section with navigation to the latest updates, a live pack availability section with a buyer’s guide that could be toggled once packs sold out, a weekly-updated story section for rolling out lore, and a showcase for featured rare cards available in the expansion.

‍

After aligning on the layout with the project manager, marketing, and the writer, I built the designs directly in Webflow and worked closely with the developer to ensure all data connections were functioning as expected.

‍

For internal support, I documented the CMS setup and ran workshops with design and marketing teams, walking through how content could be added, updated, or toggled independently, as well as how the supporting Figma templates were structured.

‍

The final step was validating the site through internal testing and feedback, resolving edge cases, and preparing the platform for launch—supporting the rollout of the newest expansion to players with a system designed to scale beyond a single release.

The Results

The response from both internal stakeholders and players exceeded expectations. From an internal perspective, the system significantly reduced the day-to-day load on engineering, allowing developers to focus on higher-impact work rather than routine content updates. From a player perspective, the expansion site became more than a storefront, it became a place to return to.

‍

The way the story was delivered resonated strongly with the community. By structuring it as an evolving experience and tying it into an ARG, we were able to gradually release information, encourage speculation, and drive repeat engagement. Previously, expansion pages were largely transactional, used to showcase new cards and sell packs. With the new system, the site supported ongoing storytelling, community interaction, and reasons for players to revisit long after launch.

‍

This shift also had a meaningful impact on player attachment. As new characters were introduced through the story, players became more invested in them, which naturally carried through to interest in owning their cards in-game.

‍

Internally, the work was well received by the Game Director and Game Producer, who called out the improvement in product quality, the increased autonomy it gave marketing, and the time it freed up for engineering. The platform also unlocked new opportunities for community-driven experiences. Players were able to participate in story decisions as a collective, voting on which characters lived or died through an ARG that spanned Discord and the website, bringing the community together in a way we hadn’t seen before.

‍

This approach continued to evolve beyond the initial launch. The same platform was later used to support a faction war event, where players chose sides and tracked real-time progress on the site through a lightweight API update. Marketing was also able to repurpose the system to manage launcher news tiles through reusable templates, updating content as needed without additional development support.

‍

Because of the success of this launch, the platform and design approach were adopted as an ongoing solution and are still in use today on Gods Unchained. I was also asked to apply the same system and design principles to Guild of Guardians and Shardbound, extending the impact of this work across multiple products.

‍

More images of the project are in the Gallery below.