Bustle Coffee Rewards App - Hero Image

Bustle Coffee

Rewards App

A coffee shop app focused on encouraging loyalty and improving the overall experience by giving the customer a new way to interact and track their rewards.

Scan and pay in-store and customize your favorites drinks. Rewards are built right in, so you’ll earn points towards free drinks and food on your purchases.

Problem

The fictional coffee shop lacks an efficient and user-friendly digital platform to manage its rewards program, promotions, ordering, and payment processes. This creates a disjointed customer experience, resulting in decreased customer engagement and limited opportunities for customer retention and loyalty.

Outcome

By designing and implementing a comprehensive UX/UI for the coffee shop, users will have an intuitive and visually appealing app that enables them to easily track their rewards, receive personalized promotions, seamlessly place orders, and make payments. The outcome will be an enhanced user experience that fosters customer satisfaction, increases customer engagement and loyalty, and ultimately drives business growth for the shop.

Design

Process

Discover - Icon

Discover

Define - Icon

Define

Idea - Icon

Ideate

Design - Icon

Design

Test - Icon

Test

Competitor Analysis

Dutch bros

One downside to the Dutch Bros app is that it is only available in certain regions, limiting its accessibility to customers outside those areas. However, for those who do have access, the Dutch Bros app offers a great user experience with plenty of rewards and features to keep customers coming back. The app is known for its fun and wild design system, which reflects the brand's energetic and vibrant personality. The app's user interface features bright colors, bold typography, and playful illustrations that make it visually appealing and engaging for most users. However it is very unorthodox in some areas which can make for a unideal user experience.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Dutch Bros Rewards App - Screens
Starbucks Rewards Screens - Case Study

Starbucks

The Starbucks rewards app has stood the test of time as the industry leader in mobile app and reward design. Its hallmark feature is its intuitive mobile ordering and seamless in-store scanning capabilities. Additionally, the ability to send gift cards to friends through the app and the offers page is a standout feature that adds value to the overall experience.

However, the complexity of their rewards system can be a challenge for some users, which is why they are actively working to educate their user base on how it works. Additionally, the sticky button to scan rewards cards can feel redundant and potentially confusing, creating friction for users.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Dunkin’

The Dunkin' Rewards app stands out with its user-friendly interface and seamless mobile ordering. It offers customizable orders, personalized promotions, and a convenient way to earn and redeem rewards. While occasional technical glitches have been reported, the app effectively enhances the coffee shop experience for loyal customers. The Dunkin rewards app features a clean UI design and offers a variety of rewards and discounts for users.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Dunkin' Rewards App Screens - Case Study

Note worthy
Competitors Features

The Starbucks app's gift card feature allows users to send gift cards to friends and family through the app.

Dutch Bros app's unique design and personalization features

All three apps offers a "Mobile Ordering" feature where users can order and pay for their drinks in advance and pick them up at the store, without waiting in line.

The Starbucks app offers a feature called "Happy Hour," which provides users with discounted drinks and food during specific hours on certain days.

Dunkin app partners with other brands to offer exclusive deals and rewards to app users

User demographic

Age group of users is between 18 and 45 years old.

People who frequent coffee shops and cafes regularly

Users typically have a moderate to high income level, with a significant portion falling into the middle to upper-middle class.

A large percentage of users are tech-savvy and comfortable using mobile apps for ordering and payment.

The app appeals to coffee lovers who value convenience and quality, as well as those who are looking to save money through rewards programs and special promotions.

User Survey

The research showed me the users want an app the allows then to gain rewards each time they go in and possibly get special rewards on a certain day like their birthday or the second Saturday of the month. The users want a say in the coffee shop and an app can give them that interaction to improve their experience.

Bustle Coffee Rewards App - Servey Answers
Bustle Coffee Rewards App - Insights

Synthesized Insights

Several insights have emerged after distilling the responses regarding user preferences and expectations for coffee rewards. Users expressed a strong desire for tangible rewards such as discounts and free products, emphasizing the importance of feeling appreciated and rewarded for loyalty through personalized offers and promotions. Limited-time discounts and exclusive promotions were identified as effective incentives for increasing visits. I also learned that users value features such as order and payment capabilities, tracking rewards progress, and receiving personalized offers based on purchase history. These key insights have guided me in developing a user-centric rewards app.

Bustle Coffee Rewards App - Key Insights List

User Persona's

Bustle Coffee Rewards App - Persona 1 - Liam 21
Bustle Coffee Rewards App - Persona 2 - Claire 29

User Needs

Quality and Enjoyable user experience: Users may expect a user-friendly app interface that is easy to navigate and understand, with clear instructions for placing orders, tracking rewards, and making payments.

Convenience: Users want to be able to quickly and easily order their favorite drinks from their preferred coffee shop, without having to wait in line or waste time placing orders over the phone.

