Map

Research and other games

The metaverse is a big place, and for our users it had shown a bit hard to navigate. Originally we only had the map in the Dashboard, with very minimal integration in the game client. As a matter of fact, you could not change experiences inside the client, which meant the users would have to tap out.

We wanted to create a veresion of this which had very defined boundaries and rules, while not straying away from the Dashboard.
I researched how other games did it, filters and zoom levels. This was then discussed with the dashboard as we stated implementation.
Here's an example of part of the research, using google maps as a major example. The reason to use google maps, is that not all of our users were gamers, and we'd like to attract a slightly more casual playerbase.

The Caroussel & Modular components

Creating compoments in Figma is important in a case like this. We wanted the caroussel to not only use some components from other parts of the client, but also to make it easy for our designers to use it in different contexts. This meant we needed a highly customizable component to easily update it in different projects.

This component can be used anywhere, and as the designer wants it to with easily configurable values. It is also set up as a proper prototype, so it's modular and just drag and drop, so the designer will never have to worry about the values being correct, spacing etc.

It is also automatically updated of course.

Map, Neighborhoods and interactions

Of course it's not always about just the caroussel, but about the whole flow. The flow was designed before the caroussel itself. What you see here was known as the "neighborhood flow" which was the most important flow as it was to be integrated first. In this flow many things were rethought, here's a list:

The searchbar and caroussel
A new view for switching neighborhoods within neighrborhoods, so you never have to zoom out and can find it by name
Filters for experiences, making it far easier for the user to find the experience they want to try
A new way of showcasing the neighbourhoods, which is not too far away from the Dashboard
A new way of showcasing gated experiences

All of these were split into different Figma pages to ensure that the design was consistent, it was taken out and put into one big prototype.

Splitting it up was to make it easier to create both the atlas, and for developers to see which parts needed to be made. It also made it easier to split into different tickets and refer them to specific parts of a massive Figma file.

Final Prototype, integration & Atlas

The final prototype can be seen on the left together with the Atlas, this will soon be able to be seen in the Gameclient, the first part is the caroussel, with the other features coming later on.

You can try the gameclient here

Keep Scrolling