Aditya Thakur
Aditya Thakur

NFT details on mobile

Bringing NFT details to the Mobile App at OWN.

Designing with the team at One World Nation has been one of the most amazing journeys so far. I was commissioned for designing the entire mobile app in 4 months.

This article is written to give you, the reader an insight into how I work in a fast paced, high pressure environment of a startup.

Let's begin.

What needs to be done?

OWN Mobile app needs to show crucial NFT details, similar to the web version. Both are going to roll out in 14 days. Design for mobile app needs to be ready within the first 5 days.

OWN has a website where people play games, but their wallets are usually on the phone. This wallet houses their NFTs that are used in game.

Until now, OWN was able to show a Lite version within their Mobile App, but it was nowhere near what can be seen on the web.

This is what the web and mobile version looks like before I started.

Since this was a lite version, the mobile app did not have a lot of info, but at the same time the web version was being revamped to have a lot more details.

Click / Tap to enlarge

A comparison of how much info needed to be displayed in the mobile app.

Understanding the nuances

Now, as a player, viewing the NFT details has a purpose. They need to see the status of the asset in game. It could be "FOR SALE" or "LENT OUT", among other things.

Therefore, it is important to understand the player behaviour around this screen.

For this, I played the game myself for over 40 hours during my free time. I also attended a few calls on their discord, where the users would come together to discuss strategies and play together.

Learnings

There is a certain priority in which players view NFT data:

  1. Is the NFT being used in game?

  2. What rarity is the NFT?

  3. What is the current generation / breed level?

  4. What is the XP progression?

These are most viewed points by players during a course an event. An event spans 18 hours, and a player might look at an active NFT ~8 times or more.

After all this, they might look at some other data points such as:

  1. How much the asset has earned them in total

  2. If lent out, what is the percentage

  3. If up for sale, what is the price

  4. Body part levels (Needed for occasional breeding events)

This gives us a good idea on the information hierarchy. Using the web version as a base we can start designing a wireframe.

Designing a solution

Combining what I learnt so far in the journey I get this:

Click / Tap to enlarge

Focusing just on the first fold, we need to display

  1. Is the NFT being used in game?

  2. What rarity is the NFT?

  3. What is the current generation / breed level?

  4. What is the XP progression?

This is what it looked like on my first try:

There were some problems with this screen, namely:

  1. Status of asset can either be "Used in game" OR "Lent Out" AND/ OR "For Sale".

  2. Status visibility is inconsistent.

  3. Level and XP are not readily visible and too much cognitive effort is needed.

  4. Generation, Breed Control, Clan Size and Age may not have their icons ready in time, there needs to be an alternative minus the icons.

  5. Transfer and other CTAs not easily visible.

So, let's give this another try:

By now I am ~3 days in and it feels like I am almost there. Some more feedback:

  1. Earnings could be a little but more fun - this is a game after all.

  2. The status indicator and buttons being disabled when needed make a lot more sense

  3. Levels and XP needs to be better, but I was stuck and wasn't getting any new ideas here

  4. Overall the page seems a little congested, we might want to use our space judiciously

Okay so, 4th day begins. Let's try this one more time:

The users love this design! I showed it to them on Figma's Prototype mode, and got a lot of good feedback on this one.

Here's what I thought:

  1. When I split the levels in 3 with the middle being the current level, it felt more logical, and non OWNers could also understand the progression of XP at each level.

  2. Primary button changes according to status and therefore needs to be closer to the status indicator.

  3. Total Winnings looks much better now, and has potential to have a nice animation later on.

  4. Spaced out and typography now fixed makes this a lot cleaner and easier to look at, thus lower cognitive load to grasp key information points.

  5. Muted the background colours a bit, so that repeat visits don't overwhelm the user and color is being used to highlight important information only.

Hand off and User Testing

With one day left as buffer to test with more types of users, I sent this out for development. I spent about ~2 hours with the devs handing this piece off, and took care to explain all the moving parts.

Thanks for reading until the end, please contact me if you have any questions.

I hope this gives you a good insight into how I work.