Cleef Coffee Coupon Webapp — Case Study

Project Overview

A Coupon
Platform
For Coffee

Cleef Coffee is a small, community-focused coffee business known for its warm atmosphere and fresh brews. To support growth and customer engagement, we designed a web app that allows the business owner to easily create and share digital coupons — making marketing as smooth as their coffee.

The platform is designed to help boost foot traffic, reward loyal customers, and simplify promotions — built for non-technical owners who value simplicity over complexity.

Client

Cleef Coffee

My Role

UI/UX Designer — Research → Wireframes → UI → Testing

Tools Used

Figma · Slack · Adobe XD

Timeline

2 Weeks Sprint

Usability Test Participants

Core App Screens

Share Methods

01 — Problem Statement

The Challenge
We Solved

Background

Small business owners often struggle with promoting deals and discounts in a simple, digital way. Many are not highly technical, so creating and sharing professional-looking coupons can feel intimidating. This project explores a digital coupon web app built specifically for owners like Cleef Coffee's — where the process is: log in, create a coupon, preview it, and share it in just a few clicks.

The Core Problem

Local cafés, salons, and small shops rely on word of mouth or basic social media posts to attract customers. But designing a coupon that looks professional and distributing it effectively can be frustrating without the right tools. Owners need a simple, step-by-step solution that removes technical barriers while keeping things quick and efficient.

Business Type

Local Cafés & Shops

Physical small businesses that serve walk-in customers and rely on community connections and local marketing.

Technical Literacy

Basic App Users

Comfortable with WhatsApp and Facebook, but not with design or marketing tools — needing a guided, intuitive flow.

Distribution

Digital & In-Store

Coupons shared via messaging apps, social media, or by generating a QR code that can be printed and placed in-store.

02 — Research

Insights &
Evidence

I compared competitor platforms and conducted interviews with two real small business owners to discover gaps and unmet needs in today's coupon tools.

Competitive Analysis

Platform	Target Audience	Key Strength	Key Weakness	QR Share	Templates	Non-Tech Friendly
Loyalty	Physical businesses	Works with POS, auto-updates	High cost, limited customization	✓	—	—
Shopify	Online stores	Built-in promotion tools	Platform-locked, complex setup	—	✓	—
Loyverse	Micro businesses	Free tier, very easy to use	Basic design control only	✓	—	✓
Cleef App	Coffee shop owners	Guided creation + share in one flow	Early stage	✓	✓	✓

User Interviews

Sarah T.

Owner — "Bean & Brew" Coffee Shop

Wants a simple way to update menu, events, and announcements without needing a developer
Finds current website editors confusing; wants drag-and-drop simplicity
Values online ordering and booking tools for customers
Needs promotional tools that don't require constant learning or maintenance

Daniel K.

Owner — "SparkleCraft" Jewelry Store

Needs an easy-to-manage online store with payment and inventory tracking
Wants professional-looking templates without hiring a designer
Finds analytics and sales tracking essential but overwhelming in complex platforms
Needs integrated analytics without installing extra third-party apps

User Personas

Sarah T.

Age 32 · Coffee Shop Owner · Mother of one

CaringCommunity-FocusedOrganized

"Sarah runs her shop alone. She needs a no-fuss way to attract customers and run promotions — without ever touching a line of code."

Goals

Easily create and share promotions from a simple dashboard
Accept online orders and reservations to reduce phone calls
Maintain a professional online presence without a developer

Frustrations

Complex website editors are overwhelming and time-consuming
Limited knowledge of web design and promotional tools
Wants tools that don't require constant updates or re-learning

Daniel K.

Age 28 · Jewelry Store Owner · Single

BusyTech-SavvyGrowth-Minded

"Daniel handles production, marketing, and web management alone. He values efficiency and sales data but has no time for technical troubleshooting."

Goals

Manage his online store and promotions with minimal effort
Track sales, coupon performance, and customer behavior easily
Have a polished, professional digital presence that builds trust

Frustrations

E-commerce platforms with complicated settings are confusing
Lacks time to troubleshoot technical issues on his own
Needs integrated analytics without installing extra apps

03 — Define

Project Goals

To create a successful product, we carefully analyzed both user goals and business goals, then combined them into clear project goals — ensuring our design meets real user needs while supporting the business strategy.

User Goals

Create coupons quickly without technical knowledge
Track coupon performance in real time
Share coupons easily through familiar channels
Look professional without hiring a designer

Project Goals

Intuitive dashboard with clear "Create Coupon" CTA
Analytics dashboard showing views and redemptions
Built-in share options: link, QR code, and social media
Pre-designed, customizable coupon templates

Business Goals

Simplify coupon creation and management for owners
Collect business insights to improve promotions
Increase customer engagement and foot traffic
Build brand reputation through polished digital tools

Problem Statements & Hypotheses

Problem

Small business owners struggle to promote their business effectively using digital tools.

→

Hypothesis

If owners have a simple web app to create and share coupons, they'll promote their business more frequently and effectively.

Problem

Existing digital tools are either too complex or not designed for local shops and cafés.

→

Hypothesis

If the app includes visual templates and quick sharing options (WhatsApp, QR, link), owners will find it easier to reach customers.

Problem

Owners lack visibility into what promotions are performing best and why.

→

Hypothesis

If owners can track coupon performance (views, redemptions, expirations), they will make better marketing decisions over time.

Problem

Non-technical business owners need a simpler, guided creation flow.

→

Hypothesis

