Text Link

Introduction

Problem

Preview

Process

Research

Design Process

Visual Identity

Final Product

Reflection

Otherworld

Intro

Otherworld is a unique mobile game utilizing location-based tracking to further a game storyline.

Role
Context
Timeline
Skills
Team

Product Designer

Innovative Design at USC client project

Jan 2022 - May 2022

Figma
‍Prototyping
User Research
Branding

@Nikisha Roberts
@Ivan Peng
@Natalie So
@Kyle Ang

A Bit of Background

As a member of the web team for Innovative Design at USC (a student-run design agency), we took on Wolf Suit Games as one of the organization's first paid client. The client is a game startup, looking for a UX design for their new game, Otherworld. Otherworld is a game where the player travels to different locations in real life in order to complete a narrative. The client wanted a design that matched the uniqueness of the game itself, but flexible enough to accommodate a variety of different storyline styles.

original Design
01

Product Preview

The unique bubble style paired with a sleek dark mode and unconventional icons gives Otherworld a truly otherworldly feeling, while still being easily approachable and understandable to new users.

The Process

02

Research

Existing Prototype Analysis

Otherworld already had an existing working prototype that we tested in the field. It had one storyline set in Venice, California where we were able to go around the city, collecting clues and characters. Through this prototype trial, we were able to determine a few areas for improvement that we can address in our new designs.

fluid gameplay

It was difficult to navigate the map feature because it did not function like familiar map platforms. For the sake of unique design, the game sacrificed a smooth user flow.

simplicity

There were multiple panels that included a large amount of text that made it difficult to gauge important information. This is especially detrimental to this game since it is story-focused.

intuitive design

The prototype attempted to be unique with iconography and other aspects of the design which led to a design that was unintuitive because it deviated from existing app norms.

Thomas Shelby

Age: 42, Location: Oregon, US
Occupation: Honey Business Owner
Small Business Owner

The owner of a small honey business. A beekeeper with his own private bee farm. Shelby prides in taking part in crucial pollinating measures for local farmers. His carefully packaged honey is shipped worldwide.

Problem Statement: Thomas is frustrated with the progression of his business because of low visibility among larger brand names such as O Organics and Nature Nate's.

Qinran Liu

Age: 30, Location: California, US
Occupation: Animation Artist
Small Business Owner

Qinran is an animation artist. As an artist, she owns a small side business where she sells her art and does commissions. She mainly utilizes Instagram to spread awareness for her business and seek out customers.

Problem Statement: As a small business owner, Qinran is frustrated with the visibility of her business, having to compete with content creators as well as businesses with larger budgets for customers' attention.

Samira London

Age: 24, Location: Illinois, US
Occupation: Marketing Specialist
Customer

London works as a junior marketing specialist. In her free time, she really enjoys online shopping and is a big user of Etsy and Instagram to discover and support small businesses.

Problem Statement: Samira is unsatisfied with the small business discovery process of existing apps, often failing to connect with the individuals running the businesses, thus leading to a lack of trust for larger purchases (outside of arts and craft small businesses).

Competitor Analysis

In order to create design with the three aspects that were lacking from the existing prototype, we conducted some competitor research to look at what other location-based games are designed and what aspects of those designs are successful or not.

Pokémon Go

Location-Based
3D Design
Energetic

One of the pioneers in location-based gaming, Pokémon Go was a huge hit, playing off of the popularity of Pokémon over the years. Some major distinguishable aspects of the design is the 3D gameplay and the use of round, modern and energetic designs to match the game premise.

Maguss

Location-Based
2D Design
Dark Mode
MMORPG

Maguss is a location-based fantasy game developed by an indie studio. Players can play as a wizard, collecting ingredients to create spells and win battles. Defining aspects of the design is the dark mode giving a more mysterious feel, and the familiar usage of health bars and currency seen in other fantasy games.

Harry Potter: Wizard's Unite

Location-Based
3D Design
Sketch Style

This game built off of the popularity of Harry Potter franchise by allowing players to play as a wizard in the Harry Potter world. Notable aspects of the design included the 2D sketch art style paired with a 3D map design, which gave the game a very interesting storybook feel.

Pikmin Bloom

Location-Based
3D Design
Energetic

Building off of the popularity of the Pikmin series, Pikmin Bloom is a location-based game focused on growing and raising Pikmin. The game is paired with various fitness apps and can log steps taken throughout the day. The game has a very bright and energetic feel, utilizing 3D characters and round, bubble designs.

Small Business Oriented

Customers can find businesses based on location

Businesses are easily discoverable

Personalized Connection between Business and Customer

03

The Focus

Our client had a very particular vision for the Otherworld design and it was imperative that our designs were able to match his vision. His vision could be summarized into three components.

smooth gameplay

It was difficult to navigate the map feature because it did not function like familiar map platforms. For the sake of unique design, the game sacrificed a smooth user flow.

simple and intuitive

There were multiple panels that included a large amount of text that made it difficult to gauge important information. This is especially detrimental to this game since it is story-focused.

unconventional

The prototype attempted to be unique with iconography and other aspects of the design which led to a design that was unintuitive because it deviated from existing app norms.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

04

Beginning Stages

Our process was very systematic, consisting of the moodboard stage, low fidelity, mid-fidelity, high fidelity and final design stages. In the middle, we also established a design system to keep the designs of each team member consistent.

Moodboard

