Little Contrast Loyalty-Program Web Apps

Web Application Design, UI UX
See live website here
Project Overview
In this project, we aim to develop a comprehensive personalize digital voucher web application for a coffee shop, integrating seamlessly with a customer loyalty program that includes a free voucher gift. The goal is to enhance the online customer experience, boost sales from online to offline ordering, and foster customer loyalty.
My Contributions
Create wireframes and prototypes to map out the user journey for the digital voucher loyalty program. Ensure a seamless and intuitive navigation experience for users. Focus on mobile responsiveness to cater to users on various devices.
Project Wireframe
Overview
  • Problem
  • Project Goals
Problem
Currently, the coffee shop's online presence is minimal, with limited information available through social media and third-party review sites. There is no centralized platform for customers to interact with the brand online. Updates about new locations or menu items are often posted only on social media, which can result in customers missing important information.

The existing approach to fostering customer loyalty is limited and lacks innovation. To truly engage with customers beyond their in-store visits, the coffee shop needs a robust online platform. Without it, maintaining consistent communication and building a loyal customer base remains challenging.
Project Goals
To developed coffee shop company profile website with integrated web application and customer loyalty program,including the free voucher gift system. The goal is to ensure the website enhances the online to offline customer experience, boosts sales, and fosters customer loyalty

The Process

Emphatize Icon
Emphatize
Define Icon
Define
Ideate Icon
Ideate
Prototype Icon
Prototype
Test Icon
Test

Emphatize - Exploring the User's Needs

Research Approach
To better understand what pain points and unmet needs for those who shop for beverages products online and engage in customer loyalty program enrollment now, I decided to dive right into customer interviews.

The goals for my research process was the following:

  • Explore and identify patterns of how participants shop for coffee beverages.
  • Identify pain points and unmet needs that participants face when register and claiming voucher.
Customer Interview
The objectives for this interview is to gather in-depth insights from different categories of customers to inform the Little Contrast new website. The goal alone is to understand user needs, preferences, and pain points to ensure the website enhances the customer experience and fosters loyalty. I try to divide it into three catagories participants, which are:
  • Regular Customers: Frequent visitors who have a strong affinity with the brand.
  • Occasional Customers: Visitors who come to the coffee shop infrequently.
  • New Customers: First-time visitors or those who have never visited the shop.
The following is a summary of their experiences:

Regular customers are have a strong brand loyalty, they need an easy access to loyalty program details and points balance or a features for timely updates about new menu items and events. Some of their preferences are would love to have a features like personalized promotions and exclusive offers, also a user-friendly interface for online ordering and reservation. For the pain point they are facing currently is difficulty tracking loyalty points with the current system and inconsistent information across different platforms. So the recommendation for them are how to develop a dedicated loyalty program section on the website with easy points tracking, implement personalized promotions based on purchase history and ensure all updates and information are centralized on the new website.

Occasional customers are looking for convenience, they need an easy access for information like a location merchant, operating hours, current promotions and special events. Some of preferences they would like to have is a simple and quick online ordering system, or email notifications for updates. Some of the pain points they have are like finding specific information can be time-consuming and lack of awareness about loyalty program benefits. For the recommendation they would like to have things like simplifying access to essential information like location, hours, and menu, highlight loyalty program benefits and ease of joining on the website, also offer email subscription for updates and promotions.

New customers which are the first-time visitors or those who have never visited the shop, they need clear and comprehensive company profile for first impressions and a user-friendly navigation to explore the menu,merchant location or services. They also might prefer some visuals and some descriptions of menu items, reviews or testimonials to build trust on the brand. Some pain points they have are difficulty finding information online, also lack of awareness about the brand and what it offers. They recommend to create a detailed and engaging company profile section, including high-quality images and descriptions of menu items and suggest to integrate customer reviews and testimonials to build credibility.

