jcarney

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.

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

Features

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

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.