The Impetus of Monster Doctor

The Impetus of Monster Doctor

In the early months of 2018, I found myself in between client projects at Whamix. This was unusual, as Whamix usually kept me pretty busy. I was unsure how to spend the handful of days between the completion of my previous project and the start of the next. With the encouragement of the CEO, Sunil Shah, I spent the time developing an experimental game that sought to investigate the potential of unique genre combinations. I began my research by looking to existing mobile games, which provided an abundance of material to draw from, but I decided early on that I was most interested in types of play that prioritized thoughtful decision making and accessibility over more action-oriented and skill-based mechanics. Playing at the confluence of visual novels, doctor sims, and classic text adventures, the project evolved into an experience I named Monster Doctor.

The Monster Doctor overworld.

In Monster Doctor, you take on the role of a doctor providing illegal care to Monsters, creatures from an alternate dimension that have arrived on Earth through human experimentation and now live among us as second-class citizens. The game is split into three chapters, each starring a different Monster. The goal of each chapter is to navigate the web of social, political, and cultural contexts of each Monster’s circumstance before deciding if and how to provide care based on what you’ve learned.

My favorite media experiences have typically been the ones that concern themselves less with answers or authenticity and more with questions and subversion. This personal preference became something of a style guide and litmus test during development. The goal of each chapter became to motivate an earnest question through bizarre and sometimes funny circumstance. To this end, I tried to avoid defining success in Monster Doctor. While there are consequences to every choice you make in the game, every Monster’s story is designed to encourage contemplation and hopefully even reflection. For this to happen in earnest, it felt necessary to foster an environment in which the player wouldn’t feel judged for or scored on their behavior. Thus, narratively or mechanically speaking, the game does not consider any choice to be “right” or “wrong”. If at any point during development I felt like the writing was becoming too didactic (a tendency of mine) or that alternative interpretations were being boxed out, I would rewrite the chapter.

The Yarn file containing all the dialogue for the Monster intake phase.

While writing Monster Doctor, I was occasionally reminded of that Tolkien quote about allegory and applicability. He argued that allegory mostly functions to preserve whatever dogged beliefs the writer may hold, while applicability serves the reader, meeting them on their own terms through shared experience. I found this proposed framework useful while developing a game, ostensibly intended for all ages, that occasionally addresses prejudice, religious intolerance, and political violence, to say nothing of a premise based on restricted access to healthcare. I don’t mean that Monster Doctor doesn’t have things to say, just that I tried to lean away from the obvious metaphors, at least as much as a game about healthcare released in 2018 can hope to, in an attempt to preserve the emphasis on the player’s experience.

The Riddle Tweak during surgery.

Developing the look of the game, I wanted something bright and approachable that wouldn’t dissolve entirely into cuteness or nostalgia. I was aiming for a familiar palette while trying to avoid environmental or character designs that telegraphed (or could be recognized as telegraphing) how the player is supposed to feel. Eyes are cutesy-big and colors are super bright, but there are some weird characters occupying the world of Monster Doctor, and their designs are not typically indicative of their personality.

An early version of the Snurflop design had external intestines and other organs that dragged on the ground behind it.

In my effort to curb the cuteness of the art style, I pushed some character designs into pretty macabre territory, at least for a family game. Some Monsters feature quasi-grotesque body modifications and one creature was initially conceived as having no mouth, having evolved to absorb nutrients from the environment by dragging its guts on the ground. I later decided that this was maybe a little extreme and updated the design, a decision that later heavily influenced the story of that Monster’s chapter in the game.

So Monster Doctor is a bright, sometimes zany, mish-mash of tone and genre. It’s a messy, little experiment with the goal of creating a space for the player to reflect for a minute, if they want to, rather than just react. In that sense, the story that unfolds in the game kind of resembles the development process of the game; Monster Doctor is more interested and interesting in the journey, not so much the destination. Dang, I think maybe Tolkien had something to say about that, too.

The epilogue scene, featuring Ro, the robot assistant.

Monster Doctor is currently in post-production. We will announce its official release in the next couple weeks.

Branding with Material Design and Sketch

We recently worked on a Fortune 500 client project. Our initial creative brief was all about a mobile design solution. We started researching Google Material Design for the same. After some initial research, we liked what we were seeing.

 Theming with Google Material Design

Theming with Google Material Design

We decided to take on the challenge and design with Material system. As the creative director my first goal was to think about branding and visual hierarchy. I wanted to make sure that the client's brand was extended into this new system.

We asked our client to send us their branding guidelines and corporate identity manual. Three things that were important right off the bat where the fonts, colors, and visual structure. After studying their online presence and branding guidelines I created a brand extension in Sketch. It was important to get their entire color library and font library in one place so that when our designers start implementing the design they have only one place to go to for final brand input. We created a library in sketch with primary, secondary, tertiary colors as well as spot colors. We also added buttons, angles, and gutter spacing in our library.

 Our partial brand system applied to existing Roboto library.

Our partial brand system applied to existing Roboto library.

Since we are not privy to share our ongoing client project, we created an internal fictitious project to help illustrate our workings on material design.

 Color palette and type styling as seen in the above brand system image.

Color palette and type styling as seen in the above brand system image.

Typography on the web has been a bane of existence for designers. I have to say that I was pleasantly surprised when I came across the type system. This was exciting because now we could truly stay true to the brand and if needed we could add mobile specific typography into our new brand guidelines.

If you are a designer lucky enough to have worked in print and digital, there is one pet peeve, columns, gutters, and margins.  

I have spent many hours sitting next to a frontend engineer moving pixels around so that each item started at exactly the same distance. This caught my attention - Responsive layout grid.

