Name

Social Oddity

Tools used

Unity 2018, Perforce, Photoshop, Illustrator

Platform

PC

Role

UI/UX designer, UI scripter
level designer, product owner

Time

5 weeks

Team size

10

Contribution

UI/UX design
Level design
Pitch delivery
Stakeholder updates

Summary

Social Oddity is a point and click adventure game where you have to navigate a club to find your friend. Talk to the clubgoers, get to know them and get the password to the VIP.

Social Oddity was developed over 5 weeks at Futuregames. During the project my roles were UI/UX design, Level design and Product Owner.

Key Learnings

  • Working with and implementing 2D assets in Unity.
  • Communicating UX design decisions in a story driven game.
  • Working with Spine animations in Unity.

The Notebook

 The notebook is the main mechanic in Social Oddity.

It’s used to pick phrases and look at finished and unfinished missions with. I was tasked to create the overall design of it.

We needed a way to communicate to the player how they used the core mechanic of picking phrases in the game, as well as a way to tell the player what missions they had finished or still had left to finish.

 

 

The solution was a notebook that would show up on the screen whenever the player interacted with another character.

I chose a notebook as that felt like something that the player character actually could hold in their hand when conversing with other characters.

Flowchart of the Notebook

The flowchart for how the notebook would work. I decided that the player would always land on the phrases tab when opening the notebook as it was the most used tab.

We would have three different tabs which would consist of: Phrases, Missions and Options. This is the final flowchart for the notebook.

Prototyping the notebook.

 

Here is an early prototype of the notebook. After drawing out the first draft of the flowchart, I began to prototype it in Unity using the Animator. 

I made a mood board of several notebooks and landed on this prototype for the overall style, combining feedback from the artists and designers on what their idea of a notebook is.

Prototyping the buttons

These are the mockup buttons made for the game. To create the buttons I tried different books, an inventory but I wanted to try and keep it all in the same book. That is when I added post it notes to the book.

It felt natural after testing that they would be able to convey the feeling of buttons, as well as being a natural thing to keep in a book and follow the overall theme of the UI.

The Animations

This is the animation tree in Unity. I worked with the scripters to make sure it triggered the right animation at the right time.

The final product

After prototyping and iterating on feedback from playtesters and the designers in my team I took it to the 2D artist and worked closely with them to create the final product. We decided to animate the final product in Spine which I then set up in Unity using the SpineGraphic and Spine plugin for Unity.

Reflections

Thinking back to this project I’ve realized several things I would like to change and iterate on more.

The final graphical design of the notebook is one. It feels a bit rushed in its animations and the buttons do not feel clear enough. I would make the book a lot more sharp. The player should know where the boundaries of the text in the book are.

The animation when the books pages turn should give of a more vibrant animation. The text in the book and the post it notes on the sides do not change enough when the actual effects trigger. I also want them to have a more vibrant animation, to “oversell” the effect of it.