Valley View Coffee started as a concept that I expanded by creating its brand, web design, and website build.
Bryn Miller
UX/UI designer
Spring 2025
Date
3 months
Timeline
UX/UI DESIGN - WEBSITE BUILD - BRAND DESIGN RESPONSIVE DESIGN - BUSINESS CONCEPT- RESEARCH
2025
Develop the idea of Valley View Coffee and describe the company in a creative brief.
Research and create a brand voice and brand guide for the coffee company.
Design a responsive website and build it using Webflow.
Present the website to stakeholders and receive and apply feedback.
My role for Valley View Coffee varied depending on the step: graphic designer with the brand book, UX/UI designer to create the website design, and NCLC developer to build the website.
I was responsible for creating a digital presence for the company, so it was important bridge the brand identity with the website design.
Research
Research other coffee companies to gather inspiration and ideas for Valley View.
Gather logo and branding ideas from Behance, Pinterest, etc.
Define
Curate a moodboard to determine the feel and look of Valley View Coffee.
Develop a creative brief including the company's mission statement, target audience, and identity.
Design
Design brand book containing elements such as brand identity, logos, colors, typography, mockups, etc.
Design web and mobile pages for the website interface in Figma.
Build
Use the designs made in Figma as a reference for building the website in Webflow.
Adjust other breakpoints such as tablet and mobile to ensure proper UI responsiveness.
To begin the journey of creating Valley View Coffee's creative brief, I researched other coffee shop websites and their brand identity. This is the website research I performed.
To start, I begun with a brand noun list, words that describe Valley View which helps create a relative logo. Here's the list I started with:
coffee bean
valley (line)
cactus
mug
desert textures
sun
letter V
heat lines
Website research image:
In another document, I noted logos and colors that suited Valley View Coffee. After developing the brand, I used Google Gemini to create a realistic idea of the coffee shop and its location.
From the brand noun list, I came up with three initial logo ideas. Here they are:
After an initial review and critique, I understood that none of these logos were strong. Going back to the drawing board, I created more logo iterations and landed on this logo.
Keeping the type structure from the second logo design, I created a mountainous image inside a pill, with the sun representing a coffee bean.
Coming up with this original logo was honestly the hardest part of this entire project. The logo and brand act as a foundation for the entire rest of the project and I didn't take that lightly.
BRAND BOOK
This is the brand book made for Valley View Coffee, based on the Creative Brief and research performed earlier.
This was foundational before the creation of the website, establishing brand rules and guidelines.
UI LIBRARY & BRANDING
The brand book is cool and all, but here's a condensed version of some of the elements included in the book in one place.
Main logo
Fonts
VVC mug
Colors
Part of developing the creative brief for Valley View is determining the customers of the company. They are known as personas.
Persona 1
“I need a quiet place to enjoy coffee and lock-in on homework”
Samantha is college student who is motivated to do her homework and spend time with friends. She loves aesthetic environments, both indoors and outdoors. Occupationally, she works part-time at a restaurant during the afternoons. Since Samantha wants to hang out with her friends but also do homework, a coffee shop is her go-to destination.
Frustrations
Long lines
Busy environments
Online ordering issues
Needs
Ordering efficiency
Quiet areas to focus
Easy digital navigation for ordering
Louise is in her early 60s and enjoys her coffee every morning. Caffeine is her motivation, so coffee shops are a frequent stop for her. Louise appreciates the atmosphere of Valley View Coffee because it blends nicely into the outdoor environment of the shop. The peace and tranquility of the view is something that rejuvenates Louise and gives her the energy to start her day.
Frustrations
Loud, sudden noises
Getting cold
Getting lost on her phone when trying to accomplish something.
Needs
Quiet, reflective atmosphere
Temperature regulated by the outdoors
Simple, intuitive ways to navigate the website easily
Persona 2
“The valley view and quiet atmosphere rejuvenate me.”
Persona 3
“Nothing better than coffee after a morning hike!”
Patrick is a nature-loving guy who often goes on hikes and outdoor adventures. Patrick has found Valley View Coffee to be a place where he can either work or relax after a hike. Sometimes he goes in the afternoons if he’s working, but most of the time he tends to go in the evening for relaxation.
Frustrations
Crammed indoor areas
Low-quality coffee
Needs
Indoor spaces that incorporate the outdoors
Quality coffee
This user-flow represents the steps a general user takes from entering the website to placing an order online.
User-flow key
User-flows help ensure that every step is planned for on the website, not just static screens. This includes accounting for pop-up windows and UX messaging.
WEBSITE SITEMAP
From determining the paths that the users will mainly take, it was time to organize the information through navigation and page connections.
WIREFRAMES
Now that I have the site map planned, the next step is to visualize each screen. The main focus of this step is UX structure and proper design hierarchy.
Landing page
Community page
Next, I integrated the established UI properties to the wireframes.
Landing page
Community page
CHECK OUT THE WEBSITE BUILD
Click me!
THANK YOU
I appreciate the time you took to check this out.
💖
Back to top