Eunoia
Eunoia
Eunoia
Eunoia
Eunoia
Eunoia
Eunoia
Eunoia
Eunoia

Designed and developed a front-end responsive website for a coffee shop business to help consumers find information quickly while enjoying the brand aesthetic.

Client

Passion Project

Service

Logo creation (Adobe Illustrator) UX/UI (Figma) Front-end development (HTML/CSS)

Category

Branding & UX/UI

Project summary:

The business needs a website to introduce its story, space, services, and team members. Eunoia is a brand that aims to serve the community with the benefit of flowers, from floral arrangement to a peaceful space. Its characteristic is elegant, modern, and fresh.

In this project, I created the logo for Eunoia, then designed and developed a responsive website using a grid system, graphic, and typographical elements to help consumers find business information quickly while enjoying the brand aesthetic.

Software used: Illustration, Figma, InVision, Brackets

Click here to experience the website

Logo creation:

The name Eunoia has the meaning of well-mind, beautiful thinking. This flower shop will have an open space full of light for the flower-related workshops on the weekend or used as a coffee/tea stop during weekdays.

Eunoia Project - Logo process from mindmapping to signasignage mockup

Homepage wireframe created with Invision with external link to other pages

Wireframe & Prototype

Learning from websites of other competitors (flower shop. coffee shop), I planned out what business information should be available for customers, how to group them into pages.

Based on the information architecture, I constructed wireframes for hallway testing. The participants were asked to guess the purpose of the website and name business information they could find. Users' feedback was incorporated into the prototyping phase, made with Invision.

The 2nd hallway testing was conducted with another group of participants to test the task flow. Participants were introduced to the Homepage, then asked to find some specific information.

Prototype on Figma:

Code available upon request

Images and mockups used in this project: unsplash.com, pexels.com, freepik.com

[Other Works]