Bones Coffee shopping and subscription app

Bones Coffee roasts flavored coffee and sells it in bags covered with bold, illustrated artwork. Techcelerant designed and built its shopping app for iOS and Android. The app lets customers browse coffee, cocoa, gear and bundles, try a flavor sampler, sign up for recurring deliveries, get push notifications about new releases, and pay through more than one payment gateway.

The client

Bones Coffee is known for unusual flavors and packaging that looks like album art. It sells whole bean and ground coffee, cocoa, ready-to-drink cold brew lattes in cans, mugs and other gear, and bundles. Its customers are fans who like to collect new flavors and who drink enough coffee to want a regular delivery.

The problem

With so many flavors, new customers often didn't know where to start. Returning fans wanted an easy way to reorder or set up a subscription, and the client's team wanted a direct line to them when a new flavor or limited release dropped. A mobile website couldn't send those alerts, and managing subscriptions on it took too many steps.

The app needed to:

• Help first-time buyers find a flavor they like.
• Make subscriptions simple to start and manage.
• Let the brand announce new products directly.
• Offer the payment methods customers already use.

What we built

The home screen is built around discovery:

• A header with the Bones Coffee skull logo, a menu and a bag icon with an item count.
• Tabs for Home, Coffee & Cocoa, Gear and Bundles.
• A large banner for featured products, such as the cold brew latte cans, with a "Shop now" button.
• A "What's your flavor?" section that introduces the sampler pack: customers pick any five coffees in small bags to find their favorite, then tap "Choose your flavors."
• Product rows by size, like 12oz bags, with a "View all" link.
• Subscription plans that let customers choose a coffee, size and delivery frequency, then pause, skip or change the order from their account.
• Push notifications for new flavors, restocks and promotions.
• A checkout with multiple payment gateways.

Design decisions

The packaging is the brand, so we built the interface to show it off. The app uses a white background with black headlines and lets the illustrated bags and cans supply the color. Product images are large enough that customers can see the artwork, which is part of why they buy.

Bones Coffee's orange is the accent color for buttons like "Shop now" and "Choose your flavors." Every main action on the home screen uses the same orange, so it's always clear what to tap next.

We placed the sampler near the top of the home screen. It answers the main question new customers have, which is which flavor to try, and it leads naturally into a full-size bag or a subscription once they find one they like.

The headline type mixes a bold sans serif with a hand-drawn script for featured products. That echoes the playful lettering on the cans and bags while keeping menus and prices easy to read.

The result

Bones Coffee has its own app on the App Store and Google Play. New customers can try a sampler and find a flavor, fans can set up and manage subscriptions on their phones, and everyone can shop coffee, cocoa, gear and bundles with the payment method they prefer. The client's team can tell customers about a new flavor the day it launches with a push notification.

For more on recurring revenue models like this, see our post on subscription ecommerce.

Thinking about an app for your product brand? See our mobile app development service or get in touch.