role
Product Designer
scopes
Gamification
E-Commerce
Product Design
collaborators
1 Product Manager
2 2D Artists
1 UX Writer
1 Sound Designer
Engineer Team
timeline
Q3 - Q4 2023
Background
Shopee Pets is one of Shopee's top-earning games, with an arcade-like ecosystem where users have the options to either play in free mode or spend coins in return for bigger rewards. The rewards take form in either Shopee coins or in-game items that they can give to their "pets".
In late 2023, Shopee Pets regional team wanted to release a new game for its arcade collection. The new game should adhere to the established fast-paced gameplay with multiple play modes, while retaining a unique element that differentiates it from the existing Shopee games.
Before Shopee Pets existed, Shopee Games team had entertained the idea of a cooking game. It's fun, has a low learning curve, and matches our demography. But it never kicked off. Why?
One, because it would've been another level-based game. At the time, Shopee already had 3 level-based games: Shopee Candy, Shopee Bubble, and Shopee Tebak Kata. They had a very large player base and require significant resources to maintain.
discovery
Goals
Each stakeholder has their respective problem statements and goals:
Constraints
Proposed Solutions
exploration
Benchmarking
Business, User, and Design solutions are straightforward enough. The Product solution, however, brings us to the challenge: How might we design a unique arcade experience that emulates the joy of progress found in level-based games?
I did a competitive benchmark study covering various mobile cooking games and shared the findings with the product team. The focus areas are game progressions as well as unique game elements.
We combined competitive benchmarking and whiteboarding sessions to solve the progression system.
We found that score bars were common in cooking games, often represented by a set of star milestones that determine the rewards earned at the end of a level. As for unique game elements, there are many examples: from dynamic kitchen layouts, varying customer preferences, and special occurrences.
That's when I had a light bulb moment: Take these concepts, and put our own spin on it.
"VIP" Customers
In fiction and games, the term "boss" is nothing new. Harry Potter faces a new villain boss every year. Hawke from Dragon Age II fights a new one at the end of each act. Many games have boss encounters after players accumulate some progress. With that comes the giddy anticipation as they get closer.
Back to the star milestones. What if, instead of stars, we called it "boss" milestones? Or better yet: VIP milestones?
Wireframe Mockups
With gameplay mechanics and product requirement set, I began creating the wireframe mockups and designing the screen flows. I also created a simple Figma prototype to showcase the basic gameplay so the team could see it in action.
Wireframe mockup on landing page with different entry points to different game modes
Wireframe mockup on kitchen layout progression per round with different food themes
A snippet of user flows covering scenarios of overcooked food, VIP customers, and losing customers
Figma prototype on how to serve a customer
This prototype helped engineers build a demo in Cocos game engine featuring all 3 rounds, focusing on gameplay, interactions, timing, and whether the kitchen layout works. UI and visuals were left unpolished as they were not yet the focus.
We shared the demo internally to gather early feedback. Overall, the gameplay experience was deemed good enough (many were excited whenever the "Incoming VIP" sign appeared), with minor adjustments for timing and tapping interactions when serving a finished order.
iteration
Final Design
With the gameplay flow, timing, and interaction finalized, I began polishing the UI. It was a pretty straightforward process since Shopee Pets already has an established design style with flat, bright colors, cell shading, and visible outlines.
Illustrations, background images, and stylistic icons were created by our 2D artists. As product designer, my job is to review these assets, especially the cooking stations and ingredients, to ensure they look clickable and fit together well on mobile screens.
Landing page entry points for different play modes: Free, Ads, and Paid
Gameplay, popup, and result screen
Guided tutorial screens for first-time users
For handoffs to engineers, I made design annotations for key gameplay components, as well as collaborated with the product manager to fill in the asset checklist. Throughout the development process, we also conducted play testing for more feedback.
Design annotations on Figma
Filling in the asset checklist; nothing must go unlisted!
evaluation
Impact and Performance
Shopee 12.12 Birthday Campaign
With positive user sentiments, marketing teams from other countries were interested. Cook King was launched globally during Shopee 12.12 Birthday campaign in 7 countries: Indonesia, Singapore, Malaysia, Brazil, Thailand, Taiwan, and Vietnam.
In the spirit of the birthday campaign, the design team re-skinned the game from Noodle theme into Cake theme.
Comparison between the BAU (business-as-usual) Noodle theme (left) and Cake theme (right)
Organized Asset Library
The tremendous variety of game assets and the opportunity for new food themes in the future calls for a Figma asset library. With this, all asset variants are properly organized with easier time in switching components or re-skinning themes in the future.
A snippet of the asset library in Figma
key takeaways
Embrace the opportunity to gather your resources.
When faced with a challenging task, in this case adapting level-based mechanics into an arcade gameplay, knowledgeable product designers can leverage diverse resources to solve the problem.
An organized design documentation goes a long way.
Game projects that involve numerous assets should be meticulously organized, especially if there's a possibility of re-skinning down the line. Creating the asset library simplified switching between themes for each game component and maintaining organized design files.