../radiant

Feature designs

Radiant

Feature designs at Radiant

At Radiant, our approach to design is never one-dimensional. Every decision is layered—carefully weighing visual direction, narrative intention, user experience, and system functionality. It's not just about making things look good; it's about building a cohesive experience that supports the product's role as a companion layer to our IP. Since Radiant is more than just a utility—it's a gateway into the world we're building—designing for it often demands a more complex mindset. We have to think like storytellers, system architects, and UX designers all at once.

HOMEPAGE

First user's impression of our app

Homepage is one of the most important components in shaping Radiant's first impression as a product. It's the user's entry point—not just into the app, but into the world we're building. That made designing it particularly challenging, because so many elements were moving in parallel. While we were actively pushing forward the core features we wanted to introduce on the Homepage—discussing the main mechanics and functions it needed to serve—we didn't yet have a clear vision for what it should represent from a narrative and visual standpoint in the context of Radiant's world-building.

Old prototype of Radiant homepage
Old prototype of Radiant homepage

Once the functionality started to take shape, we realized that the Homepage was trying to do far too much. During our mid-resolution prototyping phase, it became clear that we were including all the features and information a webapp companion would need—but we had no idea where to focus. Everything was competing for attention. Some elements looked prominent but didn't serve a clear purpose, like the background image created by the art team, which visually dominated the layout without supporting any specific user need.

This led us into a round of deep iteration. We revisited our assumptions and narrowed down the core goals of the page. Instead of trying to serve every possible function, we focused on what the Homepage should primarily deliver as part of the Radiant product. We realized we couldn't just rely on typical webapp UX patterns—doing so would undercut our intention of placing emphasis on our IP and narrative layer. That shift fundamentally changed how we approached UX across the entire app.

One of the best examples of this mindset shift was our decision to remove the persistent main navigation. While keeping a sticky nav would've made page-to-page access easier, it also made Radiant feel like just another tool. By making the Homepage the central hub for navigation, we encouraged users to return to it often, especially when there were quest objectives or alert prompts. This not only made the experience feel more dynamic, but also reinforced the idea that the Homepage is an evolving space within the Radiant world—one that users are meant to revisit regularly as part of their journey.

Radiant's latest homepage design
Radiant's latest homepage design

ONBOARDING

Introduction to our lore

At first, I assumed the onboarding feature would be relatively straightforward to develop. However, I quickly realized it involved numerous dependencies across teams—including narrative input from the vision holder, artwork and storyboarding from the art team, user journey mapping, and SFX design. Aligning all these components proved to be quite challenging, especially when it came to solidifying each part during the design process. This experience pushed me to collaborate closely with stakeholders, cross-functional teams, and even external partners to ensure a cohesive and effective outcome.

The most challenging and fun part about this is how this part pretty much revolving around the storytelling of Radiant. While working on this specific parts, things get changed many times as it is not merely on user flow, but more onto the narrative directions. It was fun to work on as you gradually shaping the story with the product, and we telling it in ways that blend the UX well during the onboarding process. Later on we realize that we cannot be exploring way too much on all aspects, as we do not have much time for this feature alone, so we need to narrow down options and pick it and move on.

Final design output on some of the onboarding scenes.
Final design output on some of the onboarding scenes.

One of the highlight of this feature design is the audio designs part that we also pushed for internal through the help of our team, and also outsourced the professional sound design agency to help out with all the cool SFX we need through not just only onboarding alone but also SFX for UI interaction. I was leading the expectation on the audio outcome and review process during the post production phase.

Hover cursor on network

Complete feedback toast

Azul (Happy) sound

Entering network view page

(The audios here are made by our outsource studio.)

NETWORK

The very core concept of Radiant

Network view page is the core page of user progression and the gateway that conveys our strong IP and existence. Initially we started with depicting the high level concepts from our director to imagine Radiant as something that gets direct impact from players on how it progress. The narrative driven approach says that Radiant is the creation that enable anyone to traverse to other verses, and players that enter Radiant has direct impact on how it progress and expands the connections between worlds.

