Role: Product Designer working with a cross-functional team in a trifecta model, designing a 0 > 1 project. Designed visuals and user interfaces for new game concepts and features, including user flow sketches, wireframes, prototypes 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. I was part of the New Games Team, helping develop design systems, 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.
0. A New Design System
0.1 Starting From Scratch
In order to faster produce new games and optimize our prototyping and testing, we developed a new design system for the New Games Team. Having it as a base, the UI kit we created was able to almost double our output: We could focus on usability and user experience first, but still have a good looking prototype to test with all kinds of audience. Making use of the "Appearances" feature on Sketch was key to our success in reproducing these styles easily.
0.2 Reusable Assets
Again, this would only be used in the prototyping with a focus on speed for testing. We made assets that could be used as a base and easily edited. With just a few changes you could toggle between extremes, like a Medieval Merge RPG to a Match 3 Fashion game.
Medieval Merge RPG
Match 3 Fashion Game
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
High-Fidelity Prototypes
Finalized Screens Prototype
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.
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
Finalized Screens Prototype
Engaging Narrative
Keeping the text balloons short and bouncy, we can make this static scene a lot more engaging and interesting.
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
.png)
High-fi Screens
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
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
Iconography
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?
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
