Autumn's Coffee Shop - UI Project (Hero Image)

Case Study: Autumn’s Coffee Shop

Role: UI Design

Project Overview: Due to the pandemic, Autumn’s coffee shop needed to shift their business model to a virtual format in order to promote their products and services.

Problem Statement: This coffee shop was a staple in the community over the last 30 years. Due to the pandemic, the business had to shift resources to an on-line/virtual platform while continuing to offer high quality coffee and provide excellent customer service to their loyal customer base.

KEY DELIVERABLES

The project’s digital assets include the development of a mood board, web re-design, social media posts to promote their products, encourage users to subscribe and through the website re-design tell their story while featuring products and services available on-line.

MOODBOARD

This moodboard contains imagery and color scheme to create a warm, inviting and home-like atmosphere seen in coffee shops throughout many communities. The goal of this re-branding is to convey the same feeling in a virtual setting, the feeling a person would get coming into a shop to buy coffee and visit with friends.

STYLE GUIDE

For typography, I chose a combination of san serif fonts for headers (H1-H3); primary navigation, paragraph, table headers and tabular data. I chose Montserrat (Semi-bold for H1-H6 headings); Bitter-Regular and Bold for paragraph, tabular data, buttons and tool tips). For the colors palette I chose a variety of grey/green, maroon, Payne’s gray and light yellow/green.

INSTAGRAM ADS

These ads are used to promote a Virtual Concert Series and encourage users to subscribe to the coffee shop’s mailing list with the goal of expanding their on-line store and virtual programs.

WEBSITE WIREFRAME (LO-FI)

(Scrollable)

HIGH FIDELITY DESIGN

(Scrollable)

KEY TAKEAWAYS

The challenge of this project was to create a design that highlights their character, intimate coffee shop atmosphere within a virtual realm. The next steps would be to take website re-design assets, created in Photoshop and develop this in either WordPress or another CMS tool. Finalize content, set up email marketing solutions for weekly campaigns and lastly, develop an e-commerce solution for on-line orders and store purchases.

AliExpress | Autumn’s Coffee Shop | Bill Gallen Fine Art | Design For Good | DCI Marketing | Fitzgerald Collingsworth & Associates | Gibson Guitars | NIKE SNKR App | Ruach Inc.