MOBILE GAME - UI + PRODUCT DESIGN
20 MIN READ
Alpara — create your alternate paradise
Alternate Paradise, or “Alpara” for short, is an MMO mobile game that I designed to serve the 'adopt' community, a subsection of the online art world that is dedicated to the purchase and trade of unique character designs.
These creative people often begin creating characters using the visuals from avatar dress up games or for the purpose of role-playing games such as D&D. They interact using forums to create stories and virtual bonds between their characters, making a network within the community. I wanted to create a gaming platform for these players to socialize and interact, and provide them with resources to help them imagine their original characters.
SKILL HIGHLIGHTS
Competitive Analysis
Site Maps
User Experience Goals
Usability Testing
Rapid Prototyping
Motion Design
TOOLS
Adobe XD
Illustrator
After Effects
Google Slides
Pen + Paper
TEAM
C'est moi encore
:-)
TIMELINE
6 months
the opportunity
How might we allow players to express their creativity in character designing? How might we provide players with flexible visuals and story building resources without limiting their imaginations? How might we bridge their fictional worlds and nurture real connections? An opportunity exists at the intersection of different gaming applications:
the value prop
An MMO (massively multiplayer online) mobile game that provides players with a social and creative platform to:​
Design Characters with a growing catalog of cohesive visual content.
Create Worlds and Stories for those characters by providing game mechanic structures like player stats, an economy, chat rooms, and forums.
Collaborate with Friends through roleplay games and quests!
DISCOVERY
competitive analysis
Since I've identified an opportunity in the market, it’s important to look at what similar games are doing so I can incorporate what players are used to and also improve. Animal Crossing: Pocket Camp, Line Play, and Love Nikki are three mobile games with a social network and varying aspects of dress-up. I created a feature matrix to compare their game mechanics.
“It's like dungeons and dragons as a mobile dress-up game.”
GAME DESIGN
features
Using these comparisons, I created a list of game features that I wanted Alpara to have. Luck-based item acquisition, or a "gacha", was a feature I knew I wanted to include due to its successful use in popular mobile games like Granblue Fantasy and Fire Emblem Heroes. It's essentially gambling, which is one of the most addictive compulsion loops. Similar browser games like Gaia Online, utilize this feature to stimulate their in-game economy and generate revenue.
Ideation sketches of the key screens, UI elements, and page details.
business model
Alpara's business model is F2P (free to play) with in-app purchases. Players can farm in-game currency with time and effort OR purchase premium currency to:
-
Buy rare items from premium-only shops and gachas
-
Unlock more play Energy, which saves time
-
Buy in-game currency, which saves grinding effort
USER EXPERIENCE
player goals
In my attempts to better understand the motives of people who create original characters, I found that speaking to members of the 'Adopt' community to be more useful than my initial survey responses. Below is a summary of some top goals players want to accomplish:
“I want to be able to collect cool, rare equips for my characters and be rich.”
-
These players are focused on their possessions.
-
Items represent their fortune and it's a status symbol to have items that are difficult to acquire.
-
These players are goals-oriented, they aim to obtain specific items.
​
System solutions:
-
Free first rolls on gachas and many opportunities to increase luck percentages the more you roll.
-
Limit time releases so the value of items increase the longer you have been playing.
-
A p2p trade and sell system to stimulate an economy.
“I want to be able to design otherworldly outfits to escape the boring limitations of reality.”​
-
Character designing is an expression of imagination.
-
People want to explore different fictions or 'alternate realities' with their characters.
​
System solutions:
-
New items and looks released regularly so players have a growing selection of visual options.
-
A variety of unique fantasy items to cover as many player’s tastes as possible.
-
Make-Your-Own contest events where players can submit their own designs and vote on their favorite new items/looks.
“I want to make friends with like-minded people, while presenting myself the way I want to be seen.”
-
Players tend to project parts of themselves onto their characters or identify as their character.
-
Interacting using their fictional personas removes the pressures of their real life identity and empowers them to be who they want to be.
​
System solutions:
-
Live chat rooms for players to interact with friends.
-
Forums that players can do written role play in.
-
Enforced rules and tags to create a safe environment in the forums for users to express themselves.
Annotated mobile app wireframes and grid specs.
Annotated mock UI screens for an Apple watch and Apple TV. The artwork belongs to Line Play.
USABILITY TESTING
sprint rounds
To quickly check the usability of my game, 5 testers were shown a lo-fi prototype of Alpara with no instructions. These testers were UCLAx students with some experience in analyzing games, ranging from 20 to 30 years old and primarily males.
There was a total of 10 test rounds, with each round lasting 3 to 5 minutes. After each test, I spent 20 minutes making revisions to reflect the previous round of user feedback. This sprint method of testing allowed me to quickly create an MVP, and introduce onboarding whilst narrowing my screens down to the game's core paths. I want my game to be playable by as many people as possible, not just by my target players or expert / intensive gamers.
target player
insights
After refining the initial prototype, I tested the next iteration against 5 target players. These testers were familiar with gacha or dress-up style mobile games and had little to no experience with game or UX development. They had played similar games within the past month and had invested a significant amount of time engaged with these games. Demographically, a majority were in their 20s, female, and primarily played on their phones or computers.
“Gacha F huh... this is definitely low grade. I guess it makes sense if I’m doing the tutorial to give me beginner items.”
— AUDREY, 24, PLAYING FOOD FANTASY, FF14, KH3
“It looks really good, really similar to games I’m used to. This menu bar makes sense. Energy means how often I can play, right?”
— DANNY, 23, PLAYING FF14, GRANBLUE FANTASY
​Insights:
-
Target players understand the basic game play without onboarding, which means the UI looks familiar.
-
Don't waste a player's time by forcing them to do onboarding! Making it a quest with a reward will give them a reason to click through the flow, but still allow them to opt out.
“I don’t really like the extra action for unequiping the hair... for these types of games, I want to be able to quickly switch back and forth and see what looks good.”
— STEPHANIE, 25, PLAYING FIRE EMBLEM HEROES, GAIA ONLINE
“Do I want to roll again? No way! I don’t even know which currency I’m using...”
— JENNY, 19, PLAYING AC:POCKET CAMP, FOOD FANTASY
Insights:
-
Target players analyze features compared to games they already know and have personal preferences despite UI best practices.
-
Target players are more cautious about spending their in-game currency because they are already used to saving for items they might want later on.
RAPID PROTOTYPING
← low fidelity
This interactive lo-fi prototype reflects all the revisions of my sprint tests, as well as feedback from my target players.
​
The onboarding takes you through the key screens of the game:
-
Items (inventory)
-
Buy (gacha & stores)
-
World (forums, chat, & trade)
-
Play (quests & mini games)
-
Profile (friends & settings)
​
After the onboarding ends, you can explore the other screens and equip your character with the items you have. Exploration through play is the best way to learn :-)
UI PROTOTYPE
← high fidelity
This hi-fi prototype demos Alpara's core game loop, the gacha spinning flow that retains player interest and aims to convert free players into paying players.
​
The screen flows highlight the beginning of the conversion funnel with a gift from one player to another. The player can now review and spin the gacha for free, triggering interest and desire if they see an item that they want.
​
In this case, the player happens to be very lucky, rolling a rare item. If they didn't get the item that they wanted, they may be motivated to roll again. We all wish we could win the lottery the first time around!
​
The player can now equip their character with the new item that they won and show off to their friend. How fun!
MOTION DESIGN
creating delight
For many apps, microinteractions can range from being tiny sources of delight to being critical UI responses for users. For a game, motion does both! Bright, flashy animations can excite the player and make your game more appealing and enjoyable, which is why I decided to create a mock for the moment a player finds out what they've won in the gacha.
LEARNINGS
reflections
It’s repeatedly been implied that I shouldn’t design for games, “You’ll end up working on a serious product, so demo your Google designs over your Pokemon ones.” I wouldn’t label myself a gamer, but I do enjoy and value games and the role they’ve played in bringing people together. There are many casual gamers who hold this mentality too and I think understanding gamification is an important part of designing for interaction. Play is an inherent part of learning, and what are we doing if not learning all our lives? In any case, the gaming industry is a serious too! Seriously big :-)
Disclaimer: The character art I used for the UI mocks are from here and I do not own them. If I had more time I’d love to have created my own assets, but that’s why UX designer and digital artist are different roles.