overhead view of coffee cups on wooden table

Designing in Figma: A Case Study

At the end of 2021, I took my design career in a different direction. With no UI/UX experience, I jumped into learning and designing in Figma. It is fantastic software. The following images and descriptions are practice pieces I created while learning the platform.

Brew House eCommerce Mobile Site

Client: Brew House Coffee Shop
Tools: Figma; Adobe Photoshop; Adobe Illustrator
Role: Research; User flow; UI/UX design; Style guide

Project Overview

The task was to design an eCommerce mobile site for a local coffeehouse. I wanted to give users a simple, smooth experience for getting their hands on the freshest brews in their community.
mobile screens mockup of coffee website

Please visit Brew House on Figma for a complete look at the entire build. You DO NOT need a Figma account to view.


Must Have:

  • Clear navigation
  • Product pages
  • Multi-product cart
  • Secure checkout
  • Brand establishment
  • Means to contact the business

Should Have:

  • Product reviews
  • Information about the business
mobile mockup of coffee website navigation

Designing in Figma: Styles

I wanted to design an experience that users would feel welcome to visit. The clear color choice included browns which symbolize honesty, reliability, stability, and comfort. I also like how cyan pairs with it and symbolizes balance, calmness, and clarity.

Since this was a case study (read: zero budget), I chose a font style from Google Fonts. Source Sans Pro is an excellent sans-serif font with several weights. And it’s scalable and easy to read.

Many of the graphics I used I gathered from Unsplash.com. Of course, I had to put my unique touches on them to further develop the Brew House brand.

Please visit Brew House on Figma for a complete look at all styles and components.

moldboard for coffee house website
style guide for website fonts
style guide for website colors
style guide for website buttons
style guide for website icons
mobile screen mockup for coffee website

Thank you for visiting!

Feature image provided by Nathan Dumlao.

Recent Posts