This has been the most satisfying part when we finally able to bridge the narrative concept with core game mechanics and what our product stands for. I was leading on crafting the functional prototype that depicts the flow of UX and how it drive user to be immerse to our world.

Old prototype of Radiant network page
Old prototype of Radiant network page

CHALLENGE

Usability vs immersive UX

We all aware the risk in this approach where we stepping out from best UX practice of our webapp to bring more focus on providing immersive experience to our lore could make user's day to day jobs in our platform become more work. Who would want to look at cool entry animation to the page just to find quests to do every time you finish a game match or entering the app - that would be very annoying. So we need to balance out what we want to give to users as in not forcing them to it, but by providing channel for them to access it. This also led to the same lesson where we really need to define proper goal of what we want our feature to serve for users.

SOLUTION

Redefine the page goal

From navigating the core journey through network page, we decided to treat network page as an option for user to see their overall progression of verse connectivity (Connection points they have acquire through playing game quests). By going with this approach we able to maintain good performance since network view that was supposed to contain quest functionality was too heavy for the browser to handle. We also keep the core experience simple to navigate and use for the users.

Latest Radiant's network page design

Player progression

To create a seamless and engaging platform, we figured that Radiant should offers features beyond simple rewards, including social experiences, item shops, and player progression mechanics. The platform is designed to function as both a game and a service tool, striking a balance between entertainment and utility. These mechanics align incentives with enjoyment, ensuring that rewards feel like an organic part of the gameplay rather than an external objective. There are many more elements on player progression that I am not putting here since I do not wish to overload too much stuffs in my case studies, but the summary of it is that learning about game design work, and other game products or even playing games as part of the research really help tremendously on understanding how we should proceed with our designs.

UX/UI on network tier page (user progression)
UX/UI on network tier page (user progression)

OVERLAY

Real quest gameplay

One of our core feature that does take place in the actual gameplay and where the quest progression gets updated is overlay feature. During the development of the feature, I was leading the high level of product design for the feature. Overlay is such a delicate feature where we should not over design it but at the same time it needs to have just enough of what users need to get through with the core journey which is to complete their selected quests on our platform.

(Objective update during Dota 2 gameplay.)
Radiant Overlay UI states during in-game.
Radiant Overlay UI states during in-game.

CHALLENGE

For Radiant's in-game overlay, the challenge was to provide users with real-time quest progress updates without disrupting their gameplay. To address this, we designed a flexible, user-driven system that allowed players to tailor their experience. The overlay could be adjusted to show minimal, persistent, or subtle notifications based on individual preferences. By giving players control over how they received feedback, we ensured the interface supported their gaming experience rather than interrupting it. This approach created a seamless blend of functionality and immersion, enhancing player engagement while maintaining a smooth, uninterrupted flow during gameplay.

Moreover, we are not design overlay experience for only one game, which means that we need to take consideration of how other game interfaces are like and behave in order to be able to design particular cases that work for those games.

Radiant Game Quest page [Dota2].
Radiant Game Quest page [Dota2].

Quest page - user's core hub on the platform

Radiant's quest page serves as the central hub for players to discover and take on various gaming challenges. Users can browse a curated selection of quests, each tied to different games, and participate by seamlessly integrating Radiant's overlay into their gameplay. As players complete these quests, they earn rewards, progress through milestones, and unlock new opportunities within the platform. This system not only enhances engagement but also creates a fluid connection between different gaming experiences, encouraging exploration and sustained participation within the ecosystem.

CHALLENGE

The main challenge of designing quest flow experience for Radiant is that, we already know what the best experience of quest gameplay is like in most games. However, with the limitation to constantly updating progress of all possible objective users can complete during the game. It is impossible for us to have all the missions being track passively without having users to pick only missions they desire to play. This really adds more jobs to be done from user's side and it go against the typical quest gliding game. At first we are trying to see if we can really track them all passively, but as the performance on web application which rely heavily on server, it is the constraint for us on the development side.

