Coffee Snobs App Prototype, Built in Framer with No Code

Coffee Snobs is a fun prototype for a coffee app. It combines my love for coffee, health and some lightweight social features. It allowed me to explore the idea quickly by using established UX patterns.

Caffeine and Cortisol

The health aspect is simple. The app knows the wake up time of a person by reading health data on iOS. Then it recommends the best time to get a coffee. Here’s why. Drinking coffee right after waking up is not optimal. We get a natural spike in cortisol when we get off bed, anyway. Getting a cup of coffee at the same time reduces the effectiveness of caffeine. We drink great coffee for the taste, but feeling the caffeine kicking in is also nice.

The Feed

Where to get the coffee depends on various conditions and preferences. Is it raining? Is it cold outside? Do I want to checkout a new coffee shop or visit a favorite one? The feed adjusts its recommendations based on user input. The app also suggests and shows coffee related events from the calendar. To top it up, there is a short list of fellow coffee snobs to connect with. Pretty simple UI and well understood UX.

The Design

I designed the prototype from beginning to end in Framer with no code. It uses off-the-shelf Framer components like Scroll. All animations and transitions are beautiful and smooth. Just test the prototype with a screen at 60Hz or 120Hz. The rest of the UI is pretty simple. Some Phosphor Icons and custom components. That’s it.

Coffee Snobs Prototype on Framer Showcase

Checkout the app prototype below as it was designed and built in Framer. If you use Framer, you can duplicate the prototype and explore how it was built.