An App for the Loyal BreadTalker

What we desire to achieve

Started in 2000 with its first outlet at Bugis Junction, BreadTalk has risen to phenomenal success and is now a recognisable brand across Asia. Although still holding the majority share of the market in Singapore, there is now stiffer competition for Breadtalk due to new entrants into the market. In response to this, we aim to create a customer centric loyalty app to cement BreadTalk’s position as the market leader in Singapore.

Business Analysis of BreadTalk

Mission: Leading a new lifestyle culture with new, innovative changes and creative differentiation to craft products with passion and vibrancy

Vision: Establish BreadTalk as the foremost international, trend-setting lifestyle bakery brand.

KPIs: Product consistency, high standards and lively innovation in brands, globally competitive, growth in proprietary brands and franchise network, brand accolades

Competitors: Four Leaves, Prima Deli, Paul, Paris Baguette

Target audience: Middle income young working adults, homemakers and students.

Opportunity: Creating a loyalty card app with a payment function to satisfy the needs and pain points of BreadTalk customers. This app will allow customers to save time by conveniently completing their purchases quickly. Customers can also earn loyalty points by using the app to make payment and make redemptions for a variety of loyalty benefits.

Project timeframe and tools

Timeline: 100hours

Tools used: Sketch, Trello, Google Drive, Omnigraffle, Sketch, Principle, Pages, Keynote

Project Approach: Double Diamond Model for Product Definition and Execution


Competitive, Comparative & Feature Analysis

The F&B industry in Singapore is competitive and fierce. To measure up BreadTalk’s current practices, we identified 5 top apps in the F&B as well as loyalty programmes categories.

Key Findings:

  • BreadTalk is the only company without a Store Locator Platform.
  • An Account Management feature will be seriously considered.
  • Social Sharing is a minor functionality across all other apps.
  • Earning and Claiming benefits through our app will be an attractive competitive advantage.
Customer Surveys

An initial screener survey was sent out to qualify our respondents for followup interviews. The screen objectives are as follows:

  • To identify respondents who have patronised a bakery in the past month.
  • Understand how respondents decide on which bakery to visit.

Survey Findings:

  • BreadTalk is the most patronised bakery.
  • iOS smartphone ownership outnumber Android by 16.0%
  • The top 3 criteria for bakery patronage is Location, Price of products and Promotions.
Customer Interviews

7 in-person interviews were subsequently conducted (shortlisted from 70 survey respondents) using a preset list of questions and a 4-list method to understand key Pains, Pleasures, Contexts, and Behaviours of the bakery patrons.

Key Findings from the interviews helped to guide our feature creation for the app. Some key takeaways from the interviews are:

Interview Findings:

  • Customers must be able to complete their purchases fast.
  • Our Loyalty Programme should be hassle free.
  • Location and a Comprehensive Loyalty Programme is more important than the Prodoct Prices of the Bakery
Contextual Inquiry

On site observations were conducted across several different bakeries to observe how these patrons behaved and executed their own tasks.

Contextual Inquiry Findings:

  • Starbucks has an existing scanner system for both a physical and app-based card. This is something BreadTalk can emulate. Payment and redemption processes complete in less than 1minute.
  • Customers at the Breadtalk and 4 Leaves outlet usually have their cellphones on hand before entering the store and even when exiting.
  • Customers proceed to payment swiftly but have to join queues once there.
  • Customers fumble through their wallets for cash to make payment.

Insights and Analysis

Affinity Mapping

Key information from the users 4-list (Pains, Pleasures, Contexts, Behaviours) and interviews were affinity mapped to spot potential trends or groupings.

Potential features were then ideated from these groups:

Creating Personas & Problem Statements

Problem Statements:

  • When I buy my breakfast, I want to complete my purchase quickly so I can continue on my daily routine.
  • When I shop at a bakery, I want to get get additional benefits on my spending so I feel my patronage is appreciated (Basically means I’m kiasu).
  • When I visit a bakery, I want to see the items fully stocked so I can choose what I want.
  • When I want to check my loyalty benefits, I want the process to be easy and fuss free so I can use it quickly and conveniently.
  • When I buy a bread, I want to know the ingredient in greater details so that I can make healthier options.
User Journey

We want to explore how our primary persona, Daniel, goes about his visit to breadtalk by plotting a User Journey. This will inform the ideation process for creating possible features for our app.

Features Prioritisation

We first created an unrestricted list of features for our Personas.

Initial list of Features.

After which prioritised the features and ranked in them in importance using 3 separate methods (Essential vs Effort graph, Importance vs Frequency Chart & MSCW Method). This process will help us decide which features to include for our MVP.

Our MVP will be produced with the ‘Must Have’ and ‘ Should Have’ features. The ‘Could Have’ and ‘Nice to Have’ features will be rolled out in 2016 H2 and 2017.

Product Roadmap
User Flows

Key Takeaways:

  1. If user chose ‘keep me logging in’ when signing in, the app will subsequently launch on ‘My Cards’ screen instead of ‘Home’. Under ‘My Cards’ are the options to view rewards, pay, top up or manage the virtual cards. The users will be able to choose a rewards or make payment instead of going to a menu to find these features.
  2. Starbucks also has a barcode scanning machine for scanning the virtual card when user redeems a reward. This saves user a step in having to tap on the reward to make a redemption. Instead, he will inform the staff verbally and upon scanning, the reward will be deactivated and recorded as redeemed in the app. However, the instruction needs to be clearer in the app. (E.x. “Inform staff to redeem”)
  3. User flow is the shortest in Apple Pay app for Task 3 because it uses the double-press on home button as a action to launch the app, followed by quick authentication with thumbprint. However, these are features limited to iPhone only.
  4. BreakTalk can model after Starbucks of having a 1 process of making payment and redeeming rewards; use the same scanning device.
