— Client

The coffee-centred business that delivers the best unique flavours and aromas to true lovers through e-commerce, offline roastery, shop and cafes.

View website
— Task

Create a platform that would cover all the needs of coffee enthusiasts in Portugal.

— Our role

Strategy, Interface design, Graphics, Development



Coffee.pt is every coffee lover’s digital paradise and one stop for all the details about coffee in Portugal. The project fuels locals, expats and immigrants with delicious coffee, valuable information and a heart-warming community.

  • overview_first_column_picture
    Blending in newcomers
    Uniting coffee lovers coming from all over the world in Portugal.
  • overview_second_column_picture
    pouring the knowledge
    Guiding the locals through the world of specialty coffee.
  • overview_third_column_picture
    Brewing a community
    Creating a community of true-hearted enthusiats of coffee.

Key features to satisfy the coffee cravings.

At Flatstudio we constantly strive to deliver the finest user experience. This time we did so by introducing a set of carefully designed features like hand drawn illustrations that give the page a beautiful personal touch and a super friendly and intuitive layout. Each of these features are developed to accompany and help the users in their coffee quest.

  • 01 — Overview

Morning essentials put together on the main page.

The main page is designed to give welcoming vibes. The goal was to lay out the information in a way that would leave the users in awe of the content. The design organizes all the elements (UX and content) aptly and appeals to the coffee enthusiasts, encouraging them to take the desired sip.

  • 01 — Main page
  • 02 — Mobile version

Coffee blog to keep up with the coffee trends.

We know that the coffee community takes their blogs seriously (so do we). We chose an elegant and modern design that makes the page look aesthetically pleasing and keeps the focus on the content.

  • 01 — Blog page
  • 02 — Mobile page

Brewing hacks and techniques you didn’t know existed.

Never heard of a cowboy coffee? No worries! The brewing guides have got you covered. We made sure that the guides are easy to understand and navigate through so that the users don’t miss out on something interesting (like roasting coffee in a popcorn maker).

  • 01 — Blog category
  • 02 — Mobile page

What’s so special about our brewing guides.

Not to brag or anything but our designs have been approved by real life baristas (the content will also be written by them). We used formatted text to draw the user’s attention to the content and hold them captive (at the page of course).

  • 01 — Open article
  • 02 — Mobile article

Read all things about coffee in the simple article.

Coffee.pt has an amazing collection of content about coffee and topics related to it. We made their articles look elegant and chic (something the users would love to binge on).

  • 01 — Open short article
  • 02 — Mobile adaptation

Good things do come with a tag.

We did what we’re best at! Simplified things by displaying all the articles matching a tag and presenting them beautifully (the design speaks for itself).

  • 01 — Tag page
  • 02 — Mobile adaptation

Explore the world of coffee inside out with guides collection.

For all those constantly seeking new experiences (and endlessly scouting google), we have put together a collection of city guides. The page is designed in a way that subtly grabs attention and helps the users find places that would perfectly compliment their cup of coffee .

  • 01 — City guide
  • 02 — Mobile city guide

Discover the coffee culture in a city guide.

Every city has certain traditions and places that are associated with coffee. The guide beautifully puts together this information on the digital paper (in a systematic way) for the users.

  • 01 — City page
  • 02 — Mobile version

Make wise decisions with an open guide.

Who doesn’t like to read reviews? (especially when they’re about coffee). We’ve neatly consolidated all the reviews ‘good and bad’ in our open guide. It’s like reading a Time Out website that’s focused on coffee.

  • 01 — City coffee guide page
  • 01 — Mobile pages

Dreamy-places-to-visit at your fingertips.

We created this page to present the list of artsy places that coffee lovers would not want to miss. The design and content compliment one another like coffee and croissant.

  • 01 — Open coffee shop
  • 02 — Mobile version

Shop all you want on one place.

After having read and understood about coffee and specialty coffee, the users will want to stock their jars with delicious and aromatic coffee. That’s when they navigate to coffee.pt shop. We designed the shop to display the items methodically and enhance the shopping experience.

  • 01 — Coffee shop
  • 02 — Mobile version

Treat the taste buds with speciality coffee.

One can’t afford to go wrong while sorting their coffee, especially a specialty coffee. With our filters in place, the users are sure to sort and find the coffee they like in a blink of an eye. When dealing with filters, having too many options can overwhelm the customers. Too few, and you prevent the users from finding what they’re looking for. We did good amount of research and figured out a filter design that perfectly balanced the number of options and the aesthetics.

  • 01 — Speciality coffee page
  • 02 — Coffee filters page
  • 02 — Mobile pages

Know more about the coffee in a product overview.

Coffee.pt is not just another ecom store. It not only brings the best-in-class coffee to the users but also educates them by sharing valuable information about coffee. We designed the page to show all the necessary details a user needs to know before taking their credit cards out.

  • 01 — Open coffee product
  • 01 — Mobile version

Spreading the coffee aroma on every other page.

One of the many things that we preach at Flatstudio is consistency which shows throughout the website. Every page of the site (be it guide, shop, or my cart) is designed with equal care to smoothly align the content with the elegant yet classy theme.

  • 01 — My cart
Old browser .

Download or update your browser to view this website correctly.