Frame 5773.png

Supercell Store

UX Design of the first version of a Supercell Store experience. UX Design, User Testing.

 

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

■ ■

 

How can we leverage Supercell ID to contribute to the community, all while striving for increased autonomy from the Apple Store?

Problem

Given that we were encouraging COC players to shift their purchasing behavior from within the game to an external platform utilizing Supercell ID, it was important to ensure a seamless and straightforward experience.

Behaviour

 
unload.png
 
 

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:

  1. Evaluate if the flow enables smooth item purchases.

  2. Assess if the platform's purpose is clear to users.

  3. 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 ☻

 
UX Design Need For Speed

Lane Changers Club, cultural hub for the Need For Speed Unbound

UX Design | Web design

Designing for impact: helping women with daily discomfort, Unload App

UX Design | UX Strategy | UX Research | App Design