Common Themes:
  • Need for Centralized Information: All customer categories highlighted the need for a centralized platform with consistent and accessible information.
  • Loyalty Program Improvements: Regular and occasional customers expressed a need for a more user-friendly and informative loyalty program system.
  • Enhanced Digital Experience: Preferences for a seamless online experience, including easy navigation, online ordering, and personalized promotions, were common across all categories.
Next steps:
  • Website Development: Focus on creating a centralized, user-friendly website that addresses the needs and pain points identified.
  • Loyalty Program Integration: Develop a comprehensive and accessible loyalty program feature.
  • Customer Engagement: Implement features that enhance digital engagement, such as personalized promotions, email updates, and detailed company information.
By addressing these insights and recommendations, Little Contrast's new website can effectively enhance the customer experience, boost engagement, and foster loyalty across all customer categories.
Overview
  • Resarch Approach
  • Customer Interview

Define - Establishing the User's Needs & Problem

Persona Development
From my research, I noticed that there were some patterns amongst my paticipants. They have some common needs for researching their new potential favorite coffee brand, which are centralized information, loyalty program feature and seamless digital experience. Also I noticed that participants who are new into coffee brand geeking are need specific information about what kind of menu are avalaible, where's the nearest merchant location and what promotion program they can get. So I created the persona Alex Jensen.

Alex is on his way to work and needs his morning coffee. He just got news from his friend that a new coffee shop merchant name Little Contrast just open around his neighborhood. So he quickly research the brand through social media and websites. He found that the brand are already have a websites and a loyalty program on it. So he try to registering his new account and places an order for his favorite espresso-based coffee, and pays using his mobile wallet. The app informs him that he has earned enough points for a free coffee on his next visit. Alex appreciates the quick process and looks forward to redeeming his reward later in the week.

By designing a coffee shop loyalty program that caters to the needs and preferences of personas like Alex, we can enhance user satisfaction, increase engagement, and build a loyal customer base.
Persona image description
Problem Statement
Our coffee shop brand, known for its high-quality brews and cozy ambiance, seeks to enhance its digital presence and customer engagement through a new, comprehensive website. This website will not only serve as a company profile but will also feature an integrated web application designed to foster customer loyalty through a dedicated loyalty program, including a free coffee voucher system. From this problem statement I decide to listed 4 goals that can be a guided for the website features. The following goals are:
  • Enhance Online Presence: Develop a comprehensive website that serves as a detailed company profile, showcasing the coffee shop’s brand, values, menu, locations, and events.
  • Integrate a Customer Loyalty Program: Implement a digital loyalty program that allows customers to earn and redeem points for purchases, including a feature to receive a free coffee voucher.
  • Improve User Experience: Ensure the website is user-friendly, providing a seamless experience from browsing the menu to joining the loyalty program and redeeming rewards.
  • Boost Customer Engagement: Increase engagement by providing personalized offers, updates, and promotions through the loyalty program and website.
Overview
  • Persona Development
  • Problem Statement

Ideate - Creating Framework

Ideation
To generate some of the ideas for the web-apps, I try to execute the process by doing a few methods such as: Paper Sketches, Wireframes and Interactive Elements.

Sketching Core Features are :
Home Screen: Quick access to ordering, loyalty points balance, and latest promotions.
Merchant Location: List of merchant location from customer's city nearby.
Menu Screen: Clear categories, detailed descriptions, images, and customization options for drinks.
Order Process: Simple and intuitive flow from menu selection to payment.Options to save favorite orders for quick reordering.
Loyalty Program: Easy-to-access section showing points balance, reward options, and how to earn points.
Sketch image pen and paper
Story Boarding & User Flow
To enhance my ideation process, I designed a user flow where customers open the web app and are greeted by a clean, intuitive home screen with parallax video to show the brand, check loyalty points, and view promotions. They can browse through a visually appealing, easy-to-navigate merchant location and select their nearest merchant to order coffee trough third-party online platform. After placing an order, customers can display their account number or QR code at the cashier to receive loyalty stamps if they choose bought the coffee directly from the nearest store, or send the account number to the third party platform if they choose to bought it online. The cashier will confirms the order and updates the customer’s account with the corresponding number of stamps based on the cups purchased, ensuring a seamless and rewarding experience.
Overview
  • Ideation
  • Story Boarding & User Flow

