This is a UX/UI portfolio piece. With no dedicated designer on the publishing platform team, in addition to my normal product manager duties, I stepped to do the design work for this feature.
This is my story about the design process: the iterations, the collaboration, and what I took away from it as a designer. The broader product story is its own write-up for another day!

A publicly accessible leaderboard on the Wildgate website showing the top 100 players based on their Infamy Score with a personal profile card for logged-in players. Infamy is an opt-in competitive stat tracking feature available in the Artifact Brawl game mode. The project was simple in scope, but it needed to feel like the game, work across mobile and desktop, and designed fast enough to keep pace with an ambitious release date and an engineering team actively prototyping in parallel.

Design constraints:

The concept was clear enough that I kept wireframes light. They were enough to illustrate the idea, support the pitch for resourcing, and give engineering a concrete starting point. I initially started wireframing in Figma, but then switched to Miro because was faster for me to ideate quickly on functionality. This helped me answer questions from the engineers as they worked on a functioning prototype in parallel. One engineer suggested adding a countdown timer showing when the leaderboard resets each month. We absolutely included it, because it was a great idea that added a layer of urgency and aspiration. This kind of cross-disciplinary thinking, where engineering is actively contributing to the player experience and not just implementing specs, is exactly the environment I try to create as a product lead.

I started simple. The curved corner pattern from the existing web branding, the established colour palette so it would feel consistent moving between the main website and leaderboards, and the two core states: a public view and a logged-in view that surfaces the player stat card. I designed mobile and desktop simultaneously since we knew a lot of people were using the existing website on mobile devices. I also had ideas in mind for a future where it could be an “app” players use on their phones to monitor stats on the go or whilst in game.

I worked in Figma throughout the design process. As my designs grew more complex I leaned more into building reusable components to keep things consistent and speed up ideation and iteration. It really helped to keep things organized as well.

The first design was functional, but it felt flat. Not exciting enough for a feature that’s meant to make competitive players feel something, especially the ones who put in the effort and hours needed to make it to the top.

I wanted the top three to feel more aspirational. Something worth chasing. I explored a podium treatment, then reached out to the game’s art direction team for a feedback round. One of the UI/Visual Artist jumped in to help bring more of the game’s visual language in. They steered away from the podium but loved the idea of a distinct treatment for the top three and ran with some great iterations.
I was upfront about being a product manager doing design work. I acknowledged where my eye needed developing, welcomed the collaboration, and learned a lot in the process. We collectively landed on a direction that felt alive in a way the first pass didn’t.

I also wanted to make sure I was striking the right balance between game feel and marketing brand, so I looked for more feedback. A visual artist from the marketing team did a pass to bring the design closer to the brand style guide. I asked him to walk me through his suggestions so I could learn the why behind them and carry the thinking forward myself. Things like tightening colour usage to better match the brand palette, and improving visual hierarchy to guide the eye more naturally down the page. Between us we landed on a clean, polished version that became the shipped product.

Here’s what the final design looked like:

When new game updates brought the opportunity to add leaderboards for additional modes and a landing page, I applied everything from the first round. The designs came in much closer to brand from the start. The feedback round with marketing’s visual artist was noticeably lighter. A small but meaningful signal that my UI eye was improving.

I also used the opportunity to clean up the player stat profile card, tightening the layout and improving readability based on feedback I’d observed from Discord chatter amongst players.

This project pushed me outside my comfort zone in the best way. Owning design as a PM, with no designer to hand off to, forced me to be more intentional about visual decisions and UI functionality. Leaning on game art and marketing experts for feedback made the work better and taught me more than I expected. I came out of it with a sharper eye and a genuine appetite for more.

One thing I would do differently is define a simple style guide early on. There was one inherently in the designs, but having it as a standalone reference would have really helped the team. The engineer doing the bulk of the front-end work did an amazing job matching up to my Figma designs, but ideally he would have had a defined reference guide to work from, including breakpoints for different device sizes. Honestly, this came down to time constraints and doing this design work alongside other projects. As a team we needed to move fast, and what we had design-wise was good enough for the engineers to implement and ship. Which is ultimately what mattered.