Timbre 🎵
Timbre 🎵
Breathing new life into the Timbre app
Project Overview
Project Overview
Timbre Group aims to support and develop musicians and culinary talents, and has created unique F&B concept venues such as live music restaurant-bars/hawkers. Nonetheless, the Timbre app leaves much to be desired in terms of UX and UI.
DURATION
Apr 2024 - May 2024
TOOLS
Figma
ROLE
UI design, brand design
TEAM
4 designers
Background
Background
Background
Timbre Group owns 4 key venues that serve as an intersection between food and music, in particular, patrons are able to enjoy live music from local artists while dining at Timbre+ One North and Timbre+ Signatures.
Timbre Group owns 4 key venues that serve as an intersection between food and music, in particular, patrons are able to enjoy live music from local artists while dining at Timbre+ One North and Timbre+ Signatures.
Timbre Group owns 4 key venues that serve as an intersection between food and music, in particular, patrons are able to enjoy live music from local artists while dining at Timbre+ One North and Timbre+ Signatures.
Timbre+ One North
Timbre+ One North
Timbre+ One North
The Group released a companion app that allowed users to get discounts, make payment, receive announcements, see their transaction history, check live music schedules, and send song requests.
Nonetheless, the app has a dismal rating of 1.65/5 stars across App Store and Google Play, citing issues with its features.
The Group released a companion app that allowed users to get discounts, make payment, receive announcements, see their transaction history, check live music schedules, and send song requests.
Nonetheless, the app has a dismal rating of 1.65/5 stars across App Store and Google Play, citing issues with its features.
The Group released a companion app that allowed users to get discounts, make payment, receive announcements, see their transaction history, check live music schedules, and send song requests.
Nonetheless, the app has a dismal rating of 1.65/5 stars across App Store and Google Play, citing issues with its features.
Evaluating the current user journey
Evaluating the current user journey
The current user journey consists of four key actions: landing on the app, topping up the wallet, scanning to pay for food, and dedicating songs.
The current user journey consists of four key actions: landing on the app, topping up the wallet, scanning to pay for food, and dedicating songs.
The current user journey consists of four key actions: landing on the app, topping up the wallet, scanning to pay for food, and dedicating songs.
01 / Landing on the app
POOR INFORMATION HIERARCHY
01 / Landing on the app
POOR INFORMATION HIERARCHY
The user lands on the home page and is immediately greeted with a card displaying static discount information that cannot be hidden, which also happens to take up 60% of the screen.
Instead, the main CTA (scan-to-pay) is hidden below the fold.
Announcements that are actually important (e.g. venue closure) are hidden within the Notifications tab.
The user lands on the home page and is immediately greeted with a card displaying static discount information that cannot be hidden, which also happens to take up 60% of the screen.
Instead, the main CTA (scan-to-pay) is hidden below the fold.
Announcements that are actually important (e.g. venue closure) are hidden within the Notifications tab.
The user lands on the home page and is immediately greeted with a card displaying static discount information that cannot be hidden, which also happens to take up 60% of the screen.
Instead, the main CTA (scan-to-pay) is hidden below the fold.
Announcements that are actually important (e.g. venue closure) are hidden within the Notifications tab.
02 / Topping up wallet
POOR AFFORDANCES, POOR INFORMATION HIERARCHY
02 / Topping up wallet
POOR AFFORDANCES, POOR INFORMATION HIERARCHY
Users are led to think they can only top up in fixed amounts (min. $10), but they can actually enter any amount above $0.01.
Walls of text makes it hard to identify key points in the instructions.
Users are led to think they can only top up in fixed amounts (min. $10), but they can actually enter any amount above $0.01.
Walls of text makes it hard to identify key points in the instructions.
Users are led to think they can only top up in fixed amounts (min. $10), but they can actually enter any amount above $0.01.
Walls of text makes it hard to identify key points in the instructions.
03 / Scan to pay
NO ERROR RECOGNITION AND RECOVERY
03 / Scan to pay
NO ERROR RECOGNITION AND RECOVERY
Scan-to-pay requires camera permissions to work, which is not explained to users. They are simply greeted with a black screen.
When making payment, users cannot confirm their order as money is deducted right after scanning the QR code.
Scan-to-pay requires camera permissions to work, which is not explained to users. They are simply greeted with a black screen.
When making payment, users cannot confirm their order as money is deducted right after scanning the QR code.
Scan-to-pay requires camera permissions to work, which is not explained to users. They are simply greeted with a black screen.
When making payment, users cannot confirm their order as money is deducted right after scanning the QR code.
04 / Dedicate a song
INEFFICIENT TO USE
04 / Dedicate a song
INEFFICIENT TO USE
Song dedications are a way for the live band to engage diners, yet this feature is hidden.
The form to dedicate a song is mundane and visually boring to fill out.
Song dedications are a way for the live band to engage diners, yet this feature is hidden.
The form to dedicate a song is mundane and visually boring to fill out.
Song dedications are a way for the live band to engage diners, yet this feature is hidden.
The form to dedicate a song is mundane and visually boring to fill out.
Problem Statement
How might we enhance the dine-in experience at Timbre to be seamless and more pleasurable for experience seekers?
Aligning the brand visuals with its mission
Aligning the brand visuals with its mission
01 / The colour inspirations
01 / The colour inspirations
Analogous colours from the colour wheel that represent Creativity, Passion, and Food.
Analogous colours from the colour wheel that represent Creativity, Passion, and Food.
Analogous colours from the colour wheel that represent Creativity, Passion, and Food.
02 / The permanent dark mode
02 / The permanent dark mode
Utilising pops of colour against dark background to mimic the atmosphere of live music dining spaces.
Utilising pops of colour against dark background to mimic the atmosphere of live music dining spaces.
Utilising pops of colour against dark background to mimic the atmosphere of live music dining spaces.
03 / The gradients
03 / The gradients
Blend of colours to represent the coming together of passionate local talents in the food and music scene as the core of the Timbre Group brand.
Blend of colours to represent the coming together of passionate local talents in the food and music scene as the core of the Timbre Group brand.
Blend of colours to represent the coming together of passionate local talents in the food and music scene as the core of the Timbre Group brand.
04 / The nitty-gritty — colour palette and typeface
04 / The nitty-gritty — colour palette and typeface
We generated different shades of each colour to use for different scenarios, and chose a clean sans-serif font for best digital readability.
We generated different shades of each colour to use for different scenarios, and chose a clean sans-serif font for best digital readability.
We generated different shades of each colour to use for different scenarios, and chose a clean sans-serif font for best digital readability.
The ✨ enhanced ✨ user journey
The ✨ enhanced ✨ user journey
Let's take a look at how the user journey has improved after our UI and UX enhancements.
Let's take a look at how the user journey has improved after our UI and UX enhancements.
Let's take a look at how the user journey has improved after our UI and UX enhancements.
01 / Landing on the app
01 / Landing on the app
PREVIEW OF THE BRAND EXPERIENCE
PREVIEW OF THE BRAND EXPERIENCE
Splash screen displaying culinary and music experiences
Glow in logo
Splash screen displaying culinary and music experiences
Glow in logo
Splash screen displaying culinary and music experiences
Glow in logo
EASY ACCESS TO THE THINGS THAT MATTER
EASY ACCESS TO THE THINGS THAT MATTER
Wallet functions easily accessible
Auto detection of venue
Display of relevant info in home page (e.g. like deals & upcoming events)
Wallet functions easily accessible
Auto detection of venue
Display of relevant info in home page (e.g. like deals & upcoming events)
Wallet functions easily accessible
Auto detection of venue
Display of relevant info in home page (e.g. like deals & upcoming events)
02 / Top up wallet
02 / Top up wallet
EASY AND EFFICIENT WALLET TOP UP FLOW
EASY AND EFFICIENT WALLET TOP UP FLOW
Pre-set top up amount options
Clear indication on the minimum and customisable top up value
Prominent 'Scan to Pay' function
Pre-set top up amount options
Clear indication on the minimum and customisable top up value
Prominent 'Scan to Pay' function
Pre-set top up amount options
Clear indication on the minimum and customisable top up value
Prominent 'Scan to Pay' function
03 / Scan to pay
03 / Scan to pay
CLEAR ERROR RECOGNITION, RECOVERY AND PREVENTION
CLEAR ERROR RECOGNITION, RECOVERY AND PREVENTION
Prompt for camera permissions
Order confirmation screen before payment
Prompt for camera permissions
Order confirmation screen before payment
Prompt for camera permissions
Order confirmation screen before payment
CLEAR TRANSACTION HISTORY
CLEAR TRANSACTION HISTORY
Clear visual hierarchy with colours and icons
Clear visual hierarchy with colours and icons
Clear visual hierarchy with colours and icons
04 / Dedicate a song
04 / Dedicate a song
INSPIRING MUSIC EXPERIENCE
INSPIRING MUSIC EXPERIENCE
Curated song recommendations
Auto populated search results
Curated song recommendations
Auto populated search results
Curated song recommendations
Auto populated search results
Added album cover visuals
Simplified form
View all song requests
Added album cover visuals
Simplified form
View all song requests
Added album cover visuals
Simplified form
View all song requests
PARTICIPATIVE EXPERIENCE
Ability to upvote song requests
Ability to upvote song requests
Ability to upvote song requests
