The Kingdom
Tools used:
Axure, Figma, Miro, Rive
Status:
Completed
Application Redesign
I had initially met members of The Kingdom team through mutual connections within the NFT community Neo Tokyo in 2023 and began doing some prototyping for them shortly afterwards. The project already had an app interface, allowing users to manage avatars and participate in some quests within the community.
As The Kingdom was looking to expand on its current application and add some new functionality, it was a great time to begin. Below is an example of the application as it was in early 2023.
Collaborative Design
Over the years Miro has became an integral part of my design process, especially with teams that are remote and spread across different timezones. The ability to co-design, or asynchronously collaborate on sections and provide feedback has been crucial in pushing projects forward.
Below is the Miro board that we used to design the new application for The Kingdom. In it you can see sections such as “Outcome-based Design” where we detail out user flows, an important aspect in an application with many moving parts.
These flows develop into prototype flows, created on Axure RP for testing and validation, and placed on the Miro board for a higher level view of our design and how end users will move throughout the application.
Outcome-based Design
An example of an “Outcome-based Design” session. Here we are using a user story to begin the journey, noting potential motivations and pain points to frame the process, documenting each step in the journey and what the desired final outcome of the flow is.
These steps, combined with notes taken whilst designing, inform the final user interfaces and what is on each screen.
Prototyping & mapping the flow
Axure RP was utilised to create the first versions of prototypes due to it’s speed in developing out clickable and interactive prototypes. Instead of spending time thinking about colours, fonts and imagery, we focussed on getting the core user journeys developed and tested to see their effectiveness.
Below is an example of these screens. By pausing any effort on the final ‘visual design’ elements and keeping things low-fidelity, we quickly arrived at solutions that answered our needs.
Placing these screens in a higher level context is important not only for the design and product teams to understand, but can be useful tools for the development team to get an early indication of what they will be building.
Below is an example of these map laid out in Miro which was presented to the development team before moving any UI design had been carried out.
UI Design
Axure RP was utilised to create the first versions of prototypes due to it’s speed in developing out clickable and interactive prototypes. Instead of spending time thinking about colours, fonts and imagery, we focussed on getting the core user journeys developed and tested to see their effectiveness.
Below is an example of these screens. By pausing any effort on the final ‘visual design’ elements and keeping things lo-fidelity, we quickly arrived at solutions that answered our needs.
Below is a further example of the design in both desktop and mobile, highlighting how screen size would change the usability of the application.
An example of the landing page within the application.
Game Prototyping
Aside from designing the application, I also had the opportunity to prototype early game screens and utilise Rive in the design process as well as Figma to create interactive demos. The game has moved on considerably since experimenting with these designs, however the lessons and techniques are…
Rive Prototyping
Rive is a powerful interactive design and animation tool that helped us quickly spin up demos and prototypes for how elements may work in-game. Rive’s framework can interact well with the Unity game environment, bridging the gap between design and development and a really intuitive programme to work in.
Below is an interactive prototype testing out how a user may answer dialogue within the game, with hover states and expanding content to test interactions. Give it a try!
Dylan, Head of Product at The Kingdom
Justin is an exceptional UI/UX designer who consistently delivers top-notch results with impressive turnaround times. It's clear that he dedicates time to research and engages with us on calls to fully understand the user journey, ensuring he's crafting not only a functional design but one that truly elevates the user experience and aligns seamlessly with our goals.
Justin’s prototyping process is especially valuable, allowing for seamless collaboration and iterative feedback to ensure we align with our vision before development. Many of our community members have shared that they think what Justin has designed for us is the best UI in our industry. We highly recommend Justin for any UI/UX design projects.