Get the latest Education e-news
 
  • Brewing Meaningful UX In Coffee Talk

    [11.01.18]
    - Adlan Arvyanda Ramly

  • For the following section of the article, I will explain the design improvements during my internship based on the initial feedback survey.


    Design Improvements:

    Flow & Navigation:


    First iteration of the brewing UI

    "The interface is okay, probably a little clearer direction on the brewing mechanism. I also had no idea what drink I just made"

    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.


    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:


    First iteration of the customer page, still not developed yet

    "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 actual first iteration of the customer page layout

    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 smartphone feature that replaces the notebook


    The customers are now represented as user profiles on social media

Comments

comments powered by Disqus