Prototype - Making the Design

Wireframes
While designing wireframes for the coffee shop web app, I analyzed several successful applications to identify design patterns familiar to customers. For tracikng point experiences, I reviewed apps like Starbucks and Dunkin', which offer streamlined navigation and loyalty program integration. Starbucks’ “Card Membership” feature inspired me with its efficient workflow, but I noticed it lacked flexibility in claiming rewards or browsing promotions while ordering. Dunkin' excelled in simplicity but didn’t emphasize loyalty rewards visually.I also explored apps with engaging loyalty programs and personalized recommendations. Drawing insights from these, I combined elements like an intuitive QR show, visually appealing nearest merchant location, and seamless loyalty tracking to design my wireframes, ensuring a user-friendly and cohesive experience for coffee enthusiasts.
Low Fidelity Prototype Test
I tested the low-fidelity prototype of the coffee shop app with three participants. While I initially had many ideas during brainstorming, testing helped me refine my approach. I discussed the participants' expectations throughout the prototype and gathered feedback on usability and functionality. After the first walkthrough, I explained additional ideas I had considered and collected further insights.
  • Highlighting Best-Selling and Recommended Drinks – Users found it helpful when best-selling drinks were highlighted, making it easier to choose. They also liked suggested pairings or drink recommendations based on their past orders.
  • Seamless Loyalty Program Integration – Participants wanted a more intuitive way to track and redeem their loyalty stamps. Two users mentioned they would appreciate a reminder when they were close to earning a free coffee.
  • Differentiating Ordering from Rewards – Some participants found the stamp collection process unclear and suggested separating it from the main ordering flow. They preferred a dedicated loyalty section where they could review their stamps and rewards independently.
  • Customer Support & Interaction – One participant mentioned that when visiting new coffee shops, they often ask baristas for recommendations. They suggested adding a chatbot or customer support feature for personalized drink suggestions or assistance.
Conclusion
Participants responded positively to the coffee shop app but preferred a more straightforward ordering experience with easy access to loyalty rewards. Simplifying content presentation, highlighting top drinks, and improving reward tracking will enhance the overall user experience. Further iterations will focus on refining these elements based on user feedback.
Branding & UI KIT
For this project, I collaborated closely with the creative and marketing teams from the brand to select the best color scheme for the app design. Together, we brainstormed the most effective approach to create a seamless, easy-to-use user experience (UX) that is complemented by a visually appealing user interface (UI). During this process, I explored several popular coffee shop apps used by coffee lovers to gain insights. Reflecting on my recent coffee shop visit, I realized that while I was excited to try new drinks, navigating the extensive menu and nearest merchant was overwhelming. I found myself unsure of what to order that would suit my mood or pair well with my usual choice. Though I was happy to spend on a quality coffee experience, I didn't want to waste time or money on a drink I wouldn't enjoy. This inspired me to create a coffee shop app that simplifies the ordering process, offers personalized drink recommendations, and seamlessly integrates a loyalty program, ultimately ensuring that customers make the most of their coffee experience.

With this in mind, I selected a range of color tones and created a brand guideline library to inform the UI design. Additionally, we incorporated custom illustrations to enhance key UX flows, improving the overall customer experience as users interact with the app.
Overview
  • Wireframes
  • Branding & UI Kit
  • Final Design
Final Design

Home Page

