Coffee Talk is an interactive visual novel about listening to people’s problems and helping them by serving a warm drink out of the ingredients you have as a barista of a coffee shop. It is a game that tries to depict our lives as humanly as possible, while having a cast that is more than just humans. The game features visual aesthetics that are inspired by 90s anime, classic pixel art adventure games, and lo-fi chill hop music.
The goal during my internship is to help the Coffee Talk team’s development by improving the user interface, user experience, general usability of the game as well as gathering user feedback since the game was still in the early phase of development
- Tales of people around the alternative Seattle, a city where elves, orcs, mermaids, and other fantasy creatures coexist together with humans in a modern world
- Branching story lines where the decisions do not come from the dialogue options you choose, but through how you treat and serve the customers of your café
- 90s anime inspired pixel art visuals and chill vibes inducing color palette to help you immerse yourself in the game’s world
- Selection of jazzy and lo-fi music to accompany the late night warm drinks and talks activities
- An experience to make you think, feel, and help rest your body and soul
Ambience is an important aspect in a game that allows players to be fully immersed into the experience. When I played this game for the first time, I can already feel the cozy and warm atmosphere of this game from its title screen. Although I don’t usually play visual novels, the use of colors, the background music, and the opening scene really motivated me to try this game.
The best way to craft this atmosphere is through Color Psychology. Color influences human perceptions & emotions which can affect a person’s mental or physical state. However, keep in mind that colors might work differently for people from different culture and backgrounds.
Color Psychology builds up Coffee Talk’s ambience. Coffee Talk uses a brownish color palette that emits the game’s relaxing, warm, and casual atmosphere.
One interesting aspect of this game is the use of skeuomorphic interfaces. Skeuomorphism is a design of an object that inherits the physical appearance of their real-world counterparts. It was highly popularized as Apple’s design system during Steve Jobs’ era.
While skeuomorphism is considered outdated in interface design, as designs are moving toward flat and modern aesthetics, it is still prominent in games. The brewing system UI is one of the best uses of skeuomorphism in games that I would say is the main highlight of the game.
I love the aspect of taking ingredients from your cupboard into your coffee machine which emulates the experience of being a coffee shop barista who serves coffee to their customers. This interface allows more players to be more experimental in combining ingredients.
Suppose the system’s user interface is designed in a very practical, yet efficient manner: a drop-down menu that represents each component. Yes, it is more efficient and reduces cognitive load, but does it still emanate the “feel” of brewing a real coffee? Do you still want to experiment different kinds of coffee? Does it break the immersion of the coffee-making experience?
Before my internship started, the team had just received survey results from their initial feedback survey which was made on Google Forms. The initial feedback survey contains a lot of useful questions regarding each aspect of the game which includes writing, art direction, game mechanic, user interface, and music. The survey also asks what are their first impressions of the game, what they think & feel about the experience, and what improvements could be made for the following iterations.
Based on 27 respondents, I checked their initial thoughts about the game, their current difficulties with navigation, and their suggestions to improve the current existing user interface and experience design. I also wrote some notes about the aspects that can be improved when I played it for the first time.
In the following section, I will explain the design improvements during my internship based on the initial feedback survey.
Flow & Navigation
"The interface is okay, probably a little clearer direction on the brewing mechanism. I also had no idea what drink I just made”
In the first iteration of the brewing UI after you brew a drink, you have to select “Trash It” before you can brew another coffee. The problem you can see here is that most users will press the “Reset” button first instead of selecting “Trash It” on the right panel. This is caused by the lighting on the previous panel, which it seemed to look like it is still active.
In the second iteration of the brewing UI, contrast & brightness matters when determining the interactivity of an object. When the brewing session has just finished, I decided to dim the lighting on the previous panel to imply the “Reset” & “Brew” buttons are inactive. I also created icons to easily distinguish between choices and prevent mistakes in making choices. Micro-interactions are also involved when hovering on a choice, it will bounce once and the icon gets a bit larger.
To see what the players made after they brew a drink, I put the name of the drink as an indicator of the drink’s type. Thanks to our artist (Dio Mahesa) and programmers (Frederik Lauwrensius & Jovan Anggara), the brewed drink’s visual is also shown dynamically generated based on the ingredients used instead of one static image that is used for all drinks.
Customer Page in The Notebook
“The story needs depth and I want to know more about each character’s backstory. Would be great if I could keep track of my progress if it’s going to be a branching story”
The notebook is a feature where players can read recipes and learn more about the cafe visitors. When designing this feature, I asked myself: “What do the players want to know about a character?” When I meet a person for the first time, I want to know their name and their face. After recognizing a person, I want to know what they associate, specifically with their hobbies and interests. After I know them for a long time, I can learn about their backstories.
The name of the character is the title of the entry, followed by their portrait on the top left corner, their race, and their favorite things. There are 3 snippets of paragraphs of their backstory, which will be unlocked throughout the game if the player is consistently correct in brewing drinks based on each character’s request. This is useful to make the players feel motivated in knowing a character’s backstory. After planning the layout on Photoshop, the layout is ready to be implemented on unity.
On later iterations after my internship ends, the notebook is replaced by a smartphone, which allows players not only see recipes and customers, but also check the game’s current events with the News application and change the background music with the Music Player application. The customers are now presented as user profiles on a social media application.
“The controls at the beginning wasn't really clear”
The studio is currently planning to publish the game for multiple platforms: PC & Nintendo Switch. Maintaining an optimal, consistent, and ergonomic controls for different ports is very important. Since they are planning to release more ports in the future, I decided to create one universal controller interface instead of creating different controller images for each consoles. This interface can be found under settings for controller configuration where players can map the key layouts. If players are unsatisfied with the current controls, they can change it to their needs.
I also created a controller layout document that contains controller mappings of different consoles, which serves as a guide for the programmers to map these functionalities to each key of the controller.
Character Personality Variation
“There is not much variation on the characters’ personalities, would be more interesting if I could talk to different kinds of people in this game”
We had an issue in writing the story when the character’s personalities are too similar. My role during my internship doesn’t include being a writer for the game, but I could give suggestions on how to create a diverse cast based on their personalities. My suggestion was utilizing MBTI (Myers Briggs Type Indicator), a system of how people perceive the world and make decisions which is heavily based on the conceptual theory proposed by psychologist Carl Jung.
The Myers Briggs Type Indicator Scale (MBTI) might not be the best tool for identifying a real person’s personality type since it lacks identifying cognitive functions, but I find it as a great tool for fictional character creation. We created a table by mapping out each characters with their desired personality. It turned out to be a great approach in outlining different character personality types.
After mapping out each character’s personality, we decided to create an alignment chart where the characters are seen in a more general perspective from their emotional tendencies and decision making. This is a great approach to see a bigger picture of the characters’ personalities. You might ask why the characters who don’t appear in the demo are shown as silhouettes? The character designs & roles might change throughout the development, but eventually you will see them soon after the release date!
“Was very confused about what I was expected to do at the beginning, would have been useful to have some directions to the brewing station better.”
A tutorial system is useful for navigating new players to understand concepts of the game. A lack of tutorial would cause new players unable to play the game properly.
I have an idea of executing the tutorial as a diegetic monologue of the barista and pointers for navigating the buttons. A tutorial system that utilizes diegetic monologue would be perfect for this game because it retains the immersion through in-game narratives instead of a regular tutorial of how-to-do-tasks. Just for early-game brewing sessions, the recipe for the drinks are shown in a monologue as a “training wheel” for new players. Eventually, the recipes for all drinks are not shown in a monologue because experimentation is a part of the gameplay. Unfortunately, I couldn’t finish this task because my internship time is over.
“Talk about soothing games! Makes me feel like everything can be solved by combining the right ingredients into a warm beverage, & I want more!” “This was a cool game so far! Great job! It is really chill to play with a great premise! The writing, art style, and music all fit together nicely.” “This game is relaxing and has a great storyline about the characters and the city!”
Toge Productions was also invited to attend 4 international game conferences, including PAX West & Busan Indie Connect. Unfortunately, due to some circumstances, the game cannot be showcased this year. On the contrary, the game is currently participating as an entrant in Indie Games Festival 2019.
I am really grateful that I was working with a lot of friendly and inspirational people. I got the chance to apply my UX research skills and provide feedback for high quality upcoming games before they are released. I learned the best practices in creating a well-structured script organization in Unity, a technical art preference guide, and a comprehensive game design document. I also learned a lot about game development & production, not just in theory but also how the industry works.
"When it comes to building user interfaces in games, not only functionality or aesthetics come into play. It needs to convey an experience that fits the atmosphere with determined stylistic choices."