Rewards and loyalty: Users want to feel appreciated and rewarded for their loyalty to their favorite coffee shop. This may include discounts, free products, or other perks.

Ease of use: Users want an app that is easy to navigate and use, with clear instructions and an intuitive interface.

Informational: Users want access to rewards information, current promotions, or details about the ingredients used in their drinks.

User Flow

With a understanding of user needs, I embarked on creating the user flow. I started by sketching the app's main screens, mapping out the key actions and transitions that users would go through. I paid careful attention to the logical progression of tasks and ensured that the flow felt intuitive and effortless.

Bustle Coffee Rewards App - User Flow 1
Bustle Coffee Rewards App - User Flow Modals

Sketches

The wireframe sketches I created for this project served as a foundational visual representation of the app's structure and layout. These sketches allowed me to explore different design concepts, iterate on ideas, and communicate my vision effectively. By mapping out the key screens and interactions, I was able to establish a solid foundation for the app's user interface and user experience design. The wireframes served as a valuable reference throughout the design process, helping me gather feedback for further refinement.

Bustle Coffee Rewards App - Wireframe Sketch
Bustle Coffee Rewards App - Wireframe Sketch
Bustle Coffee Rewards App - Wireframe Sketch
Bustle Coffee Rewards App - Wireframe Sketch
Bustle Coffee Rewards App - Wireframe Sketch
Bustle Coffee Rewards App - Wireframe Sketch
Bustle Coffee Rewards App - Wireframe Sketch
Bustle Coffee Rewards App - Wireframe Sketch

UI Components

The UI components play a vital role in enhancing the visual appeal and functionality of the app. Carefully crafted and thoughtfully designed, these components ensure a cohesive and intuitive user interface. The app utilizes a variety of UI components, including buttons, navigation menus, cards, input fields, dropdowns, and modals, to name a few. Consistent typography, color schemes, and iconography are employed to create a visually pleasing and user-friendly interface. By utilizing these UI components, the app aims to provide a seamless and cohesive user experience, allowing users to interact with the app effortlessly

Bustle Coffee Rewards App - UI Design System

Main Screens

The main screens of the app showcase a thoughtfully designed user interface, presenting a seamless and intuitive experience for users. From the home page to the rewards section, each screen embodies a user-centric approach, prioritizing usability and visual appeal.

Bustle Coffee Rewards App - Screen Overview
Bustle Coffee Rewards App - Screen Overview
Bustle Coffee Rewards App - Screen Overview
Bustle Coffee Rewards App - Screen Overview
Bustle Coffee Rewards App - Screen Overview

All Screens

Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen
Bustle Coffee Rewards App -  Final Screen

User Testing

User testing is a crucial part of my design process, allowing me to gather valuable insights and make informed decisions. I conducted user testing sessions with a small group of participants, observing their interactions and collecting feedback to shape the final product. Each participant was given specific tasks to complete within the app, and I carefully observed their behaviors, challenges, and preferences.

The observations guided me in identifying pain points, usability issues, and areas for improvement. With the insights gained from user testing, I made iterative changes to the app's interface, user flow, and overall experience. By incorporating user feedback and data-driven design decisions, I was able to refine the app and create a final product that meets user needs and enhances usability.

Bustle Coffee Rewards App - Screen Mock

Learnings

Having gone through similar projects in a professional environment, I decided to embark on this as a passion project, giving myself the freedom to take my time and thoroughly think through the entire process. It allowed me to reflect on my previous experiences, leveraging the knowledge and skills I had gained. I took a more deliberate and thoughtful approach, ensuring I considered user needs, conducted extensive research, and iterated on design solutions. This project became an opportunity to showcase my dedication and passion for UX/UI design, demonstrating how my abilities had grown and evolved over time.

Project background

This project marks the third iteration of the app design for the fictional coffee shop. As a UX/UI designer, I saw it as an exciting opportunity to revisit and reimagine this project, eager to showcase the growth and development of my skills. It serves as a testament to my commitment to continuous improvement and my desire to deliver a more refined and polished user experience.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Bustle Coffee Rewards App - Process Image

Next steps

Moving forward, I am excited to take the next steps in this project when I decide to revisit the project again. With the solid foundation established through thorough research, design iterations, and user testing, I will focus on refining and polishing the final product. This includes addressing any remaining usability issues, incorporating feedback from user testing, and ensuring a seamless and delightful user experience. Additionally, I plan to continue exploring motion interactions that will further enhance the app's functionality and visual appeal.

By continuously iterating and improving, I aim to create a portfolio piece that showcases not only my current skills but also my commitment to delivering exceptional user experiences. By continuously iterating and improving, I aim to create a portfolio piece that showcases not only my current skills but also my commitment to delivering exceptional user

Bustle Coffee Rewards App - Screen Mock