EmoTea: Emotion-Based
Tea Ordering Vending Machine App
Overview
Developed a core feature for emotion-based tea customisation and order, implemented a reward program with free tea incentives and gathered user feedback and insights through user-testing and evaluation sessions.
My Role
UX Designer
Team
2 UX Designers and Low-code Developers
Scope
Low-Code, Functional app-based Prototype
Tools
Figma, LiveCode
Challenge
Create a UX-centric, functional tea-ordering app for a vending machine with a reward system using LiveCode.
Defining the target audience, user persona, user flow and logic of the reward system.
Execution
1. Research
1.1 Target Demographic
People who love tea and are regular tea drinkers but have a busy lifestyle like students and office workers in the education, healthcare, hospitality, and retail industries.
1.2 User Needs
Personalisation: Users seek a mood-based, customised tea experience.
Convenience: Users desire an easy-to-use, 24/7 accessible vending machine.
Variety: Users appreciate a broad selection of tea blends and flavours.
Rewards: Users value a loyalty program that recognises their regular patronage.
Clarity: Users need intuitive information flow.
Payment: Users prefer seamless payment option.
1.3 Personas
1.4 Emotions & Tea Types
Users are given 12 emotions to choose from and 18 different types of teas. The teas are categorised using research supported by numerous studies and various articles.
2. Design
2.1 Visual Identity
EmoTea’s UI, designed for a large self-service vending machine display, prioritizes legibility and navigability. The design considers large text sizes and button targets, inspired by a study on vending machines (Hagen & Sandnes, 2010).
Our color scheme, with a high contrast score of 8.04, surpasses WCAG 2.0 accessibility standards, pairing dark dune (#363336) and warm sand (#EECC75) hues, mirroring EmoTea’s logo. The dune signifies calmness, while sand exudes warmth, resonating with the brand’s positive identity.
For typography, Apple’s native SF Pro is used for familiarity, with unique FagoCoTf and Roboto fonts for the brand name and tagline, ensuring brand dynamism and distinction.
In the design process, two main challenges emerged: ensuring a “safe area” for the display size without individual customization. We choose to focus on accommodating the majority of our user base and reducing interaction steps to order tea efficiently.Â
2.2 User Flow Diagram
Users would interact with the EmoTea app UI in the following sequence.
2.3 UI Core Feature
2.4 UI Rewards Feature
3. Code
LiveCode was chosen as the development platform due to its ability to translate visual designs into functional applications seamlessly for a functional prototype.
Its ability to deploy standalone apps across various operating systems using a single code base, all while maintaining the integrity of the original design, was also an additional plus. Particularly important when we were programming on Mac and Window devices.
4. User Testing
Approach: Two participants tested the EmoTea app using the ‘think-aloud’ protocol.
Insights: Only two tea types out of 18 were visible on the subsequent screen (screen 3) after selecting an emotion. Users suggested a need for more detailed information on each tea.
Evaluation: Users said the app’s design was intuitive and visually appealing, but users wanted more tea variety. Users also suggest the app developed on LiveCode feels real and it successfully emulated the design into a working app.
Reflection
The reward system needs to accurately count transactions. For instance, if a user selects 2 cups of tea in a single transaction, it should count as two transactions in the reward bar, which we found the error after testing.
Future enhancements should focus on personalisation and customisation features like saving favourite teas and adjusting settings, alongside implementing a user feedback system for continuous improvement.