Jerome Villagracia | Product Designer, UX/UI & Art Direction
sugar-thumb.jpg

Sugar Mobile Game

 
RP_Logo.png

TWO DESIGNERS WITH ONE IDEA

My friend Alex (Another product designer) and I had an idea in 2013 for a simple mobile game based on the restaurant game where you side a sugar packet across a table and see how close you can get to the edge without falling. It was a very loose and rough idea, but never had the opportunity to work on it at that time, but in 2016, we finally kickstarted the project and began making our game a reality.

 
 

 
 

THE PROBLEM

How do two product designers who love video games go about creating a high-quality, fun and addictive mobile game with limited game development knowledge? This question became our biggest obstacle in our early stages of the game's development, and Alex and I tried solving this by learning the basics of Unity and the C-Sharp programming language.

THE SOLUTION

Although our programming capabilities hit a wall, we used our skills as product designers to push the user experience and game design to the best of our abilities. The most important factor was gameplay, and we went through several concepts of how the game should be approached. We made sure that fun and simplicity were always the main focus of Sugar.

 
 

 
 

COMPETITIVE ANALYSIS

We studied several mobile games to better understand the intricacies and nuances of game design. In our analysis, we noted the things we felt these games did well, and things we felt they did poorly. We realized that details such as sounds, particles and animations played a huge part in making a game feel solid and polished. Below are only some of the games we studied.

 

 
 

MAKING MOCK MECHANICS

We decided that because of our limited Unity and game development experience, we could tap into our animation background and utilize After Effects as a means to visualize our gameplay mechanic ideas.

 
 
 
 

 
 

FINDING THE AESTHETIC

We went through several explorations of visual design and art styles before deciding on one that we both felt confident in. The aesthetic we chose was very fun to work with, but it was also attractive to people we were sharing our project with.

 
 
 
 

 
 

USER FLOW

Although Sugar is a simple mobile game, we still went through the process of building the high-level user flow in order to visualize the overall user experience. This helped us pinpoint all use cases and scenarios throughout the game.

 
 
 

 
 

HI-FIDELITY UI & PROTOTYPING

Alex and I collaborated on the branding and game design for Sugar, including the character design and assets. We also placed a large importance on the user experience and gameplay mechanics, and I created the prototype animations for the developer to build from. All music and sound effects were created by me but Alex and I worked together on finessing the perfect sounds and music for the game.

 
 
Screen Shot 2017-03-02 at 1.31.53 AM.png
 
 

 
 

PROTOTYPING & DEVELOPMENT

We meticulously designed every single bit of interaction animation to help us communicate our ideas to our remote developer. We even made sure all the fine details in how speech bubbles would animate, the sugar particles, table transitions…etc., were perfect and matched our mock ups.

Our Developer would send builds and we would user test, log our feedback, build new assets and animations, and he would send us new builds again. This process eventually got to our current build, and we are narrowing in on a first release to the App Store and Google Play.

 
 
 
 

 
 

SCALABILITY & OTHER FEATURES

We have brainstormed several ideas to expand the game which include creating a plethora of fun, charismatic characters to play with, challenging obstacles, multiplayer functionality as well as an iPad version of the game.  Another large scale idea we have played around with is adding the concept of worlds to help build out this universe we have created for Sugar.