Mobile Shop

GamePoint | The Hague

Figma Prototype

GamePoint Bingo iOS

GamePoint Bingo Android

Role

Product (UI) Designer

Duration

4 weeks

Responsibilities

UI / UX Design, Prototyping, Flow

Role

Product (UI) Designer

Duration

4 weeks

Responsibilities

UI / UX Design, Prototyping, Flow

Introduction

The mobile store is a crucial component in GamePoint where users can buy coins and game subscriptions. Even though it was updated when GamePoint's mobile games were initially launched, there has been no further modifications since then. A layout update and new sale strategies needs to be added into an updated version of this feature.

In this project I worked by myself as a Product Designer. Delivering hi fi prototype in Figma, discussing with stakeholder and tech departments about the dependencies. All these are embedded in a Jira confuence page for cross departments to read and leave comments.

Previous version of the mobile shop

Deliverable

The following criteria for the new mobile shop:

Deliverable

The following criteria for the new mobile shop:

1. Sales needs to be more prominent

Sales are the biggest monetization of the mobile shop. In the old version the sale packages weren't clear for the users. In the new version marketing department needs to have more opportunities to promote sales.

1. Sales needs to be more prominent

Sales are the biggest monetization of the mobile shop. In the old version the sale packages weren't clear for the users. In the new version marketing department needs to have more opportunities to promote sales.

2. Sale dialogs

Sale dialogs needs to have more information where marketing can sell combined deals of various monetization packages. Currently the dialogs are only shown at the start of the app. These offers needs to be shown in the new mobile shop as well.

2. Sale dialogs

Sale dialogs needs to have more information where marketing can sell combined deals of various monetization packages. Currently the dialogs are only shown at the start of the app. These offers needs to be shown in the new mobile shop as well.

3. Coin information

Coin packages needs to be more clear, show not only the amount of extra coins that the user receive from sales but also the bonus amount for members.

3. Coin information

Coin packages needs to be more clear, show not only the amount of extra coins that the user receive from sales but also the bonus amount for members.

4. Membership level

Current version is not clear for the user what membership level they are and what benefits they have.

4. Membership level

Current version is not clear for the user what membership level they are and what benefits they have.

5. New sale items

The current version is not easily expandable for adding new sale items.

5. New sale items

The current version is not easily expandable for adding new sale items.

Wireframes during Discovery phase

Design Process

I started the project by creating wireframes and align all requirements with stakeholder.
Once it was clear I moved on to Ideation Phase where I started created UI Components for the mobile shop in Figma. These components were made from Assets that were in Unity Project used in-game. New and missing assets I created them in Figma using vectors.

Sales in new shop

Biggest requirement was to integrate sales packages within the new shop. In the old shop these sales packages only appeared during the apps first login.


Taking the most popular sales packages from design marketing team, I used these source files and recreated them in full screen variations and in-shop banners in Figma.

Existing marketing dialogs
redesigned dialogs for new shop. Sales banners are now also integrated in shop.

New features

Biggest change within shop was the coin packages where we had a lot of user feedback where it wasn't clear where the extra bonus coins came from. In the new version I added extra icons to show the extra percentages that has been added in the coin package. I made this view interactive so that when tapped, extended information would be shown.


One there is a coin sale, like the +75% extra coins in the example. The background would be changed to fit the sale package campaign. Extra notification is shown in the Coins tab as well as the coin packages in the coin page. The header will also be changed to fit the campaign together with a timer countdown how long this campaign will last.


Extra VIP information will be also be shown in the new shop. Here it will show the membership level of the user, as well as the extra shop benefits that the user has.

Delivery

A high fidelity prototype was delivered with documentation in Jira Confluence. In confluence the Figma prototype was embedded so that cross department can view and make comments. This page was further filled in by developers for technical requirements.

Delivery

A high fidelity prototype was delivered with documentation in Jira Confluence. In confluence the Figma prototype was embedded so that cross department can view and make comments. This page was further filled in by developers for technical requirements.