If the app is visually clean and intuitive, non-technical users will adopt it quickly without extra training or support.

04 — Ideate

Architecture
& Wireframes

A simple structure designed for small business owners. From login to dashboard, users can easily create, share, and track coupons through four main sections — organized for quick access and clarity.

Information Architecture

User Flow

Users sign up or log in, create a coupon, preview it, then share it through multiple channels. Afterwards, they track performance in Analytics and History — making the whole process fast, guided, and effortless.

Wireframes

The wireframes outline the main user journey — from signing in to managing coupons. Each screen focuses on simplicity: a clean dashboard, clear form sections, easy sharing options, and a history view for tracking.

Dashboard

Create Coupon

Coupon Preview

Share Coupon

Coupon History

Layout Decisions

A brief overview of how each page's layout was planned based on UX research, user behavior, and content priority.

Log In & Sign In Pages

Centered single-column layout to reduce cognitive load. Only essential fields visible — no distractions. Brand logo and warm tone to create trust from first interaction.

Dashboard Page

Left sidebar navigation for persistent access. Top area shows performance summary cards. Main content area highlights active coupons with prominent "Create Coupon" CTA.

Create Coupon Page

Step-by-step form layout with only essential fields: name, discount, expiry. Live preview panel on the right updates in real time, giving owners confidence before sharing.

Share & History Pages

Share options presented as clear, tappable cards: QR code, WhatsApp, direct link. History page uses a table view sorted by recency with quick-access performance metrics.

05 — UI Design

Design
System

The UI is built to feel warm, modern, and welcoming — reflecting the cozy vibe of a small coffee shop. The design uses soft cream tones, rounded thinking, and a simple layout to help users quickly navigate and focus on creating and sharing coupons.

Color Palette

Instead of pure white, I chose a soft cream background to reduce harsh blue-light glare. The palette combines warm brown tones with coffee-inspired orange accents to make users feel the brand essence of a cozy café.

Orange #E8570A

Orange Lt #FF7A32

Brown #2C1A0E

Cream #F5EFE6

Black #0D0905

Brown Md #7A4A2A

Cream Dk #EDE3D6

Warm Gray

Cream Lt #F9F4ED

Text #6B4E38

Typography

The Rubik font was chosen for its clean and approachable look — friendly and modern, making it easier for business owners to read and interact with content without visual distraction.

Font Name — Rubik

H1 · Rubik Bold 43px

H1 — Rubik Bold 43px

H2 · Rubik Semi Bold 37px

H2 — Rubik Semi Bold 37px

H3 · Rubik Semi Bold 32px

H3 — Rubik Semi Bold 32px

H4 · Rubik Bold 28px

H4 — Rubik Bold 28px

H5 · Rubik Medium 24px

H5 — Rubik Medium 24px

Title 1 · Rubik Medium 21px

Title 1 — Rubik Medium 21px

Title 2 · Rubik Regular 18px

Title 2 — Rubik Regular 18px

Body 1 · Rubik Regular 16px

Body 1 — Rubik Regular 16px

Body 2 · Rubik Regular 14px

Body 2 — Rubik Regular 14px

Caption · Rubik Regular 12px

Caption — Rubik Regular 12px

UI Elements

The UI elements are designed to feel intuitive and familiar — clean buttons, sidebar navigation for quick access, and CTA sections that guide users toward key actions like creating or sharing coupons.

06 — Usability Testing

Testing &
Iterations

The primary objective was to evaluate how easily small business owners — especially those with little technical experience — could navigate and accomplish key tasks within the app.

Test Setup

5 participants — coffee shop owners and small business operators
Remote moderated test using the Figma prototype
Conducted in a natural environment at each participant's own pace
Simulated a typical small business workflow on laptop

Tasks Given

Log into the web app as a returning user
Create a 15% discount coupon with an expiry date
Share the coupon via a QR code to a customer
Check the analytics dashboard or coupon history

⚠ Key Findings

3 out of 5 users didn't immediately notice the "Create Coupon" button — it wasn't visually distinct enough on the dashboard
2 users were unsure where to find coupon performance data for previously created coupons
All users enjoyed the warm color palette but suggested action buttons should stand out more prominently
Some users hesitated at the sharing step, unsure which option to choose first

✓ Improvements Made

Enlarged the primary CTA button and added a descriptive label: "+ Create New Coupon"
Added a shortcut "History" button on the dashboard for faster access to past coupons
Improved contrast between action buttons and background to increase visual visibility
Added step indicators and tooltips during form completion to reduce hesitation and confusion

07 — Final Outcome

The Result

After several rounds of planning, designing, and refining, the coffee coupon web app evolved into a simple yet powerful tool for shop owners. The final design makes it easy to create, customize, and share coupons in just a few steps — all from a clean, intuitive dashboard. Built with the owner's needs in mind, the experience feels efficient and user-friendly, helping businesses grow customer loyalty without any extra effort.

View Full Prototype →

Reflections

Key Learnings

Simplicity Is Strategy

Removing unnecessary steps and options isn't lazy design — it's the right call for non-technical users. Every removed friction point became a conversion win.

Brand Tone Drives Adoption

The warm cream-and-orange palette wasn't just aesthetic. It made owners feel comfortable — like the app understood their world, not just their workflow.

Test Early, Test Often

Usability testing revealed critical CTA visibility issues that prototyping alone missed. Real users in real context caught things no design review could predict.

CLEEF
COFFEE
WEBAPP

A Coupon
Platform
For Coffee