PACK!
Mobile Puzzle Game
ROLE | Lead UI/UX Designer
TIMELINE | Feb 2024 – May 2024
TOOLS | Whiteboarding, Figma
COLLABORATORS | 1 co-designer, 3 developers
ABOUT
Overview
Tiger Snack Box is an eCommerce platform focused on delivering international asian snack boxes to customers worldwide. The platform offers a selection of popular snacks from Korea, Japan, and China.
Context
Recently, the company has set out on creating a mobile puzzle game to increase brand engagement and customer retention. The stakeholders hired me and one co-designer to lead the UI/UX design of the game. The game would be available on both iOS and Android platforms, targeting casual gamers who enjoy cute puzzle games and have an interest in Asian culture.
My co-designer and I during the initial brainstorming session.DISCOVER
Constraints & Guidelines
We were given clear brand guidelines and constraints to follow throughout the process.
Gameplay, App Navigation, Shop, Settings, tutorial, login, and registration user flows for the app done through traditional whiteboarding.Constraints
Gameplay
The gameplay. The gameplay was given to use by the shareholder. It was a puzzle game that offered various levels of increasing difficulty. For more information, refer to gameplay section.
It is a mobile only experience.
It had to give a cosy, friendly vibe, and aesthetic.
Business
The game had to have some way of generating revenue, whether through paid features, ads or purchases through real world snack boxes.
Aesthetics
Brand definition. The game needed to strongly reflect the current brand identity of Tiger Snack Box (red, orange, yellow) to pay homage to asian culture.
Time
This was a 3 month project with a hard deadline to get development started.
Guidelines
Gameplay
Create a mobile only experience - keep hand ergonomics and sizing in mind.
Will be touch and swiped based.
Business
Revenue would be generated through increase in revenue or increase in customers buying real world snack boxes.
Visual Design
Create a visual identity that satisfies both the playful feel required and the brand identity of Tiger Snack Box.
Time
Design would be seperated into sprints to allow for feedback and timely delivery.
Problem Statement
How can we design a mobile puzzle game that both effectively engages users and reflects the brand identity of Tiger Snack Box, while keeping constraints such as the business requirements, fixed gameplay mechanics, and 3-month deadline in mind?
Market Research
To better understand the mobile puzzle game market, we analyzed three different games, one for UI inspiration, another for gameplay mechanics, and one with a mix of both
Whiteboard session for market research and analysis.
Cats & Soup | 4.8/5 Rating
Pros
Charming Visuals - Usage of hand drawn textures (inconsistent strokes) and extremely pastel colors make the game very approachable.
Lack of pop up ads - Users like how theres no interstitial (interruptive) ads and instead takes a rewarded ad approach for revenue.
Environment - Users like having the game open in the background and playing when they have free time due to the calming and cozy nature of the game.
Cons
Cluttered UI - The game has a lot of UI elements that can be overwhelming for some users.
Repetitive gameplay - The game stays at a consistent difficulty level, users state they get bored quickly.
Misclicks - Users report misclicks that lead to accidental purchases and actions that they did not intend to do.
Candy Crush | 4.7/5 Rating
Pros
Animations & Haptic feedback - The game has a lot of animations and haptic feedback that makes the game feel more engaging and interactive.
Ergonomic design - The game is designed to be easy to use and navigate, with a focus on hand ergonomics and sizing.
Cons
Interstitial ads - Users report that interruptive ads make the game unenjoyable and even unplayable at times.
Pay to Win - Many users report that further levels get extremely difficult and requires paying boosters to progress.
Puzzles & Dragons | 4.2/5 Rating
Pros
Scenes - Idle Scenes that play above the puzzle game makes the game feel like it is constantly flowing.
Unique Characters - Players love the unique characters and would save up currency to roll for them (Gacha mechanics); consistent revenue stream without ruining user experience.
Cons
Endgame - The game ends after a certain number of levels, users report it gets stale when they get to this stage.
Co-dependent Gameplay - For many levels of the game, users needs to cooperate with other players to progress. Furthermore, the number of players that can join is limited by a paywall.
Market Analysis
In addition to market research, we went through the most relevant 50 reviews of each app and aggregated the data into a single statistic. We followed an experimental design, with the independent variable being the app and the dependent variable being responses to the app. The control variable was the way the reviews were sourced (Google Play Store, 50 most relevant reviews). We believe confounds such as what platform we used did not effect the results as the games were available on both platforms. Doing so allowed us to get both quantitative and qualitative data.
78%
Loved the illustrative and cosy feel of Cats & Soup.
40%
Heavily disliked the interstitial ads in Candy Crush.
36%
Heavily disliked the pay to win mechanics in Candy Crush that stopped users from progressing at harder levels.
34%
Loved the progressive and constantly updating gameplay mechanics in Puzzles & Dragons.
DEFINE
Market Analysis
After discovering and conducting market research, we summarized our data into relevant market analysis.
Use hand drawn textures and pastel colors
From market research, we found that users prefer hand drawn textures and pastel colors. This is because hand drawn textures and pastel colors are more approachable and more engaging than other colors.
Stay away from interstitial ads; use rewarded ads instead
From market research, we found that users prefer rewarded ads over interstitial ads. This is because rewarded ads are less intrusive and more engaging than interstitial ads.
Rewards, In-app purchases, and coupons for real world snack boxes
To further satisfy business requirements, we can offer in game customization options, in-app purchases for currency and gems, and challenges that offer discounts on real world snack boxes.
Progressive gameplay mechanics
From market research, we found that users prefer progressive gameplay mechanics. We can make the game more engaging given game mechanic constraints by increasing the difficulty of the game as the user progresses. This making the game faster, increasing penalties, and manipulating game mechanics in interesting ways over time.
User Personas
With the market analysis, we created user personas based on the data.
Sarah Chen | Age: 16 | Gender: Female
Sarah loves cozy idle games like Cats & Soup. She prefers visuals that feel hand-drawn and soft, and often keeps games open while listening to music. She avoids games with intrusive ads and gets attached to charming characters or collectibles.
Steven Jackson | Age: 17 | Gender: Male
Steven plays games like Candy Crush and Puzzles & Dragons to challenge himself. He enjoys games that reward skill and persistence but dislikes when difficulty spikes or monetization blocks progress.
James Smith | Age: 20 | Gender: Male
James values games that are visually minimal, intuitive, and don’t demand constant attention. He enjoys background play loops and appreciates rewarded ads if they feel optional and balanced.
Emily Johnson | Age: 18 | Gender: Female
Emily gravitates toward games with strong visual identity and personality. She enjoys discovering how design connects to brand storytelling.
Answer Statement
We can create an effective mobile puzzle game by engaging users through progessive gameplay of the given game mechanics, we can create a pastel and soft visual identity through colors, textures and other design tokens in a way that still reflects the brand identity, and lastly, generate app revenue and real world snack box sales through rewarded ads, in-app purchases, and challenges that offer discounts on real world snack boxes.
DESIGN
User Flows
Before design, we created user flows to understand the user's journey through the app. This included flows for login, tutorial, gameplay, app navigation, shop, and settings.
Gameplay, App Navigation, Shop, Settings, tutorial, login, and registration user flows for the app done through traditional whiteboarding.Low Fidelity Wireframes
Once we had a clear understanding of the user flows, we created low fidelity wireframes to test it's validity. Throughout the process, we create different iterations for different screens. Our main goal was just to get a feel for the app and and validate the user flows.
Low fidelity wireframes for the app done through traditional whiteboarding.Design Tokens
Once user flows and low fidelity wireframes were created, we moved onto figma. First, we created design tokens by creating pastel and soft versions of the brand colors. For the font, we went with forta - a one size, one weight font. The font was extremely rounded, playful, and soft. One size also created the illusion that it was almost hand drawn, perfect for the game. To keep things structured, we followed the 4 point grid system for font sizes, spacing, and radius.
High Fidelity Wireframes
Once design tokens were created, we moved onto high fidelity wireframes with all previous design elements.
High fidelity prototypes follows the low fidelity wireframes and design tokens.
Usage of texture, noise, and gradient strokes to create an illustrative and hand drawn feel.
We made screens for both left and right handed users to ensure ergonomic design.User Flow & Prototypes
With the high fidelity wireframes finished, we took a look back at the user flows we created, and created prototypes for each flow.
Flows and prototyping also done through Figma.DELIVER
Final Preview
The final preview of final PACK! Application. Both the high fidelity wireframes and prototypes have been handed off to the development team to start the development process.
INSIGHTS
Future Improvement
This was the very first time creating a mobile game from start to finish, so I am super proud of what I was able to create - from having zero market understanding of the game industry to having a fleshed out game with both strong visual identity and gameplay mechanics. That being said, there is still a lot that I can learn and improve on.