Home Page
The homepage for the coffee shop's website is divided into six sections, each designed to engage customers and provide relevant information. The six sections include a Hero Banner, Account Registration, Nearest Merchant Location, Best-Selling Menu, Contact Business, and Merchandise with Social Media Links. In hero banner it features a visually appealing image with bold text inviting users to claim an e-voucher for a free coffee. It includes a clear Call-to-Action (CTA) button: "Register and Claim my E-Voucher!"

The goal is to engage customers and encourage them to register for an account. Every section is equipped with a CTA button, guiding users to specific pages like registration, menu details, and store locations for a tailored browsing experience.

The overall design ensures seamless navigation, promotes interaction, and highlights the coffee shop's key offerings while maintaining a clean and visually attractive UI.


Voucher & Claiming Stamp Page

Voucher & Claiming Stamp Page
This voucher page for the customer loyalty program is designed to help users collect stamps and claim rewards. Customers accumulate stamps equal to the number of cups they purchase, tracked through their registered account. To collect stamps, users show a QR code linked to their account to the cashier.
  • Personalized Greeting: The page greets the user by name, creating a welcoming and engaging experience.
  • Voucher Status: Displays the number of vouchers available and stamps remaining to earn a free coffee, keeping users informed about their progress.
  • "Show My QR" Button: Offers a clear and accessible way for customers to present their QR code for stamp collection.
  • Guidance: Includes a section explaining how to collect stamps and redeem rewards, ensuring the process is clear.
The user flow is straightforward: Customers check their stamp and voucher status. They click "Show My QR" to display their code. The cashier scans the QR code, updates the account, and credits stamps. This design effectively combines transparency, simplicity, and motivation to boost user engagement with the loyalty program.

Merchant Location Page

Merchant Location Page
The merchant location page is designed to help customers easily find the nearest coffee shop branches by organizing locations by city. Each section lists outlets in Bandung, Jakarta, Tangerang, and Bekasi, with a "Click here for details" button for more information. Customers can quickly access branch details, including addresses, operational hours, and delivery service options (GrabFood, GoFood, and WhatsApp orders).This ensures a seamless experience for both in-store visitors and online orders.

The UI design is clean and structured, making navigation effortless. Call-to-Action (CTA) buttons direct users to specific branch details, improving accessibility. Integrating delivery service links enhances convenience, allowing users to order directly from their preferred platform. The "Get in Touch to Be Our Partner" section also encourages potential business collaborations.

Contact details and social media links are clearly displayed for easy communication. While the page offers a smooth user experience, adding an interactive map or search/filter feature could further improve usability. Overall, the page effectively provides quick, clear, and actionable information, making it easier for customers to locate and engage with the coffee shop’s services.

Test Prototype

Usability Testing
I tested the high fidelity prototype on 4 participants. Two of the participants saw the prototype for the first time as they did not participate in the low fidelity prototype test. The task for this prototype was to register the account, search for nearest coffee shop in town and adding stamp  for claiming the voucher.
Overview
  • Usability Test Finding
  • Priority Revision
  • Next Step
Final Design
Project Wireframe

Voucher & Claiming Stamp

Voucher & Claiming Stamp Page
This voucher page for the customer loyalty program is designed to help users collect stamps and claim rewards. Customers accumulate stamps equal to the number of cups they purchase, tracked through their registered account. To collect stamps, users show a QR code linked to their account to the cashier.
  • Personalized Greeting: The page greets the user by name, creating a welcoming and engaging experience.
  • Voucher Status: Displays the number of vouchers available and stamps remaining to earn a free coffee, keeping users informed about their progress.
  • "Show My QR" Button: Offers a clear and accessible way for customers to present their QR code for stamp collection.
  • Guidance: Includes a section explaining how to collect stamps and redeem rewards, ensuring the process is clear.
The user flow is straightforward: Customers check their stamp and voucher status. They click "Show My QR" to display their code. The cashier scans the QR code, updates the account, and credits stamps. This design effectively combines transparency, simplicity, and motivation to boost user engagement with the loyalty program.