BreadTalkers : Loyalty Card App

For this project, I teamed up with Alex and Lauren for a duration of 2 weeks.

Some of the softwares & tools used are :

Trello, OmniGraffle, Sketch, Invision, Principle, Hype

Upon assigned to the group, we began brainstorming potential areas of opportunities and brands that are in a position to address them. After coming up with a few brands to explore and design, we decided to go with the brand, BreadTalk.

We continued by analysing the BreadTalk website: defining it’s business and user goals. From there, we came up with a screener, survey to recruit interview participants for our project.

BreadTalk started out in 2000, is the first bread boutique in Singapore and started the trend of open kitchen concept in bakeries across Asia. They revolutionised this concept with distinctive sleek and clean lines and signature ‘see-through’ kitchens.


BreadTalk is facing intense competition as many more boutique or chain bakeries join the market. In addition, its many branding faux pas and insufficient involvement in corporate social responsibility (CSR) further impede building of brand loyalty. As such, BreadTalk is in need of a means to create greater brand loyalty so as to continue its position as an innovative leader in the bakery market and overcome its negative branding image.


BreadTalk is still working on a loyalty card programme where the card is likely to come with a payment function (like Starbucks) rather than simply a card to chalk up stamps for free items. This provides a chance for tracking of its consumers’ purchases (big data analytics) for targeted promotions, as well as greater interaction via social media platforms to better engage and build loyalty.



Developing a mobile platform service to firstly drive traffic to the retail stores and increase revenue for the company. Secondly to increase customer loyalty and encourage repeat business of existing customers.


To align the design with BreadTalk ’s current styling strategy and to encourage Brand memory with customers.


To delight the users by enhancing their purchasing experience both within and outside the retail stores.


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


We crafted an initial screener survey that was sent out to qualify our respondents for the follow-up interviews.

70 Surveys and 7 Interviews were done with respondents between the age of 14–60 to understand their behaviours and habits for patronising their bakeries.

This helps us to identify the respondents who have patronised a bakery in the past month and helps us understand how respondents decide on which bakery to visit. Below are some statistics from the responds we received.


  • 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.

Analysis of user research showed that customers wanted:

  • an all encompassing loyalty programme to span across the BreadTalk brands
  • an easy way for them to claim or use any loyalty benefits
  • their experience at the bakery to be swift, efficient and fuss-free


Contextual Inquiry exercises were conducted across several different bakeries to observe how these patrons behaved and executed their own tasks on location.


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

The interviewees expresses that:

Below are the main takeaways from the interviews that will help us to guide our feature creation for the app.


Key information from the users 4-list and interviews were affinity mapped to spot potential trends or groupings.

A list of potential features were then ideated from this.

Affinity Mapping


From the interviews and survey, we were able to build up the personas for our project and draw up three core personas to address the need of each group targeted.


To help us focus on the problem, we created a user story of one of our personas, Daniel, to track his journey when buying at BreadTalk. Everything when by smoothly until his emotional state started to drop drastically after selecting the bread he wanted to purchase.

From there, he expresses frustration while queuing. A slight increase happen when he observes the hygenic practices through the open kitchen concept. However, it went back down till he exits the bakery. We were able to identify the possible features that would help enhance his experience.


We did a comparison between BreadTalk and 5 other companies. All the features highlighted are roughly similar : store locator, managing account and redemption, and the features would be implemented into the app.

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.


There after, we came up with a list of features and decided to prioritise them using the minimum viable product diagram and MoSCoW method to evaluate our ideas.

From there, we group the features in the following below:


We drew out the product roadmap and plan out on when the other features would be pushed out in the later part of the year.


BreadTalk App 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 will be designed for the iPhone 6 and later.

Some of the technical constraints for our app:

Notification Centre, Map Kit, Core Location, Core Bluetooth

  • iOS limitations as choice platform
  • Poor connectivity to payment gateway may result in slow process for top-up via app
  • Push Notifications server many experience spike in traffic and may face time-out when downloading
  • NFC technology for newer phone models, iPhone 6 and later
  • Time consumption in memory management in mobile enterprise application platform (MEAP)


We will create 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.


The App Map was used as a based structure for our paper prototype. It consists of the features we finalised and the user flow.


Task 1: User flow is the shortest for Starbucks App

Insights: 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.

Task 2: User flow is the shortest for Starbucks App

Insights: 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”)

Task 3: User flow is the shortest in Apple Pay app

Insights: 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.

Design Implications: As BreadTalk would be having a stored-value loyalty card which would require either a barcode scanner or NFC reader to operate, there would be a minimal cost to the business if the same machine was used for capturing the reward redemption on the member’s mobile phone. Thus, BreadTalk could adopt the operation model of Starbucks in this aspect.

Although Google Wallet’s feature of authentication before payment is a good security measure, some users may prefer to skip the step to make the process faster. Therefore, it can be an option under ‘Manage Account’.


To help us get a better understanding of how our application process worked, we created a storyboard on how we imagine a shopper would go about completing his task at the bakery.


We conducted 9 usability testing exercises for our final interactive prototype. Each participant was given 2 specific scenarios with a task for each scenario. Key observations and detailed results of each testing was recorded.

Usability Testing for our prototypes

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.

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


Insights: The prototype was created with a grid design, similar to the current look of the BreadTalk website. However, users would have to take a longer time in navigating the app by tapping one button after another to complete the task.

Design Implications: More content could be moved to the surface instead of hiding them in the navigation. Changes to the user interface are incorporated into the wireframes.


This App Map is the revised version after incorporating changes derived from usability testing and it is what is based on for creation of high-fidelity prototype.

Insights: After our consultation with the developer, comments were given with regards to the coupon-based redemption mechanism. The server have to generate a unique 1-time ID that would be held for around 3 minutes, before expiring. Some problems with regards to the server like the higher cost for company to constantly monitor the status of the ID and longer time-consumption for a simple redemption would cause poor user experience.

Design Implications: The design of the app have to be changed for the scanning and the instructions,information on alert messages. The redemption method had been changed from scanning of barcode generated after tapping Redeem, to verbally informing the staff of reward choice and scanning of virtual card through the mobile app, to deduct loyalty point for redemption.


With our features determined, we were able to reduce the steps to completing each tasks. However, for task 3, we believed that the steps were necessary to make payment



Blockers were then further categorised according to their severity and recommendations proposed thereafter.


· Linking app to the existing website

· Explore the design of other app features in detail, tailoring to users’ preference (e.g. store locator)

· Consider ways to incorporate benefits from the other brands in the BreadTalk Group, into the app

· Integration of 2nd Phase features into app

During this past 2 weeks, I had a great time completing the project with Alex and Lauren. Not only do I have fun, I also learnt alot from them. It’s my first time learning Principle and I look forward to learning more interaction design in the upcoming project prototype.

Thank you ^-^