Supercell Store
■
■
■ ■
Overview
I collaborated with the North Kingdom Team to create the initial iteration of a Supercell Store. Within the team, I functioned as a Lead UX-er, with another UX Designer. My role involved overseeing wireframes, prototypes, and user testing of the initial prototypes of the Store.
The core inquiry addressed by Supercell Store is: How can we leverage Supercell ID to contribute to the community, all while striving for increased autonomy from the Apple Store?
Result
Launched the first version of Supercell Store with a primary focus on Clash of Clans core players, laying the groundwork for the subsequent expansion of the store to encompass other Supercell games in the following years.
Role
UX Designer, UX Researcher
Tools
Figma, Lookback
Duration
3 months
Responsibilities
UX Design, UX Research
Problem & Process
■
■
■ ■
User Scenarios
■
■
■ ■
In this example, we employed user scenarios as a valuable method to simulate realistic and specific user interactions with the store prototype. User scenarios help us understand how individuals might navigate the platform and engage with its features in various situations. By creating these narratives, we gain insights into potential pain points, user needs, and overall user satisfaction.
Key User Scenarios Explored:
As a core fun, I buy a gold pass bundle to gift the passes to junior players from my clan, I can help them progress faster.
As a Supercell Creator, I buy the pass to tell my followers about it and promote my creator code.
As a core fan with multiple game account, I got to Supercell Store to purchase a gold pass bundle and I accidently log in with the incorrect account.
Wireframes
■
■
■ ■
Home Page above the fold.
The home page primarily aims to guide core users efficiently. It introduces the new Supercell store, offering the gold pass bundle for game accounts. Users can easily purchase it with a click. Additional details about the gold pass and the store benefits are available upon scrolling for those seeking more information.
Home Page below the fold.
Below the fold, we share crucial info: the new "gifting passes" mechanic via Supercell ID, insights into the Supercell store, and answers to user queries wit the possibility to access more info on the Help page.
Checkout
Overview of the flow after user clicks on the CTA “purchase” from home page or product overlayers.
User testing
■
■
■ ■
We conducted internal user testing on the prototype of the store, focusing on key goals:
Evaluate if the flow enables smooth item purchases.
Assess if the platform's purpose is clear to users.
Determine if users understand what to do after making a purchase.
Key findings from testing informed iterative improvements to the final platform design:
All mobile and desktop users comprehended the platform's purpose as a Supercell Store for purchasing items related to Supercell games.
Users found the checkout process "Easy" or "Very easy."
Clarifying steps after redeeming passes for users.
Enhancing the visibility of the game names in the bundles.
Modifying the "return button" on the success page to "home page," for example.
What happened next?
■
■
■ ■
Since the first version of the project, Supercell Store has expanded to incorporate additional games, such as Clash Royale, Brawl Stars and Hayday within the platform.
Case studies
☻
Case studies ☻