Asperitas

Hopping mid-way into an established team and project

I only hopped on the team at Week 4 of a 13 week semester after prolonged discussions with the team on my responsibilities on the team. Ultimately, we decided that I should fill the gap of a UX and UI Designer on the team.

Coming into a project midway through, I understood that Hololabs had already introduced the Sky Haven IP to the team. It had its own narrative built into the world they were expanding upon as well as ideas at various stages of development, one of which is a mobile game already in beta. Hololabs wanted the team to explore and prototype into the AR gaming space. This prototype should add onto the existing merge game as well as the existing world built around Sky Haven.

When I entered the team, the team had already established an intended experience and sub loop which they were going to focus on for the eventual prototype. They also had created a simple premise of Asperitas where you were a researcher who was a part of the Sky Haven world, and your job is to preserve the existence of magical creatures around the world.

Analyzing an IP’s brand identity to create a new direction

After getting to familiarize myself with the progress the team had made so far, I needed to dive deeper into the existing design and art direction that Hololabs had created for the Sky Haven world. This was required as if our game needed to be a part of Sky Haven, our visual identity and purpose of the UI had to match what already existed. To achieve this, we needed to:

Conduct an analysis on existing designs and narrative delivery Hololabs’ mobile game in beta

Explore potential visual direction and elements we could utilize based on said analysis of Sky Haven

Converge and expand our ideas to come up with concrete ideas and examples

Based on the analysis above, we had a solid idea of the UI design philosophy behind Sky Haven’s world. However, we still weren’t entirely sure how we could adapt these principles and build on them to fit within our new game. According to what we found from this analysis, we understood that…

Sky Haven aimed to convey a Solarpunk theme through their UI’s look and feel, which includes—mixing bright and natural colors, utilizing warm tones, combining soft and hard corner edges. Solarpunk is a mixture between nature and the future, a beautiful utopia if humanity successfully solved challenges in the realm of nature and sustainability.

What’s next was to explore potential visual direction and elements we could utilize based on said analysis of Sky Haven. I worked with Armaghan, our UI artist to collect mood boards and references that could serve as inspiration for our new UI design!

Upon compiling all the references we required, we needed to converge on a concrete visual direction to start ideating on how the UI should look and feel. I decided to run a Convergence Workshop with Armaghan, our UI artist, and Thelma, our product lead to converge on a concrete visual direction for Asperitas. To facilitate this workshop, we needed to pull whatever we knew about Sky Haven, Hololabs’ mobile game, and Asperitas. We also had to break the visual design down into multiple areas to identify what the overall look and feel of the UI should be like.

The look and feel of Asperitas’ UI should include:

Solarpunk elements—The Sky Haven world takes place in a Solarpunk era, hence the UI should convey the feelings of warmth, welcoming, futurism, and hopefulness

Narrative elements—As Asperitas is an AR game, it is crucial that the UI is diagetic and part of the game world to immerse players

Accessibility elements—Asperitas aims to target a wide user group. As such, the UI should be accessibility friendly to accommodate for all forms of disabilities.

These four areas I established that covers the 3 elements above are:

Primary and secondary colors

Typography

Iconography

Components (e.g. buttons)

As a result of this design workshop, we came up with a UI visual brief below which would guide our decisions when designing UI assets. It also ensured that Armaghan and I remained consistent throughout the design process.

Exploring and creating a flow and UI based on gameplay and narrative

So, now we had a visual brief we could refer to… We faced the next problem—what UI elements are crucial towards progressing the game? What was important to be persistently displayed on screen? What was okay being hidden in the menus? Our UI is heavily based on the fact that the player is a researcher who owns a futuristic PDA that allows them to monitor elements of their biome which houses magical creatures. How can we balance the narrative aspect while ensuring usability?

Considering that we are building an AR game, while immersion is crucial towards allowing players to find a connection between the real and AR world, we also needed to reduce clutter on the screen to maximize immersion. However, we also needed to discover which gameplay elements were necessary to communicate crucial information on screen that depicted their progress.

After consulting with the team, we identified that the most crucial elements to the players in understanding their progress were the…

Creature Closeness Meter

Biome Habitability Meter

These two meters are extremely important as progression in Asperitas heavily involves around either building out your biome and interacting (feed/play) with your creatures, both of which are quantified and visualized using a progress bar. Once players reach a certain value in the progress bar, they have the ability to evolve their creatures. This loop repeats till the creature reaches the fully-matured stage, which is when they’re able to release the creature into the wild. This is also where the scope of the MVP ends.

However, if we only had two persistent UI elements, how do we access the rest of the menus? The other menus are crucial towards gameplay and aid in player progression. These menus included:

Inventories containing different buildable object types (foundations, stackables, non-stackables, creature-related machinery)

Inventories containing creature-related objects (food)

Missions that enable creature growth and evolution

To solve this issue, we decided to group these non-persistent elements into a button to ensure minimalism and reduce on clutter. This meant that players can easily access these menus using a tap of a button. It also allowed for an ergonomic thumb-zone design that assists players in accessibility, an aspect that’s especially important in AR.

To fully visualize this, I mapped out every interaction and mechanic that could be stored in our UI and created an information architecture to understand how to organize and layout our UI. I also ideated on possible layouts of how these items could look like on a phone screen.

Based on the information architecture and sketches, I proceeded to begin creating lo-fi wireframes to better communicate how I envisioned the individual UI elements would be placed on a screen. While designing the wireframes, I wanted to remind myself that I was designing for an AR game, hence why the background remains a real-life place located at the Centre for Digital Media. I needed to ensure that all the elements I created followed proper accessibility and AR usability practices (e.g. Thumb Zones).

Establishing a design system and pipeline for handoff

Approaching the end of development, we needed to establish a pipeline on how to handoff UI assets to the developers. The issue we faced here was the fact that we had multiple states for UI assets, and our developers weren’t entirely familiar with Figma. The key question became…

How can we organize and independently handoff UI assets to our developers who aren’t familiar with Figma’s exporting system?

To resolve this, I decided to establish early on when we began creating assets on Figma that our design system should utilize Figma’s robust component state system. Our design system should also contain naming conventions which correspond to the object categories listed above, following this format CATEGORY-FEATURE-STATE-MISC.