BreadTalk Loyalty Card App

When BreadTalk started in 2000, it was one of the first bread boutiques in Singapore and led the trend of open kitchen concept in bakeries. This brand was all about creativity, innovation and craft. However, its popularity seems to have fallen over the years with more variety of bakeries entering the market. In this project, we explore how to improve its market position through a mobile app that is tied to a loyalty programme.

Business Problem

BreadTalk is facing intense competition from boutique or chain bakeries. In addition, its many branding faux pas and insufficient involvement in corporate social responsibility, 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.

Business Opportunity

BreadTalk is 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 consumers and build brand loyalty.

Goals

Business Goal: Increase sales in BreadTalk bakeries by driving traffic to the stores and building higher brand loyalty.

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

User Goal: Buy and consume delicious bread with minimal effort and money possible.

Project Specs

Team: 3 People | Time Frame: 2 Weeks | Tools: Google Forms, Trello, Omnigraffle, Sketch3, Illustrator, Invision, Principle

Research

Survey

Before conducting in-depth interviews, we crafted about screener questions in a survey form in order to select the candidates who are relevant to solving the problem faced by BreadTalk.

Interviews

More than 60 responses were received from the survey and we selected 7 of the participants who patronise a bakery regularly and is a member of any loyalty programme.

Some comments by interviewees:

“ I go to the bakery as I’m on the way to run an errand. Buying bread is not my main task.”
“If it is too crowded in the shop, I’ll just buy other food because I don’t like to queue.”
“ I don’t like the hassle of checking loyalty points. I want something straightforward, less time consuming.”

Main Takeaways

  1. Location is of top priority to consumers when deciding on the bakery to patronise. This is followed by perception of product quality. Price and brand play a much smaller role in influencing their choices.
  2. The ease and speed at which consumers are able to buy from a bakery matter in their choice of bakery, or making any purchase at all.
  3. A loyalty programme is only effective if members can engage in it with minimal hassle and hence higher frequency.

Affinity Mapping

From the affinity mapping, a list of insights were drawn and ideas for features were generated.

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 there is appreciated.
When I visit a bakery, I want to see large variety of items fully stocked so that I have more options to choose from based on my preferences.
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.

Insights

  1. Consumers are in favour of BreadTalk’s loyalty programme encompassing all brands under the group’s umbrella, which includes Din Tai Fung Restaurant and Toast Box Cafe. → Store Locator to include other brands under BreadTalk Group
  2. Consumers dislike a tedious process of checking existing loyalty benefits and making a redemption. → Access to loyalty info on app launch
  3. Consumers prefer the loyalty benefits to include immediate rebates instead of accumulated credits. → Payment via app to enjoy immediate discount
  4. Consumers exhibit different purchasing behaviours depending on their preferences and habits. → Favourites • Filter Recommendations by User Preference • Order History • New Item Recommendation • Nutrition Information
  5. Ranked in descending order of priority to consumers: location, quality, price and brand. → Store Locator • Promotion Notification
  6. Easy, fast and smooth purchasing process is of important consideration to the consumers when buying from a bakery. → Pre-order • Cashless Transaction (Stored Value Card)
  7. Consumers’ purchase from a bakery is often not for immediate consumption. → Pre-order, Delivery
  8. Consumers are attracted by fully-stocked bread and a great variety of options when in store. → Real-time Notification on bread status

Design Implications

Personas

User Journey

Out of the 3 personas defined, Daniel is the one who resonates with largest target group of BreadTalk, hence we went on to explore his user journey as a means to decide the possible features that would improve his experience when interacting with BreadTalk.

Competitive and Comparative Analysis

As the proposed BreadTalk app would be tied to a loyalty programme, we did a comparison across apps of various companies that have loyalty programmes. In this case, the analysis is against BreadTalk’s features on its website since it does not have any existing app.

Competitive and Comparative Analysis Across Apps with Loyalty Programmes

Based on the table, 3 features that echoed across the apps are: Menu, Store Locator and Manage Account (PERX does not have a menu feature as it is a loyalty card consolidation app and is not a store per se). Therefore, these features will be highly considered for the app.

Feature Prioritisation

With more than 20 features drawn out, we need to prioritise which features to have in the app and which to introduce later or to remove completely. We considered them based on the following metrics before sorting them out using the MoSCoW method.

Feature Prioritization using MoSCoW method

All features under MUST HAVE and SHOULD HAVE would be developed first, with the addition of ‘Menu’ from COULD HAVE. This is so that users can add items from the menu into Favourites and obtain the relevant promotional e-coupons.

Road Map

Due to limited resources, we propose that BreadTalk introduce the app features in phases.

Road Map for App Development
  • Phase 1: In the first half of the year, features most immediately related to the loyalty programme, such as topping up of stored value in loyalty card and benefit redemption, will be pushed out first. Branding information such as menu and store locations will be incorporated too.
  • Phase 2: Subsequently when the membership based is more established and BreadTalk has a better understanding of its marketing position, it can start to send promotional notifications to targeted consumers.
  • Phase 3: In the next 1 to 2 years that follow, should the company expands its business to cover pre-order and delivery, these features can be added into the app too.

Technical Considerations

Some possible technical constraints for our app:

  • NFC technology is only available on newer phone models such as iPhone 6 and later → Adopt barcode scanner and not NFC reader.
  • Poor connectivity to payment gateway may result in slow process for top-up via app → Staff to advise customers on other modes of payment if value in virtual card is insufficient.
  • If notifications are pushed out to too many members at the same time, server will experience spike in traffic and members may face time-out in downloading → Use a separate server for notifications only.
  • Memory management in mobile enterprise application platform (MEAP) is extremely time consuming for developers → Design efficiently by eliminating unnecessary fields so as to improve app response time and reduce possible errors.