Technical background and constraints

The MVP will be designed for the iOS platform; in-line with our secondary and user research findings that majority of smartphones users in Singapore are iOS users. Our Wireframes and Prototypes are design for the iPhone 6 and later.

Native Functions: Keyboard, Phone Display,

Error States: ‘Please Select value for top up before confirmation’

iOS Standards:

• Toolbar icon size

• Hamburger menu

• Directional arrows

• Back button

• Alert Message and Dismiss and OK Button


  • NotificationCentre
  • MapKit
  • CoreLocation
  • CoreBluetooth

3rd party providers:

  • Paypal or other local payment gateway channels with local banks.
  • Google Maps

Potential technical constraints for features:

Immediate discounts & accumulating points: Feature can be done easily; user can scan their phone through NFC or barcode at payment. However we will use a barcode scanner technology for MVP as not all phones are NFC ready.

Scan Device or Barcode to pay: App should be able to work in Airplane mode or situations with love connectivity. Generating the barcode requires device to connect with main server. Using barcode at store doesn’t require connectivity.

Checking points and benefits: Current points accumulated data can be stored on app within phone. However without internet connectivity, user is unable to download and redeem benefits.

Promotion notification based on preference: If notifications are pushed out to too many members at the same time, server will experience spike in traffic and members may experience time-out in downloading.

Saved favourites to receive push coupons: Input promotion information into server by BreadTalk staff via eg. an admin webpage that’s linked to the server. Constraint will be in poor system design of database that contains users’ information, which would lead to longer process in finding out the targeted customers.

Limited Memory: Memory management in Java (Android) and Objective-C (iOS) is extremely time consuming for developers. So regardless of which mobile enterprise application platform (MEAP) you are using you will want to design efficiently.

Creating an application that requires less memory will improve the user experience by improving response times and reducing the likelihood of errors. If a field isn’t vital, eliminate it from the app or relegate it to optional views and call for the data only when needed.

Storyboard & Style Guide

Before moving onto the Ideation stage, we drew up a storyboard on how we imagine a shopper would go about completing his task at the bakery. We also finalized a style guide to direct our wireframing and paper prototyping.

Design & Prototyping

App Map and the Paper Prototype

Using the above App Map for our MVP, we created our paper prototype.

Usability testing of Paper Prototype

Scenario 1: You have just ended work and decide to drop by BreadTalk while on the way home to get some bread for breakfast tomorrow. After making your selection and while queuing up to pay, you take out your phone to prepare for payment via the BreadTalker app in order to enjoy a discount. However, the app shows that the stored value in your virtual card is at a low of $5.

Task 1: Add $20 to the card value and buy the bread, which cost a total of $16.90, at the cashier.

Scenario 2: Suddenly you remember that today is your mum’s birthday, so you decide to claim a cake through the app.

Key Findings: Users did not expect to see transaction history after each action. They prefer more updated information such as current amount in their card.

Design Implications

We changed our paper prototype to have a scroller layout home page instead of one with a grid based layout. We also shifted content of the customer’s membership points and dollar amount directly to the homepage.

Revised App Map and Hi-Fidelity prototype

A new App Map is created after incorporating changes derived from usability testing and it is what is based on for creation of high-fidelity prototype.

We then proceeded to created our High Fidelity Prototype and conduct 9 usability testing on it.

Scenario 1: You have just ended work and decide to drop by BreadTalk while on the way home to get some bread for breakfast tomorrow. After making your selection and while queuing up to pay, you take out your phone to prepare for payment via the BreadTalker app in order to enjoy a discount. However, the app shows that the stored value in your virtual card is at a low of $5.

Task 1: Add $20 to the card value and buy the bread, which cost a total of $16.90, at the cashier.

Scenario 2: Suddenly you remember that today is your mum’s birthday, so you decide to claim a cake through the app.

Additional takeways from the High Fidelity Usability Testing

Key observations and detailed results from the usability testings were recorded. Blockers were then further categorised according to their severity and recommendations proposed thereafter.

BreadTalk App vs Starbucks (performance comparison)

Key Takeaways:

  1. Our App is able to beat Starbucks for topping up stored value in virtual card because users can already pre-save their existing credit cards for future use.
  2. We were able to match Apple Pay even though we had an additional system input to notify users of deducted value and earned points (this feature is included due to user feedback).
  3. For redeeming a reward, we performed less favorably than Starbucks due to an additional system input to inform customers about the points deduction. Again this feature is included due to user feedback.

Interactive Prototype Demonstration

Scenario 1: You are in the queue at Breadtalk waiting to make payment. You are planning to use your BreakTalker app to pay because by doing so earns you loyalty points and a discount. However, your stored value in your virtual card is $5 ; much lesser than your intended purchase amount of $16.90

Task 1: Add $20 to the card value and make payment at the cashier.

Scenario 2: Suddenly you remember that today is your mum’s birthday, so you decide to claim her favourite GenMai Cake through the app.

Task 2: Based on the loyalty benefits that you are entitled to, select a cake in the app and redeem it at the cashier.

Feel free to explore the clickable prototype here:

Next Steps

  1. Consider how the app can link up to the existing BreadTalk website.
  2. Explore the design of the other app features (eg. store locator) in greater detail, tailoring them to the users’ preferences for a better experience when interacting with BreadTalk.
  3. Conduct user testing on other features for the MVP.


The project was successful because of strong teamwork fundamentals amongst our group members. Big thanks to Lauren and Cynthia for the amazing work and also the selfless commitment!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.