A game-app to entertain users and increase their engagement on online shops or services.

about

Playwin is a mobile application designed for gamification, offering users access to a variety of HTML5 games. It fosters competition among users, who can compete for special offers provided by online shops.


Journey

Competitor Analysis

Scenario

Paper Prototyping


Wireframing

Branding

Opportunity

Reversing gamification process!

Nowadays, people use their smartphones for shopping more than ever; online shops have understood this clearly and tried to increase user engagement as much as possible through various ways, one of which is through gamification and embedded games.

However, many of these gamification strategies merely target existing customers and attract a small proportion of them.

SOLUTION

Reversing the process: Playwin

Playwin focuses on entertaining people rather than selling products. The main idea is to provide a medium to enable users to compete through playing and obtaining scores in endless games. By doing so, not only do existing customers have a more meaningful experience, but also many more people would enjoy playing minigames in one distinct app by competing with others; furthermore, there is a higher chance to turn them into would-be customers.

Last but not least, people put a higher value on offers and discounts they achieve than discounts they are given.



Dynamic Game Addition

It's possible to add many prepared HTML5 games into the app without requiring users to update app repeatedly.


Computer man

Various Competition Opportunities

Users can participate in different leagues, and each league has its own start and end time.

Computer man

Detailed Information of The Competition

In each league page, players can see scoreboard, go to the game instantly, and also see the offers and the winning criteria.

Computer man

Top Players

Weekly and total top players with their playing times and achieved dicounts

Computer man

PROCESS

From idea to development

Although we observed many individuals enjoying minigames in various settings, such as during public transportation commutes or family gatherings, we aimed to ensure we were targeting a broad audience. We had an investigation to validate our approach and found the following results:


Approximately 40% of smartphone usage is dedicated to gaming, with the majority of players preferring casual minigames.


This investigation confirmed our decision to establish a connection between gaming and the shopping environment.

Competitor Analysis

Our target country was Iran, so we assessed the Iranian market. We found that there were only a limited number of online shops implementing gamification, particularly through games, but none of them targeted players directly. In fact, there was no reverse gamification strategy aimed at attracting more customers and increasing sales.

User Insights

My friend and I were the sole contributors to this project. It also served as my final undergraduate project, and as such, we were tasked with developing both the client and server aspects of the product ourselves. Consequently, we were unable to prioritize user surveys to gather extensive quantitative or qualitative data. Nonetheless, we conducted some preliminary inquiries and identified a key issue:



Based on the above notion, we decided to consider a limit for attempts each player in every league can make. This adjustment was made to enhance competitiveness and bring scores closer together, thereby encouraging more participation and engagement.


Additionally, we aimed to demonstrate to players that achieving top rankings didn't necessarily require an enormous time commitment. To accomplish this, we introduced a new metric called "Competition Level", which represents the average number of attempts made by top players."

Scenario

Considering our own ideas, market research, and gathering insights from everyday people, I described a situation that best describes the functionality of the Playwin:


1. Pooria is coming back from school.

2. Waiting for the subway, he's using his smartphone to play something.

3. Suddenly, he sees the Playwin icon and opens it to have fun with different minigames.

4. He enters one of the competitions and plays a few times.

5. Makaing scores and ranking in scoreboard excite him even if he doesn't win somthing since his intention was playwing.

6. Meanwhile, one of the offers or discounted products attracts him.

7. He clicks on the product link and goes to the shopping page.

Paper Prototyping

Before creating wireframes, I sketched the structure of the app on the paper since the context wasn't still clear enough and sketching on the paper was the fastest way to try more that one idea.

Wireframing

Branding and desgin principles

Deciding on a logo that best represented the app was quite challenging for me and the other designer. We went through several iterations before reaching a satisfactory result.

In the design, I incorporated green, a color often associated with money and luck, as well as orange, which symbolizes joy.

The green side of the logo symbolizes the concept of "Play," and the bottom part of the logo forms a 'W' shape, representing the first letter of the word "Win."



Furthermore, we aimed to make a game-app that's both fun like a game and easy to use like an app. So, I made special icons for the app to give it a playful, game-like look.


DEVELOPMENT

Fullstack dev and deploy

Software Documents

We created some models and diagrams before production to define entities and flows in the system. I brought two of them down below:


Class diagram


Sequence diagram of playing a game


Picking the right frameworks and tools

We chose React Native for making the app work on both Android and iOS. And for the backend, I went with Node.js since it's also in JavaScript, making development easier.



We were two friends on this project, so the extreme programming (XP) method was the best option for us. We chose VSCode editor because it has great extensions, and we could easily code on a remote server with SSH protocol.


For database, I used MongoDb that is a document-based database. It let me swiftly revise the structure and data. This was a great benefit over relational databases since made testing process much easier.


OUTCOMES

Opening of new ideas.

Possible Opportunities

Big online shops

The current concept is ideally suited for large online shops with diverse product offerings and an established customer base.

For instance, Digikala, the largest online shop in the Middle East, could effectively implement this idea. I have named this concept 'DigiGame.'



Converting into a platform

The existing idea can be transformed into a platform where online shops can register and gain access to a dedicated panel. This panel enables them to create and implement their own leagues. As a result, online shops can attract a larger pool of potential customers, while players benefit from a wider selection of competitive offers.


Potential Research Topic

As previously mentioned, we've decided to limit the number of attempts a player can make in a league to maintain competitive balance, while displaying the average number of attempts made by top players (Competition Level) to demonstrate that success is achievable with a modest number of tries.


By incorporating this limitation, we introduce an element of chance into the winning process. A potential user research avenue could explore whether this addition of a chance element enhances user engagement. Specifically, the research could investigate the extent to which this factor positively influences engagement levels and determine the optimal limit for attempts to maximize user engagement.


Personal Lessons

This was my first project, starting from an idea and ending with a working app. I improved my skills in backend server management, database structures, and design using Adobe Illustrator and Figma. I also learned how to maintain development documents effectively.


While I had some prior web development experience, I had to pick up a plethora of new technical skills throughout this project. From Git workflows to understanding web stacks, I tried to follow *proper* web dev practices even though it would have been easy just to slap things together.


While my current focus is in experience designing, having these programming skills in my back pocket will let me bring extra value to any team I join.

×
×
×
×
×
×
×
×
×