Madcap Coffee

Preview

Preview 1

Full orderSubscription, two custom drinks and checkout, 1:25

Preview 2

Quick orderFrom the home screen to a matcha latte, 0:27

Home screen: Ethical coffee from seed to cup, with four menu buttons — **Home**Order, subscribe, find a cafe or view your account

Order menu showing the Farmer Street store and featured items — **Order menu**Your store and featured drinks up top

Espresso section with line-drawn cups and prices — **The menu**Espresso, brewed coffee, tea, on tap and seasonal

Harvest Moon seasonal drink with options — **Drink details**Tasting notes and a starting price

Customization options for milk, temperature, sweetness, espresso and extras — **Make it yours**Milk, temperature, sweetness, espresso and extras

Nitro Cold Coffee detail — **On tap**Nitro cold coffee and more

Your pickup order with two drinks, subtotal, tax and checkout — **Pickup order**Every choice listed, with tax and total

Order placed screen with total and a 15 minute wait time — **Order placed**Your total and wait time

About this app

Transform your daily ritual into an elevated experience, whether you're at home or on the go. Order and pick up at Madcap's nearest cafe, or curate a subscription of ethically sourced, high-quality coffee.

Place an order and you start at your store, 1413 Farmer St in Detroit, with featured drinks at the top of the menu. Below them are espresso drinks, brewed coffee, tea, coffee on tap and seasonal specials like the Harvest Moon, a seasonal blend with cocoa nibs, red apple and nougat.

Every drink can be customized: milk, temperature, sweetness, how much espresso and extra shots. The price updates as you go. Your pickup order lists every choice for every drink, adds tax, and tells you how long until it's ready.

The subscription screen shows the blend you chose, when your next bag arrives and whether it has shipped, with buttons to edit the order or change the address.

I designed and built the app on my own in fall 2026 with the Apple Developer Academy. See my process below!

Features

Order ahead

Pick a drink, customize it and check out for pickup at your store.

Full customization

Five kinds of options per drink, with upcharges added to the price as you choose.

Clear receipt

Each drink's choices, quantity, subtotal, 6% Michigan sales tax and total before you pay.

Wait time

Know when your order will be ready as soon as it's placed.

Coffee subscription

Your chosen blend, next delivery date and shipping status in one place.

On-brand design

Square black bars, line-drawn cups and the Blender typeface throughout.

Drink options

Milk	SkimOatBreveWhole
Temperature	WarmHotIced
Sweet	NoneExtraHalf
Espresso	DecafSomeDouble
Extras	Extra espresso, triple +$2.00Extra espresso, quad +$2.00

Version history

Version 1.0 · Oct 2026

Oct 12, 2026
Subscriptions
Subscription screen, bagged coffee and shared customization options.
Oct 6, 2026
Home screen
The branded home screen and a shared cart across the app.
Oct 2, 2026
Cart and checkout
Pickup order with line items, tax and totals, plus the pill option picker.
Sept 28, 2026
Drink options
Milk, temperature, sweetness, espresso and extras with prices.
Sept 24, 2026
Menu and ordering
Drink model, menu tiles, the drink detail page and order confirmation.

Roadmap

Next
Find a location Coming soon
Choose the nearest cafe instead of a set store. The button is on the home screen, waiting to be wired up.
Next
Your account Coming soon
The account screen behind the View Account button.
Later
Manage subscription Planned
Editing the order, changing the address and canceling, all in the app.

Process

Step 01
Where it started

Originally the structure was based off of a lofi design which later became the blueprint for a hi-fi design.

Both done in Sketch, this space gave me all the tools I needed to create a sleek UI.
Step 02
Learning the code

Beginning as a project for Apple Developer Academy, we actually built an ice cream ordering app as a group to learn the basics of the coding process.

I had a lot of fun with this - I even sketched little ice cream designs to practice integrating my own images.
Step 03
Applying what I learned

Using the ice cream project, I took the code I learned there and applied it to my app.

I began finding gaps in the program's user flow so I made more features and built on what I already made.
Step 04
Final touches

After the app itself was finished I created a mock app product page.

From Lo-fi to finished product, this whole process was a great time. I really enjoyed integrating a company's branding into UI design.