Designing a loyalty-driven online ordering app for a local bakery chain
IN A NUTSHELL
I designed the mobile app interface for a bakery chain, Angelina Bakery, combining the unique brand identity of the client with the flow of the host online ordering platform, Make It Butter. The goal of the design was to enhance customer retention and loyalty, while also introducing QR payment capabilities. Available now on the App Store and Google Play.
Client
My Contributions
Timeline
Tools
A Bit of Context — Make It Butter is an online ordering platform that provides digital solutions and delivery services to connect restaurants with their customers. On this occasion, they contracted with Angelina Bakery, a local bakery chain in NYC, to develop Angelina’s mobile app. The UI portion was outsourced to me during my time as a freelance designer, and I worked closely with the development team at Make It Butter, incorporating their feedback throughout the process.
DISCOVER
I met with the team at Make It Butter for the initial meeting, where I received a brief introduction to the client and a set of guidelines for the project. These included key objectives, digital assets (such as the vectorized logo, color palette, and product shoot images), a sitemap outlining the app's core functions, and a style reference that had been approved in advance by the client.
Snapshot of guidelines and digital assets —
I then explored Angelina Bakery’s website to learn further about their brand identity. I observed prominent use of their signature mint color, along with recurring motifs (listed below) and circular images. The brand came across as cheerful and approachable, with subtle vintage touches that aligned with the bakery’s history and mission to bring authentic Italian recipes, passed down from the founder’s grandmother.
Angelina Bakery’s website —
Recurring motifs and stylization —
DEFINE
While we were in favor of keeping the branding as consistent as possible, the team and I felt that certain elements used for the website were overly stylized and gave the interface an outdated look, especially in contrast to the reference image that the client had provided for the design direction of the app.
Reference image provided by client —
So we reached the consensus to replace these elements, like the decorative fonts and wavy lines, with more modern alternatives but kept other brand elements consistent so that the app remained aligned. I also generated some hues of the signature mint color, along with a set of secondary colors and neutrals, to ensure a balance in visual hierarchy and prevent elements from all competing at the same level.
It was now time to define who and what we were designing for. The primary objective of the app was to boost client loyalty and retention. With this goal in mind, I outlined key assumptions about the users likely to download the app and mapped out their main user goals to determine the flow and set priorities.
DESIGN
01. Designing For Loyalty
After carefully benchmarking popular food loyalty apps like Starbucks and McDonald’s, I drafted the initial designs of the app. For certain flows, such as sign-up, account settings, and checkout, it was imperative that I adhere to the structure of the host platform to ensure alignment. However, other screens, like the home, menu, and QR payment screens, offered more flexibility. This allowed me to explore ways to optimize for customer loyalty and enhance usability through these sections.
Home Screen
I positioned the section to view, track, and redeem loyalty points at the top of the home screen to incentivize and encourage purchases. Below this, I arranged the app’s primary functions with consideration for each unique use case, including an ‘Order Again’ section for repeat customers to easily reorder their favorite menu items. For new users, this section would show ‘Bestsellers’.
Menu Screens
Through the “Previous” and “ Favorites” tabs, users can easily save and view preferred items and past selections, eliminating the need to search through the menu again. These features were implemented not only to reduce friction in the ordering process but also to create a more personalized experience, encouraging customers to return frequently.
QR Payment Screens
Like the home screen, the loyalty information was placed at the top of the QR payment screens. Initially, the Make It Butter team also wanted to position the loyalty card at the front of the carousel to encourage frequent use of the reward program. However, this meant users would have to swipe to the second card every time they wanted to make a QR payment. Considering the use case, I felt that this wasn’t ideal since the loyalty card is only required when redeeming points, not when earning them (Make It Butter’s loyalty points accrue automatically with any payment method, as long as the user has an account). So instead, I suggested keeping the loyalty card in the back of the carousel, with the ‘Redeem’ button linking directly to it for easy, one-click access when needed.
02. Implementing Feedback
Shortly after the first drafts, a checkpoint was held with the Make It Butter team to gather feedback and identify areas for refinement. Components that required such iterations included the menu cards, as well as the presentation of the cart CTA.
Menu Card Designs
Initially, I had placed the product images on the left side so that the real estate on the right could potentially be used for quick add or favorite buttons depending on context.
However, the team was in favor of placing the image on the right as this layout supports consistent text alignment making it more legible and versatile across different contexts, such as when an item lacks an image. We decided to proceed with this approach, as the host, Make It Butter, intended to templatize the design and wanted the layout of the app to be optimal for multiple businesses and scenarios.
Cart Placement
In the initial design, I had positioned the cart in the upper right corner as I felt this would be an intuitive and familiar placement for users and would keep it in view across all pages without taking too much real estate. Upon review, the team and I agreed that positioning the cart on the lower half of the screen would be more ideal for access, so additional variations were drafted with this in mind.
Ultimately, we decided to use a floating action button that activates when the cart is in use to prevent unintended clicks and disruptions to the user flow. To avoid overlap and blocking of other elements, ample padding was added at the bottom of scroll screens to accommodate for the placement of the FAB.
DELIVER
01. Key Flows
The final design consisted of 68 screens, including those for interactions. It was then handed off to an illustrator who was to complete the design with illustrations for the order confirmation screen and loyalty tiers.
Home Screen
The Central Hub
The homepage is the app's central hub, designed to offer quick access to essential functions and key user tasks. Users can view, track, and redeem loyalty points, browse menu items and offers, find store locations, and reorder past favorites, all contributing to a streamlined ordering experience.
Redeeming Offers
One-Click Apply
The ‘Offers’ page is designed to showcase app-exclusive deals and discounts, allowing users to browse and add available promotions by store location. Users are able to directly and seamlessly add savings to their cart by utilizing the"Apply To Cart" button on the back of each offer.
Exploring The Menu
Tabs and Breadcrumbs
The menu screens offer a clear, organized layout, allowing users to explore items and switch between categories with ease. The ‘Previous’ and ‘Favorites’ tabs ensure that users can quickly locate specific favorites or discover new ones, enhancing both usability and the overall ordering experience.
Checkout Flow
The Tried and True
The checkout process follows the efficient and verified flow of the online ordering platform, Make It Butter, to ensure that users are able to complete their purchases quickly and intuitively, with minimal friction at each step.
QR Payment
Less Steps, More Rewards
The QR payment screen integrates the loyalty program to incentivize repeat purchases and boost engagement by allowing users to automatically earn rewards during checkout. Users can immediately view their increase in points or apply them with a simple tap, instantly reducing their total.
02. Style Guide
REFLECT
This project provided valuable insights into designing an app that balances compliance and alignment with user experience. Navigating client preferences highlighted the importance of maintaining open dialogue and the collaborative efforts with the development team allowed me to see and absorb various perspectives that I felt broadened my horizons as an early designer. I am extremely grateful to have had this opportunity and look forward to applying these learnings to future projects.
NEXT STEPS
The next steps that I would take to build upon this project are —
Gathering real-time feedback and insights from app users to identify areas for refinement, especially for frequently used features like the menu and checkout flows
Exploring personalized recommendations or seasonal promotions to increase engagement and retention
Considering opportunities to further enhance loyalty, such as member-exclusive perks, early access, or referral and sharing programs