Project Overview

Year

2022

Duration

6 Months

Tools Used

  • Figma

  • Zeplin

  • Shortcut

Scope

  • Responsive Website Designs

  • Gaming Controls

  • Design System

Background

Voxels describes itself as a player-built metaverse. It's a 3d online world you can access and interact in with a customizable avatar and plot of land. The outdated and hard-to-navigate website was a divisive topic among its users. However, most users agree that the company's anti-corporate spirit was the reason they chose to use Voxels and showed great brand loyalty. Another main differentiator that adds to their egalitarian reputation is that is is accessible for free via web browser; you can even roam the metaverse from a mobile device despite some widespread errors and some reported clunkiness to the interface. Signaling this desire to promote accessibility to the metaverse, the company had just gone through a rebrand from "Cryptovoxels" to "Voxels" -- unveiling a new logo with a new violet brand color.
‍

Business Goal

Instate trust in Voxels brand and further differentiate it from other metaverses through positive mobile experience.

Design Objective

Redesign menu and and improve nagivation controls.

Design process

  1. Define Goals
  2. User Testing
  3. Secondary Research
  4. Design Prototype

1. Define Goals

Business Goals vs. User Goals

I used the diagram I created for the brand to inform my design decisions.
‍

User Interviews

I scheduled interviews with users who are active on the Discord server, as well as some new users who had never heard of Voxels before. I converted their qualitative data into codes I could easily categorize.
‍

Personas

I converted the data from my user interviews into personas and referred to these personas throughout my design process to inform my decisions where I didn't have the resources to extensively test my designs.
‍

2. User Testing

User Testing

Users from a variety of age groups and tech-levels were observed and interviewed while using the mobile site, and were asked to navigate in the world  and try out the menu items. I used the following instructions for virtual user tests.

For in-person tests, I made sure to take photos of bugs that occured and hand posture.

Takeaways

Users held the device vertically by default, often holding the phone with the left hand and using the right for movement and view


It took a minute of navigating for some to realize they could move the view around; one didn’t discover this function at all.

Different browsers and devices and parcel activity levels created random reloading and other bugs creating great frustration among some.

Some menu elements felt small and inconsistent, lowered trust in functionality. 
Sound didn’t seem to function.

Users conflicted when using the chat feature to hit RETURN or DONE to send.

Communicate Development Issues

Many of the issues users encountered were not actually design issues, but bugs. such as an infinite reloading error on iPhones and sound not functioning. I used Shortcut to write up tickets in as much detail as possible for these errors to be addressed by the development team.
‍

3. Secondary Research

Competitive Analysis

I also analyzed the menu & navigation controls for popular open world mobile smartphone games such as:
MinecraftLego StarwarsMadout2SkyOceanhorn 2
‍

Commonalities included, translucent or outlined UI, and increased reliance on gestures,  as well as horizontal orientation.

I also turned to video game controllers from the 80s until today for inspiration of familiar design patterns... and considered other designers’ 2D representations made for the touchscreen.
‍

I condensed all of the navigation attributes into a few different categories to consider, and offered reasoning for and against each solution for my client's product.
‍

5. Design Prototype

Design Navigation

After I had narrowed down my navigation patterns, I designed a few and tested them out on different backgrounds and checked for how each size felt with thumb feel and visibility.
‍

‍

I decided the toggles took up too much visual space and tested just wheel and directional options. The wheel option was modern and attractive but slightly less usable and a bit more complex, therefore I continued to narrow down the directional options for size, color, and opacity.
‍

I designed buttons using gaming historical convention to keep the "fly" button on the right side and the movement controls on the left. I made sure to use icons to promote accessibility.

Most backgrounds are darker but I checked my designs with fringe cases of pure black and white for visibility.
‍

After considering these different options, I settled on the "fly" button below since it matches the desktop interface style which promotes brand continuity. "Third person view" and "chat " buttons were also tucked into the hamburger menu to create more space to view the world.

I also added an animated marker in the upper right quadrant of the screen that would let the user know they could user their finger to look around to add discoverability to this function.
‍

Design Menu


A hamburger menu made sense for mobile web since it is more compact. I went about designing an all new menu that would have all the same information packed into the old navigation bar. I also favored the new brand color purple into the design over the muted magenta to add brand continuity and minimalism.

I also created a new design for the "Womps" button that I felt could accurately portray what Womps are to those less familiar with this Voxels-specific jargon--they are photos or screenshots taken in-world that are linked to your account and the locations on the map!
‍

These are the final screens, and feel free to click through the menu in the prototype below.
‍
View the Prototype!