SOLUTION

With this limitation, we created a flow for users to keep and track missions that they want and also gamify it in way that will motivate users to complete missions to track more missions with tracking slots. This is to ensure that they cannot simply track 8 missions and complete all 24 objectives in a match, but instead need to play more matches to complete all of the missions they picked from the board. We later found that this actually boost the frequency of users coming back to visit the platform, since they need to manage quests and select more quests from the board.

Mission track panel (track / accept missions from the board).
UX/UI on network tier page (user progression)
UX/UI on network tier page (user progression)

While quests remain the core feature, we introduced additional gamification elements to build a sense of horizon progression throughout the user journey. These features not only motivate continued engagement but also enhance the quest experience beyond just reward hunting.

To make the quest experience more fun and engaging, we introduced a "3 choice buff" system—allowing users to personalize their journey by selecting buffs as they complete quests. Inspired by games like Hades, we embraced the idea of meaningful player agency through choices. Hades is known for its dynamic build paths, replayability, and a sense of progression that feels unique each run. By drawing from these strengths, we designed our buff system to give users varied strategic advantages, encouraging experimentation and deeper engagement throughout their quest journey.

As part of our vertical progression system, we designed a user leveling mechanism where players accumulate experience points (XP) by completing quests. This feature taps into intrinsic motivation by giving users a tangible sense of growth and achievement over time. To amplify engagement, we introduced a reward ladder—a visual and structured progression path that showcases milestone rewards tied to each level. This ladder not only serves as a motivational driver but also provides clear expectations and goals, helping users anticipate and aspire toward high-value incentives. Throughout the design process, we tested different formats (e.g., badge unlocks, milestone animations, streak bonuses) and gathered user feedback to ensure that the leveling journey felt both rewarding and frictionless. By combining progression with anticipation, the level system became a powerful habit-forming mechanism that encouraged users to return daily and continue their questing journey.

Bridging Play-to-Earn with Web2 Games

While play-to-earn has largely been associated with Web3 gaming, Radiant takes a different approach by exploring how reward-driven gaming can bridge into traditional Web2 games. Many Web2 titles already have strong player economies, but they often lack mechanisms for true player ownership and external reward systems. Radiant introduces a layer that enhances existing Web2 gaming experiences, integrating reward structures, social economies, and progression-based incentives without disrupting the core gameplay. This allows players to earn meaningful rewards while playing the games they already love, making the transition between Web2 and Web3 gaming more seamless and engaging.

Leveling Up as a Product Designer

While this case study focuses on selected highlights, it only scratches the surface of the work that went into designing Radiant's full feature set. Throughout the project, I worked on numerous design aspects not fully covered here—ranging from UI systems and progression flows to dynamic in-game interactions and narrative scaffolding. Each feature brought its own set of challenges, from adapting to shifting product directions and evolving game mechanics, to aligning visual tone with lore and gameplay. One of the most rewarding parts of the process was collaborating closely with cross-functional teams—especially narrative designers, game developers, and directors with deep experience in the gaming industry. Working alongside them offered a masterclass in how to think about player psychology, long-term engagement, and the importance of subtle storytelling through interface.

This collaborative environment pushed me beyond traditional product design boundaries. I had to constantly consider how each design decision contributed not just to usability, but to world-building, immersion, and emotional resonance. It was a hands-on lesson in crafting design systems that support both functionality and fantasy—learning how to make game-like experiences feel seamless, rewarding, and intuitive. These experiences helped solidify my understanding of UI/UX as not just a tool for utility, but a medium for storytelling and player expression. Ultimately, Radiant became a defining project for me—one that transformed how I approach product design through the lens of gamification, narrative, and collaborative iteration.