Redesigning Experience
of Vending Machine.

Improving sales and enhancing experiences of interactive vending machine from the biggest dairy product company in South East Asia

UX Design

Co-Design

User Research

Game Design

D2C

Client

PT Ultra Jaya Tbk

Company

Labtek Indie Bandung

My Role

UX Designer,
Lead Researcher

Time Frame

3 sprints + 1 extra sprint 1 sprint = 2 weeks

Platform

43-inch Touch Screen

Stack

Unity 3D

Tools & App Used

Adobe Illustrator
Adobe Photoshop
Unity 3D

Time Frame

2019 - 2020

Summary (TL;DR)

Problem

Vending machine from PT Ultra Jaya need to be updated, to increase sales and enhance it engagement and interactivity among their customers. The old vending machine had several problems.

Solution

  • New UI, new Mini-Game
  • Package bundling sales
  • Optimized product view, cart and payment flow
  • Can transaction with old new banknote

My Role & Collaboration

My role as UX Designer starts from co-facilitated the Co-Creation session, led the research, synthesize and translate into the design concept and flow. While the UI Design was helped and designed by Art Director and Graphic Designer.

What I Did

  • Redesigned and optimized flow of product view, cart, and payment
  • Designed and created UI Kit and guidelines
  • Provided and directed sound effects (SFX) and background music (BGM)
  • Led User Research

Background

About Project

PT Ultra Jaya

About Labtek Indie

"Dragon Balls" Product Development Framework from Labtek Indie
"Dragon Balls" Product Development Framework from Labtek Indie

Labtek Indie is a research, design, and development company for technology-related products through a human-centered design approach based in Bandung. Since 2012, Labtek Indie has helped clients from various industries innovate and improve their business through products, which has high value for their organization. Labtek Indie has a battle-tested framework for product development, derived from Design Thinking, User-Centered Design, and Agile Software Development methods. We called it the Dragon Balls framework because the balls and look like Dragon’s Ball in the anime Dragon Ball Z. 

The Challenges

Project Phases in Vending Machine Ultra Jaya
Project Phases in Vending Machine Ultra Jaya

