top of page

1010 Design System

1 January 2024

Group 23120.png
Property 1=10x10 Clean.png
Group 23186.png
Group 23119.png
Group 23116.png
Group 23116.png

My Role

Creating a 0 to 100 design system which would be used by Devs, Game Designers and UX Designers

Duration

September '23 - January '24

Context

1010! is a captivating puzzle game that combines simplicity with strategic depth, designed to entertain and challenge players of all ages. The game's minimalist design and intuitive mechanics make it easy to pick up, while the need for strategic planning ensures it's difficult to master. Perfect for a quick mental workout or engaging pastime, 1010! offers a delightful and rewarding puzzle experience. Dive in and see how high you can score!

Group 23119.png
Group 23119.png
Group 23119.png

We have to keep in mind that we are designing for

350,000+ Daily Players

Group 23133.png
Group 23186.png

Collaborative Dependencies

Post-Integration Testing

Repetitive Design Decisions

Inconsistent UI Elements

Context Erosion

Frame 41.png

Process

Now how do we go about creating a design system, which aims to assist all the UX designers, Game Designers, Artists and Animators working on the game.

UI Audit

To create an efficient design system that scales up to the entire game and allows for gameplay exploration, the first step is to document every screen in the game and break it down to it's last atom.

Research

After the UI Audit we started breaking down the screens and kicked off with the research on two key directions. Constantly keeping myself updated with the best practices and connecting with the stakeholders with the way the design system might affect them and understanding the problems which the design system would be able to solve.

Group 22749.png

Here I empathised with the stakeholders, and listed down the expectations of each function that collaborates with us, and how they would want information to be shared and documented. This activity also brought some of the problem statements to light.
 

Developers

  • Prefab Integration -Collaborative Prefab Structuring

  • Flow Documentation

  • ThemeID Management

  • File size optimisation

  • Integrating Rapid Figma prototyping with Build Prototyping for new game modes

  • Atlassing

  • Adhoc Changes Documentation and Plan

  • Table of component documentation

  • Updated and final Screens

  • Animation and SFX References

  • Functionality clarity on the flow

  • Guidelines for padding and spacing​

  • Experimentation

  • Toolkit for playtesting new game modes​

  • Reference with the requirement

  • Context setting - What screen would have the animation

  • Animation T-shirt Size

  • Existing animation collection​

Q.A.

Art & Anim

Game Designer

Currently the game expands across

43 Themes

Which consists over

150 ThemeIDs

Which crosses with

20 Tile Types

and needed us to modify 

900+ Assets

ezgif.com-animated-gif-maker (2).gif
StarlightThin.png

Foundation statement and core principles for decision-making

"Design systems are the North Star for designers, developers, and product managers, guiding them toward a unified vision of user experience."

Group 23134.png
Group 23111.png

1010 Design Library

A design library that  spans various components and layers, providing a comprehensive toolkit that enables quicker design iterations and gameplay testing.

TILES

ASSET SANDBOX

ICONS

COMPONENTS

PREFAB

TYPO

ANIM

ART

THEMES

Tile=2x2 Master Tile.png
Tile=1x1 Master Tile.png
Tile=1x3 Master Tile.png
Tile=1x5 Master Tile.png
Tile=1x4 Master Tile.png
Tile=1x2 Master Tile.png
Tile=3x3 Master Tile.png
Tile=LWedge.png
Tile=SWedge Master Tile.png
ezgif.com-animated-gif-maker (1).gif

The tile implementation has 7 separate libraries, which contain all the 43 theme assets. This expands to further component variables which are tile states and different feature impact states (Uno Tile, Power ups, Collection Event)

Group 23108.png

The design system aims to assist in reducing repetitive tasks and make designing faster, easier and more efficient for all. For this we made sure all the overlays in the game allowed the designer to recreate key user flows in a matter of few clicks.

movies_background.png
movies_background.png
movies_background.png

Themes

It was important to include the functionality for switching between multiple themes. This was achieved by merging the variable system and component variables to achieve both color and image impacted themes.

Events

A lot of the features in the game offer a seasonal asset change. This entire change is documented in a figma config and allows the Game designers to experiment different assets with the Art team with low UX dependency

What's more

The design system will expand to accomodate different spin offs and modifications for the game. The design system aims to be a toolkit for the designers across Zynga to innovate multiple new games with the ingame assets

As a newcomer to the team behind 1010!, a game with 20+ themes, several features under production. That's when the design system came to the rescue. It simplified everything, It streamlined everything into a pick-and-drop process while it still maintained consistency and made UI designing process more easier due to reusability and it definitely saved a lot of time!!

Sneha Pillai - Experience Designer

This design system is a beneficial tool, especially  for game line 1010,
Because it has 25+ themes in future, the Team might add more
this tool Saves a lot of time and effort for both the dev and UI/UX

Umer Faruk - Developer

kids_background.png
bottom of page