Explore New Worlds

Overview

Eraverse is an MIT-based startup looking to create a more authentic, impactful, and fun social media experience through their accessible metaverse platform.

Challenge

Eraverse wants to grow for new audiences while prioritizing authenticity. Currently, the product has two screens available for users: the main world profile that allows you to build your vision & interact with other users, and another screen listing every user on the platform you can interact with.

There’s an opportunity to improve their current screens for people to navigate through profiles and explore their worlds. This includes developing a user interface that encourages connection and exploration.

Role

Role: UI/UX Designer

Team: UX Researcher | Interaction Designer | UI/UX Designer

Scope: 2-week Sprint

Constraints: iOS Mobile Application

Results

Eraverse needs a way for its users to participate in new social settings in order to have meaningful interactions. For this reason, I lead the development of designing their navigation system that gives college students the ability to join both new and current 3D world profiles. 2 rounds of usability testing resulted in a direct improvement in time efficiency spent navigating through the app from 1:48 minutes to 55 seconds. My design empowers users to navigate and discover easily while giving them more time to spend on what matters most: connecting.

Navigating Through The Unknown

Through evaluations of the client’s aspirations & comparing competitors in the metaverse field, I wanted to focus on the way people connect with each other.

However, our team did face initial challenges before we landed on focusing on how people connect with one another. For example:

  • I nor did any of my teammates have any prior knowledge of the metaverse

  • The client’s product was currently in development and undergoing beta testing

  • The metaverse is still an early concept other companies are developing as well

33 out of 51 respondents connect with their social circle daily

There’s a balance required to accommodate people’s current connections while considering Eraverse’s need for new connections.

During research, our survey revealed:

  • 39 respondents - Use social media for communication

  • 40 respondents - Haven’t used a metaverse platform

  • 37 respondents - List Instagram as their favorite app

Users value their interactions with their social circle (regardless of application or type of device) because they want to stay connected with the people or community they care for.

“The people and the context of the situation are what make my connections meaningful”
— Interviewee

Finding New Friends

We’ll develop a discovery feature that gives college students the ability to navigate through users’ 3D world profiles.

Based on both business needs and user research, we developed Mario. He’s a college student who sometimes feels excluded from a social life due to limited free time and needs a way to participate in new social settings in order to have meaningful interactions.

Mario is a busy MIT student looking for ways to make new friends at school.

Digitized Sketches V.1

  • V.1 Home Profile

  • V.1 Discover Tab

  • V.2 Discover Tab

  • V.3 Discover List View

  • V.1 Discover Map View

  • V.1 Discover Item Selected

  • V.1 New Profile Selected

Wireframes

  • Home Profile

  • Discover List View

  • Discover Map View

  • MIT Mountain Selection

  • MIT Mountain

Users Couldn’t Navigate to MIT Mountain

Both the Discover List View and Discover Map View highlighted features that caused the most confusion.

Users were given the task to find the world “MIT Mountain” through two paths: a list view and a world view.

5 out of 5 users experienced confusion when navigating through the world view.

  1. The floating action button was used as a CTA button for the next step not knowing what it signified nor what its intent was.

  2. Scrolling through the world map was not communicated properly to advise users they can scroll to their right for more options (including the end goal of MIT Mountain).

Eraverse Wants to Stand Out

Thus, Eraverse provided plenty of inspiration for the look and feel of its design. My research found the colorful gradient style called “Aurora” that matched their vision. This paired with transparent cards, rounded edges, and dark themes drove my design ideation toward something similar.

Let’s Start Styling!

Mobile Layout

Frame: iPhone 13 Pro

Dimensions: 390px by 844px

Columns: 5

Margins: 20px

Gutter: 20px

Color Scheme

Typography

My Solution

More Time to Spend Connecting

After delivering the hi-fi prototype to our client, my team did not conduct any further usability tests.

The 2nd Round of usability testing results was completed by myself months after the project finished.

1st Round Usability Testing

5 users successfully completed the 3 tasks provided.

1:48 minutes average time to complete 3 tasks to navigate through the app.

2nd Round Usability Testing

5 users successfully completed the 3 tasks provided.

55 seconds average time complete 3 tasks to navigate through the app.

Results

  • Users revealed issues with the floating action button in 1st round thus removing the button completely resulted in a reduction of confusion among users in the 2nd round.

  • The 2nd round included the hi-fi prototype though color made no difference in users' interaction with the world map as users were surprised the map can move in all directions to find worlds.

  • Overall, a difference of nearly 1 minute between 1st & 2nd rounds of testing shows a large improvement in time spent navigating through the app successfully.

Best Project I’ve Been Apart of Thus Far

For the solution my team delivered to our client, there are still further improvements needing to be made including:

  • Further research including site maps, card sorts, and additional usability tests

  • Onboarding process - including the ability to create worlds

  • Collaborations with developers to create a suggestion algorithm

Reflecting on the project as the UX/UI Designer, this was the most fun project I’ve had the chance to work on.

  • I did my best to follow best practices including utilizing both Material Designs and Human Interface Guideline design systems to guide my decision-making.

  • Though nerve-wracking, the initial project’s blank canvas was intimidating yet exciting. To have such creative freedom meant following a path that was decided by a mix of data, best practices, and gut feelings.

  • Complete trust from our client through constant communication and feedback was critical to the project’s success

Ultimately, the goal was to design a solution that would help our client, and with smiles across the board & positive reviews, this goal had been clearly exceeded.