One of the first challenges we ran into was creating a moodboard. The client had a very specific vision for his game and that included creating a design that is unconventional and never seen before. This made it especially difficult to pinpoint what direction our designs should go in. My preliminary moodboard consisted of images from various animated media and font aesthetics to try to capture a unique and colorful feel. My teammates also created a number of different Moodboards for our client to choose from. In the end, our final design went in a vastly different direction than any of our moodboards but at least it provided us directions not to go in.

User Flow

While created much later in the process, the user flow is useful to look at in order to understand which screens needed to be made. The reason why this was created later for this specific project is because the client had already given us a few screens to design. It was only later that we created a user flow to connect all the separate screens into a cohesive game.

We also created a far more detailed interactions user flow for Otherworld developers to reference. As the legend details, filled in boxes are full screens, filled in rounded boxes are buttons and menus, filled in triangles is a user decision, empty box is user action, and empty rounded boxes is a backend action. This way developers can easily determine what happens on each page and with each user action.

Lo-Fidelity Drafts

Our low-fidelity drafts were wireframes that outlined the layout for each page. I was tasked with creating the main menu page and so I created multiple iterations, playing with different layouts. I also experimented with different main map layouts.

05

Establishing a Visual Identity

The most challenging aspect of this project was likely trying to establish a design system for Otherworld, including branding, color, typography, and iconography. The client wanted a design system that was versatile for a number of different storylines, but also unique, unconventional and energetic.

Iterations

Because the client could not really specify what concrete design elements would satisfy his criteria, we needed to do multiple different iterations of design systems.

Iteration 01

As shown below, very early on, I played with a number of different main menu designs, incorporating circles, diamonds, blurs and gradients. All of these were since scratched because it didn't match the energy of Otherworld.

Iteration 02

Below is another example of an early iteration that I created, utilizing abstract lines and shapes to denote different button usages. This was paired with contrasting colors and interesting fonts to create a more alien look. This iteration was scrapped because it did not feel modern enough.

Iteration 03

These iterations were much closer to the final design. I utilized black background blur, semi transparency, simple but unique iconography, and semi-3D circles to build the buttons for the main menu. I also created a unique shape to place on the main menu page that holds the three main buttons. This interesting shape gives a bit more uniqueness to the main menu design.

Final Design System

Utilizing elements from my previous designs, we were able to create a design system. Major elements of this system include the icon designs, color usage, and iconography. This design system was extremely successful in that it provided the "otherworldly" feeling by being different from other games, but also was simple and recognizable enough to be easily understood by new players.

Final Product

For our final product prototype, we included a number of features, including an extensive tutorial for simple onboarding, discover feature to find new businesses, and an innovative live feature to bring a personal aspect to online business. View our final prototype here.

06

Final Product

After five months on this project, we finally finished the final designs for Otherworld. We were tasked with designing over twenty unique screens and a full design system, including over thirty unique icons.

Feature Highlights

Exploration Mode

On the main map page, players can interact with the map by panning and pinching the map directly to navigate. If the map is uncentered, the main icon will open up. When clicked, the icon will close up again and recenter the player.

Quick Items and Inventory

Players can easily access quick item menu by clicking the items button. Through this, they can add more quick items from inventory or go straight to inventory. Within the inventory, players are able to view or use their items.

Story

One of the major features of Otherworld is the story. Otherworld has a number of different storylines set in different locations for players to discover. In the story panel, users can look at the stories they are currently working on, the ones that haven't completed yet, and the ones that they have.

In order to complete stories, players can identify characters on their journey that they can interact with through the character dialogue and player responses.

07

Final Reflection

Key Challenges

establishing a design system

One of the most difficult aspects of this project was attempting to establish a design system. Tasked with creating a design system that was both unconventional yet still easily understood by new players. Otherworld was envisioned to feel alien but modern, without stepping into fantasy. This proved difficult and we had to go through numerous iterations in order to find one the client was satisfied with. Many moodboards were created, and a lot of research was done not only on existing games but also game concepts developed by individual creatives.

COnsistency as a team

An issue that came along with the difficulty in establishing a design system was maintaining consistency among designs made by different teammates. Even when a design system was established, there were still slight inconsistencies between different members' designs. In order to mitigate this issue, we met as a team very often and worked on designs together to smooth any inconsistencies across screens. It was also imperative that we were very detailed in our design system so that every aspect of the designs were covered.

Above are a few screens created by different members of our team midway through the design process. These designs are clearly very different in their styles which demonstrated our different styles and indicated the lack of consistency without a detailed design system.

Personal Evaluation

My role

The work was split evenly among my teammates. Each of us were tasked with different screens and we worked together to develop a design system. I was tasked with the main menu screen but I also ended up building the main map screens. I also created the design that was later adapted into a full design system which included the blurred dark mode and the clay-morphic style for the button designs and the main map blob-like button holder.

areas for improvement

Admittedly, this project did not go as smoothly as it could've mainly because of the issues we had with establishing a design system. It was difficult for us to understand the client's vision and transform it into tangible designs. Thus, something I can do in the future when working with clients is to categorize designs into abstract concepts. For example, one could characterize designs into multiple different moods and styles such as "fantasy", "mysterious", "sketch," etc. in order to help me design in accordance to a client's vision.

As a team, our designs were highly inconsistent especially at the beginning of the process. While it's okay and actually encouraged to showcase different styles early on, we were inconsistent far into the process which warranted a bit of concern from the client. It got a lot better when we changed our meeting agendas to include more time to work together on the same screens rather than simply splitting the work. This is something that I will do more in the future with my teams in order to ensure consistent designs.

Looking for more?

butik

View Project >