Contextual Inquiry

Through observing the happenings in-store, checking with the staff and personal testing of a redemption, some considerations came up.

Contextual Inquiry @ BreadTalk
Contextual Inquiry @ Starbucks

Insights

  1. Use of barcode scanner versus NFC reader for management of virtual loyalty cards when in-store — As BreadTalk currently has none, this is an investment that would make sense if the machine could be used for other business functions too. In view of this, we are more in favour of the barcode scanner as it can be used for scanning physical loyalty card and products too.
  2. Bread is indeed low in quantity and variety at a BreadTalk outlet with less human traffic.
  3. Scanning of the virtual card for reward redemption at Starbucks was quick and fuss-free. This was partly due to the staff being well-informed of the reward details and redemption process.

Design Implications

  1. Payment via virtual loyalty card in app is done by scanning barcode with in-store scanner.
  2. Using the feature of Menu in the app to inform a consumer on the full range of BreadTalk’s products such that he could keep his favourites in mind, for future purchases or promotional notifications.

App Map

User Flow Analysis

User Flow Analysis for Reward Redemption
User Flow Analysis for Making Payment

Insights

User flow is the shortest in Starbucks app for Tasks 1 and 2 because:

  1. If user chose ‘keep me logged 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. So immediately, the user is able to choose a reward 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 — Eg. “Inform staff to redeem”.

Design Implications

Since BreakTalk is going to have stored-value loyalty card which would require either a barcode scanner or NFC reader to operate, there would be minimal cost to the business should the same machine be used for capturing of reward redemption on a member’s mobile phone. Therefore, BreadTalk could adopt the operation model of Starbucks in this aspect.

User Flow Analysis for Making Payment

Insights

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. Hence it would not be suitable for adopting in the BreadTalk app since BreadTalk target market consists not only of iPhone users.

Design Implications

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

Prototypes and Usability Testing

With a good idea of the initial features to have in the app and the appropriate flows for the main features, we proceeded to design the paper prototype with reference to the iOS Human Interface Guidelines (eg. Back button should appear on the left end of the navigation bar if user goes to a new level in navigation hierarchy).

Paper Prototypes

Conducted paper prototype testing with 4 participants

Insights

The prototype started out with a grid design, which echoes the look of the current BreadTalk website. However, with such a design in the navigation, users have to tap one button after another in order to complete a task.

Design Implications

Move more content to the surface instead of hiding them in navigation. The change in user interface is later incorporated into the wireframes.

Revised App Map

Incorporating changes derived from the usability testing of paper prototype, a revised app map was created.

  1. ‘Manage Account’ was renamed as ‘Profile’ so that users will be misled to this section to for checking of reward points.
  2. ‘Transaction History’ which is important but not frequently used, is moved to ‘More’ but also put as one of the quick links at the screen bottom of ‘My Card’. This is to allow users to locate it easily when required.
  3. ‘Feedback’ and ‘Contact Us’ are put as quick links under ‘My Card’. This is to give users more than 1 route of getting to these important features.

High Fidelity Prototype

Conducted high-fidelity prototype testing with 9 participants (4 face-to-face, 5 online)

Insights

Upon consultation with a developer, comments were made with regards to the coupon-based redemption mechanism — User could do a screen capture of the coupon and make repeated redemptions thereafter. To avoid such a situation, the server needs to generate unique 1-time ID. The ID will be held by the server for maybe 3 minutes, then expired after that if it is not used (points held in escrow will be returned to system). If used, the ID will be invalidated. This in fact posed more problems to the problem:

  1. Server has to constantly monitor status of the ID to decide on the next action → Higher cost to company with due to larger capacity of server operation.
  2. If user needs to wait for a couple of minutes for generation of the ID and if it is not used within 3 minutes, user will have to repeat the redemption steps to get another ID for scanning. → Time-consuming for a simple redemption means poor user experience!

Design Implications

Redemption method is changed from scanning of barcode generated after tapping Redeem, to verbally informing the staff of reward choice and scanning of virtual card to deduct loyalty points for redemption. This has direct impact on the design of the app in terms of the image to show for scanning and the instructions and information on alert messages.

User Flows (BreadTalk vs Best Performer)

Insights

  1. BreadTalk outperforms Starbucks on the task of topping up stored value, this is largely due to saved credit card information for future payments, which can provide more convenience for the users. However, security could be an issue.
  2. BreadTalk is on par with Apple Pay for task of making a payment. In fact BreadTalk could perform better if there is no alert message on the amount deducted and points credited. However, such a feedback is necessary to better inform the users of the card status.
  3. It requires 1 less tap in Starbucks app for reward redemption when compared to BreadTalk but that is due to an alert message on points deducted.

Design Implications

Current design for the BreadTalk app is generally sound. Although BreadTalk app does not fair as well on the task of reward redemption, but we decide not to sacrifice system status visibility (feedback to user) for speed.

Clickable Prototype

With the changes from usability test incorporated, see video below for a walk through in the prototype created with Sketch and InVision.

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.

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 the detail, in greater detail, tailoring them to the users’ preferences for a better experience when interacting with BreadTalk.
  3. Think about how some of the phase 2 features can be integrated into the current design.

Learnings

Designing an app for a commercial entity called for greater considerations on the entire user experience, both online and offline — Some solutions to UX problems may not require the use of technology. For instance, the redemption feature in the app required user to communicate their choice of reward to the staff verbally. Hence, staff training is an important element to creating better UX in this case — to ensure that they know how to explain the reward system to the customers, as well as scanning and deducting points efficiently on the virtual card.

Show your support

Clapping shows how much you appreciated Lauren Tan’s story.