Since I joined this project from the 2nd Co-Creation workshop, not from the beginning (I missed Co-Creation #1 and Sprint #1 and Usability Testing session #1), I understood this is a big challenge for me to maximize my involvement and part as the UX Designer at the 2nd Co-Creation session.  

At the moment PT. Ultrajaya Milk Industry Tbk. is in need to provide a vending machine installation for Ultra Milk, in order to attract a specific target market, which is: Mother with children of 6-12 y.o.

Another challenge is the game developer’s role. At the end of Sprint #2, our 2 game developers decided to stop their tenure in this project, even though we were in the middle of the development, just one sprint only, And also we found very intricated because only one animator had been booked for another project

Co-Creation

To start the project with a clear understanding, in Labtek Indie, we proposed a Co-creation workshop as a kick start event to define the right problems. We divided the participants into 2 groups. 

In this Co-Creation workshop, I have the responsibility as co-facilitator with a participant role on behalf of Labtek Indie, as UX Designer, an advocate for users of vending machine

#1 Progress Review

Co-Creation begins with Progress Review which means examine existing development progress in Sprint #1 before and recent feedbacks from users after Usability Testing #1.

After participants have given all the feedbacks, each participant writes their feedbacks on the post-it and starts grouping/categorizing their post it. This is an important phase because give clarity about what kind of feedback that has been made, to help participant know the context of the feedback.

Co-Creation - Story Mapping Feedback

#2 Generate User Story

Based on the feedback, each participant ideate what kind of user stories can be made to solve the issue.

In this phase, each participant has a chance to give voting on what kind of user stories that important to solve for the next prototyping. By knowing each participant’s opinion about the urgency of the prototype, it helps for time to decide what kind of prototype that needs to be made.

All the user stories will become a reference for prototyping in the next session, and also can be used for the Product Owner to generate backlog in the next sprint.

vmuj-userstories-cocreation
selected-user-stories-2

#3 Ideation

After generated the user stories, each participant ideates their selected (most voted) user stories using the Crazy 8 method, by sketching use pen and paper. All participant write their ideas into 8 sections of a paper and give a chance to tell their own ideas. 

This session is important to give insight to the team on what kind of prototype can be made.

Crazy 8 based on selected user stories

#4 Prototyping

At this phase, participants had to implement their ideas into tangible media so that what wanted to be conveyed can be demonstrated through interactive media that end-users can experience.

Participants were encouraged to make a meaningful prototype instead of a beautiful prototype.

Co Creation Tools

#5 Testing & Feedback

At the end of the 2nd Co-Creation session, we organize a Role Play session with the involvement of the participants to present and do role play on the prototype.

In order to give valid feedback, participants were welcomed to ask and give feedback for the prototype as insight for the next iteration.

Feedbacks are eventually being reformated to become additional User Stories.

Documentation

The Process

Remap the User Flow

When Sprint #2 began,
I am as a UX Designer have a big responsibility to lead the design and development process.  And after Sprint Planning Meeting (SPM), I created a User Flow as an anchor and north star to begin this development. 

Optimized Flow of Vending Machine Ultra Jaya
User Flow

Sketch-storming

And also did some brainstormingwith sketches (we called it Sketch-storming) to communicate the ideas with Art Director, Graphic Designer, Animator, and Game Developer. This is to make sure every single person in this project at the same page and knows the sequence and priority of what to be designed and developed.
Sketch-storming 2
Sketch-storming

Directing Animation, SFx & BGM

Another challenge is the game developer’s role. At the end of Sprint #2, our 2 game developers decided to stop their tenure in this project, even though we were in the middle of the development, just one sprint only, And also we found very intricated because only one animator had been booked for another project

Interaction and Animation Mapping (in Bahasa)

User Research

After Sprint #2, we conducted Usability Testing to address usability and task completion issues. As a Lead Researcher, I was helped by Izhar (Art Director) and Bagung (former UX Designer) as Co-Researchers to focus on taking notes, documentation, and feedback gathering. In this research, respondents recruitment, and place accommodation had provided by Labtek Indie, and the incentives provided by the client, PT Ultra Jaya. We invited 5 respondents with specific characteristics from a male student, mom with kids, and worker woman, and also involved the client as respondent in this research.  After outlining a testing plan in a Module Research consisting of 2 scenarios, the 1st scenario is transaction only (without playing mini-game), the second scenario is, end-to-end flow. At the end of every session, we conducted a survey to address several issues and interviews at the end for gaining more feedback for the next iteration.

Assumptions

  • When using a vending machine, people prefer new experiences rather than familiar ones
  • People prefer direct purchase without playing game
  • Vending machine placement is not big concerns

Research Goals

  • Identify potential users and target market
  • Identify frustrations, motivations, and goals from transaction experience
  • Identify the pattern of vending machine usage
  • Identify the user trend to transaction only (1st scenario) and to experience new mini-game and surprise that we proposed in this development (2nd scenario)

Research Findings

100%

of participants could buy product and completed transaction using the vending machine

90%

of participants found the mini-game and surprise in this vending machine is very attractive.

Feedback and Takeaways

  • Most people in this study have been transacting using a vending machine with another brand before
  • Most people in the study don’t transaction on the vending machine for the last 1 month
  • Product pricing in the vending machine feels rights, cheaper than the retail price.
  • Many users prefer less clutter on the screen,  and clearer product information.
  • Users prefer more little gimmick interaction and animation appropriately placed in the bottom screen or on the left/right edges that don’t compete with the main content.
  • Common most important features: add hints and guidance (coach mark) in every screen

Documentation

User Research Vending Machine Ultra Jaya
Usability Testing Session - User 1
Usability Testing Session - User 5
Usability Testing Session - User 5
Usability Testing Session - User 5
Usability Testing Session - User 4
Usability Testing Session - User 4
Usability Testing Session - User 4
Usability Testing Session - User 3
Usability Testing Session - User 3
Usability Testing Session - User 3
Usability Testing Session - User 2
Usability Testing Session - User 2
Usability Testing Session - User 2
Usability Testing Session - User 1
Usability Testing Session - User 1

The Final Design

Updated User Flow

Another challenge is the game developer’s role. At the end of Sprint #2, our 2 game developers decided to stop their tenure in this project, even though we were in the middle of the development, just one sprint only, And also we found very intricated because only one animator had been booked for another project

UI Kit

Another challenge is the game developer’s role. At the end of Sprint #2, our 2 game developers decided to stop their tenure in this project, even though we were in the middle of the development, just one sprint only, And also we found very intricated because only one animator had been booked for another project

Enhanced Design Style and Fidelity

Another challenge is the game developer’s role. At the end of Sprint #2, our 2 game developers decided to stop their tenure in this project, even though we were in the middle of the development, just one sprint only, And also we found very intricated because only one animator had been booked for another project

Package Bundling: a Business and UX Strategy

Another challenge is the game developer’s role. At the end of Sprint #2, our 2 game developers decided to stop their tenure in this project, even though we were in the middle of the development, just one sprint only, And also we found very intricated because only one animator had been booked for another project

Prototype

We began Sprint #3 by doing an internal co-creation session with key people in the Scrum Development Team to synthesize the output of the previous User Research, the participants are Me (UX Designer, Lead Researcher), Bagung (Co-Researcher), Izhar (Co-Researcher and Art Director) and Fakhri (new Game Developer). In Sprint #3 we focused on feedback and results of User Research.

Retrospective

Learnings

Usability testing is needed to validate our design, regardless of the budget, project size or timeline, even if we can only conduct a small scale test among team. 

Kudos

Kudos to VMUJ Project Team:
Erdry Suryadharma (Product Owner), Adriana ‘Enge’ (Scrum Master), Izhar Fathurrohim (Art Director, Graphic Designer, Co-Researcher), Alain ‘Apeng’ Bunyamin (Graphic Designer), Permana ‘Per’ Handiyuda (Animator), M. Fakhri Ridho (Unity 3D/Game Developer), Alamanda Hindersah (Copywriter)

to other Labtek Indie Team:
Bagus Agung (Co-Researcher, UX Designer in Sprint #1), Tantri, Wigy, Mbak Mel