With design systems spanning from a mobile device to desktop marketplaces and retail stores, adhering to standards across all platforms is crucial. I have to commend material design team for thinking about responsive design and making it part of their overall implementation. However, here is the caveat, while a great potential strength, layout and grid options are not a part of downloadable tools just yet. We had to go through all the available documents and create a custom layout and grid system in Sketch for our project. this was very painful and time consuming.

 Custom layout and grid styling in Sketch

Custom layout and grid styling in Sketch

For someone who is well versed in Adobe Suite, I do have some complaining to do. Working with the symbols in Sketch can be painful. And why is everything called a symbol? Editing type is not a symbol, editing an icon might be.

However, this might be a learning and growing pains problem and not a tool problem… but when you are working off of an existing library e.g. Baseline, as soon as you want to edit anything at all, you double click on the element and it opens a new window, here the toolbars are very complicated for simple edits. When you are in your design and want to make an edit, a new window opens up, in there you have to double click to make the actual edit, which means, yet another window opens up. And the toolbars on the right of the screen have words like Prototyping and Overrides, not very conventional design language. And nether is the actual editing within each section. You have to nudge and fine tune so many pull down options for one minor edit.

At the moment there is no support for any Adobe tools. I would like to see more cross pollination with Adobe Suite. In the long term, if this tool is aimed for designers this will be a factor.

 Entourage of levels within levels for one edit

Entourage of levels within levels for one edit

Would I encourage my design team to design with Material Design again, yes I would but the complex toolbar and not so efficient way to make edits does worry me. I understand that we are working in a responsive environment thus each element has to be independent and editable. But the number of layers within layers this creates, is a problem for me. I would have to add time in my design resource budget to account for client based theming. I do like the crisp look of the finished product and the accountability that things will look exactly as I had planned but at the end of the day I do see this as yet another tool in the ‘designers’ toolbox. Since we will be at the mercy of plugins, it will really depend on how Google Material Design, Sketch and other plugins can work with each other to bring us a seamless solution.

Whamix's Introduction to Google's new Material Design

Whamix's Introduction to Google's new Material Design

A few months ago we were presented with a challenge to create a detailed matching service. The route chosen was to match a human to a pet that truly fit their lifestyle needs in terms of data points that are often overlooked such as time constraints, training abilities, or monetary limits. The start of this work coincided with the release of Google’s new Material Design visual language. We jumped on the chance to create this matching platform using Google’s Material Design as it demonstrated a consistent and visually pleasing design language and we were intrigued by the tools it provided.

We then built Pet Story with Google’s Material Design and got to see first hands its strengths and current limitations. The result was something we were excited about.

 

Google’s Material Design uses Sketch’s plugin and library features to its fullest extent

Material Theme Page and Theme Editor

I’ve used plugins and libraries in Sketch before. They have always been incredibly useful for creating a unified design over multiple platforms and projects or exploring others’ UI breakthroughs. The Material Design plugin for Sketch is one of the most extensive systems I’ve seen so far. Honestly, it’s huge. There are hundreds of assets that are easily editable. Being able to use their theme editor to easily change the color palettes and typography is incredibly useful. Seeing these updates live in Sketch using their Theme Editor under the “Material Theme” page makes figuring out how all your design decisions flow together a rather nice experience.

Custom Libraries

While an extensive experience, these Material Theme edits are still limited. The Material Design website showcases their “Material Studies,” various examples of how the same platform can create a wide variety of sites and apps, with varied goals and focuses. While beautiful, some of these designs are not yet attainable. Rally in particular has a primary color theme that uses an additional 5 infographic colors. Easily adding these colors through the Theme Editor are not yet possible. Rally also showcases data tables, which are not yet available either, but should be in the future.

Another current limitation is paragraph formatting. While changing fonts is easy, changing their alignment, layout, and format is not. While frustrating for the nitpicky, this actually ensures that each design element is as readable as possible. This is fantastic for mobile design, you don’t have to worry about ensuring that you have the proper text size for your app, it’s built in. This is a limitation for desktop design, as the needs for layout and formatting are different. Sometimes a specific font needs a different leading to be as readable as possible. When you’re working with as much space as you are in desktop design, you need that flexibility.

There’s more to come as well. I’m sure that as google continues to update their plugin these libraries will expand significantly. When it comes to sifting through the many options they include a nice layout within their symbol library under “Material Components”, breaking down each subcategory for easy reference. Really take your time to look at these so that you aren’t overwhelmed when you try to look for what you need to insert from your symbol library.

 

Using mobile assets for desktop design

The Material Design plugin for Sketch has shown to be extensive and pliable, however it’s not done yet. The current iteration is obviously only for mobile design. Despite this and with quite a bit of edits to the library symbols, we were able to create a desktop website using material.io to create a design we were quite happy with. On their site, Material Design showcases how well their materials transition between mobile and desktop, but those assets don’t exist yet. To create our site design, I went in and edited all the the symbols based on the specs listed on their site to fit a desktop design. This took time, but having the specs listed made the process straight forward once I figured out that it was necessary. I imagine that future iterations won’t have this issue.

 

Google’s Material Design in the future

Google’s Material Design is currently a wonderful visual language with easily accessible tools for creating clear and aesthetically pleasing mobile UI. To create something that is truly unique and creative, or to even create something for desktop, takes a little bit of elbow grease. However, this is an early version of the plugin and more updates are on the way.

In time, this may become an industry standard tool that makes creating apps and programs a streamlined and accessible process. Check out Google’s Material Design here!