Details

Tools:
Adobe Illustrator, Adobe Photoshop, & Adobe XD
Date:
December 2021

Overview

Aroma Cafe is a project where I produced a brand identity for an imaginary cafe and a UX design for the website's prototype. This project is split up into two phases. One is for the logo and packaging, and two is for the final website user experience.

CHALLENGE

The prior company's branding didn't convey friendliness or vibrancy. Brighter illustrations, warmth, and less dullness will give the rebrand more personality and encourage consumers to eat at the café.

PHASE ONE

Logo and Packaging

Logo DeSIGN

Sketches

Final Logo

The new logo is effective because it displays a modern and aesthetically pleasing design by using simple line work as the concept. It also reflects the company well as it shows a teacup with a coffee bean and line work to add balance. The colours for the branding image are green, red-orange, and peach. These are bright, vibrant, and will come off as a friendly, eye-catching cafe.

BRANDING

Packaging

A vital role in every company is the brand theme. The new branding concept uses leaves to represent coffee leaves as a noticeable element. They are made very minimalistic to blend in with the logo’s theme. Bright colours on the food packaging represent a vibrant and friendly theme to attract customers.

PHASE TWO

Website Design

RESEARCH

User Persona

Coffee shop customers are, on average, between the ages of 20 and 30, making up 51% of the general population.

Empathize With The User

PROTOTYPES

Low Fidelity

High Fidelity Prototype

To reduce the number of pages and make the website straightforward and user-friendly, it is a one-page website.

The new front end website design displays an effective rebrand. This shows more rounded elements, light gradients, and shapes throughout the page to add a nice modern look. The colors are also muted, giving the website a clean and updated look. More icons are also used to make each section more easily identifiable.

FEATURES

Online Delivery

MENU ITEM

PAYMENT

Adapting To Mobile

A mobile mockup is essential to determine the placement of elements on different screen sizes when viewed online. Therefore I also created a UX/UI design on a mobile screen.

Get In Touch!

Feel free to contact me for any collaborations or to just to say hi.