Group 1 (2).png

Role: Visual Designer working with the Lead Designer, Game Designer and Developers designing a system from start. Helping to develop a new, refined UI development process for new games in the studio. Designed visuals and user interfaces for new game concepts and features, including user flow sketches, wireframes and visual polish.

Project Overview

 

Dots is a mobile game company specialized in making beautiful and minimalistic games that is now focusing on building their next big franchise in the mobile games industry. I was part of the New Games Team, helping develop UI processes, performing UX research and creating high fidelity prototypes together with other visual designers, engineers and project managers. Our focus project is a fashion merge game, joining together the fun of dressing up with the relaxation of this new type of mobile game called merge, a subgenre of puzzle games – the most profitable mobile game genre –  that attracts over 10 million new users per month.

1. Narrative Feature

1.1 "Texting" Narrative

 

During the game, the user would encounter several different other characters and have a conversation with them that would move the plot forward. I was responsible for developing this feature using the already existing UI style the company has for games in development stage. This first type of narrative to appear needed to be clear and simple, mimicking what the experience of texting is in other utilitarian apps, but still feeling fun like a game. We needed to give options to the player to choose different types of answers if the plot allowed them to. 

Wireframes

Screen Shot 2022-01-03 at 2.43 1.png
Screen Shot 2022-01-03 at 2.43 2.png

High-Fidelity Prototypes

Finalized Screens Prototype

Screen Shot 2022-01-05 at 10.33 1.png

Simple UI

We wanted to ensure the gamer knew what was happening and how to interact with it, as this was a well-know type of screen, but with a twist: You get pre-filled texts and have the option to choose which of them to use. We kept the options side-by-side to ensure both would have the same visual weight.

PORTFOILONarration_HOMEtoTEXT_transitionFULLV2.gif

Clear Feedback
 

For the interaction design focus, I wanted to make sure the user knew when to take action and when the conversation would be over or not.

Interesting Transitions
 

Made sure to design the transition from home page to chat seamlessly, having the idea of a (placeholder) phone vibrating first, then the whole screen emerging from it.

1.2 "In- Person" Narrative

 

This second type of narrative were to show characters speaking  to each-other "in-person". After doing competitive analysis with other mobile games with narrative, I arrived at these options:

Wireframes

image 2.png

Finalized Screens Prototype

Engaging Narrative

Keeping the text balloons short and bouncy, we can make this static scene a lot more engaging and interesting. 

GIF_Narrativeinperson.gif

Full-Body Characters for Full-Body Outfits

 

Fashion is the main theme of the game, and dressing your character for these narrative situations is the main goal. We decided to keep them full body, so you could see your full outfit in it's whole glory.

More Than 1 Person at a Time

 

Another fun challenge of this screen is how we would portray a conversation with several characters at once. 

2. The Gacha System

2.1 The Gacha "Pull"

 

"Gacha"is a common system of pulling randomized items for a price you pay ahead in games. The idea is to give the player a chance to gather collectibles, special items and the likes. We wanted to keep the metaphor fun and within the theme of fashion and going out with friends, so I thought it would be a good option to make it look like you were receiving texts from friends in your phone. After a couple of iterations, we arrived at this:

Flow - Storyboard Sketches

image (19).png

Iconography Studies

Group 3.png
Screen Shot 2022-10-20 at 3.39.58 PM.png

Chosen Icons Moving Forward

Screen Shot 2022-10-20 at 3.40.33 PM.png

High-fi Screens

Screen Shot 2022-10-20 at 3.43.22 PM.png
2.2 Collectibles Screen

 

Keeping the metaphor, I decided on a collectible screen that looks like a contact list on your phone, also with a + New button on top, pulling the user back to the gacha screen.

Hi-fi Wireframes

Final Screen

Screen Shot 2022-10-20 at 3.50.15 PM.png
Screen Shot 2022-10-20 at 3.50.15 PM.png
Screen Shot 2022-10-20 at 3.52.03 PM.png

3. User Flows

3.1 Completing a Task Flow

To complete a chapter in the game the user must purchase new wearable items and style their character according to the situation they are provided - each item is called a Task in-game. I was responsible for the "paperdoll" screens, where you can see all the categories of clothing items you need to fill out in order to complete your outfit and chapter. After several moderated tests we arrived at this following flow:

Different Flow Tests

 

Through unmoderated tests, we were able to decide on which user flow was best for purchasing a new item. Here we can see a couple of different paths the user could take.

The most viable and positive flow was the "Pay Per Item" path. It was easily understood how much each item would be, didn't overload the user with too much information at a time and made possible for changes in the future that could be easily implemented by the engineers if necessary.

Decided Flow for Purchases

Screen Shot 2022-11-23 at 1.34.38 PM.png
image 5.png

Iconography

Screen Shot 2022-11-08 at 2.26.16 PM.png
Screen Shot 2022-11-08 at 2.26.16 PM.png
Screen Shot 2022-11-08 at 2.26.16 PM.png
sparkdarklight.png
FNF - Paperdoll - Home Screen - Ch 4.png

Retention of people using the game after implementing the "Paperdoll" feature increased to 50% at D1. Higher in comparison to previous market tests by up to 20%.

3.2 Completing an Order and Level Up Flow

Developed this prototype to show what happens when the user completes an order in the mergeboard and gathers enough XP to level up. 

Interaction Challenge

The Interaction design challenge of this flow was to make sure each item was legible and in the right order to not be overwhelming. Can the user understand what is happening?

GIFVERSIONLevelUpfullFlowFromCompletingTask.gif

The Right Timing

Inherently merge games can be very overwhelming visually so I wanted to make sure that the user's attention was in the right space, at the right time.

4. Takeways

 

My time working at Playdots was beyond fun and insightful. Never had worked in games before, I very much enjoyed the challenge of creating such busy screens that were still legible and enjoyable to interact with. Moving away a bit from utilitarian designs and working with playful features taught me to keep me on my toes and always make sure the focus is on the right space. I can't wait to apply these learnings to my next adventure. 

. But wait - there's more!

Management app for the animation industry

Touring app for art museums

Daily UI challenges

. reach out on

. reach out on

logoforothermedias_insta.png
logoforothermedias_insta.png
logoforothermedias_linkedin.png
logoforothermedias_linkedin.png