TYPE
Website
CONTRIBUTION
UI/UX Design
Research
Visual Identity
Logo Design
SEO optimization
Development
TIME FRAME
5 weeks
01 - A regular's perspective on untapped potential
When the owner of my daily coffee spot mentioned he wanted to create a website, I jumped at the chance to help. Here was a shop with genuinely great coffee & zero digital presence beyond Instagram, run by someone who perfectly embodied the laid-back, approachable vibe that his Gen Z & Millennial customers were drawn to. The brand felt like a blank canvas with tons of potential, & I could already see how his authentic personality could become a major selling point online.
To kick things off, I sent the client a questionnaire to see how he currently viewed his brand & what references inspired him. "Just chill, simple vibes" was a standout phrase when asked what he expected from this project. We also aligned on the ultimate goals for the project:
01 - Launch website with SEO optimization to…
Expand the brand's reach beyond the local residents for increased foot traffic
02 - Integrate e-commerce for merch sales to…
Nurture an additional revenue channel
02 - Understanding the brand vision & requirements
His responses revealed key brand attributes: No frills, straightforward, easy-going, high quality, community, nice, minimalist. His only technical stipulation was to have an e-commerce section that could link to his current Square POS, to sell merch & gift cards.
This initial conversation established the foundation for the project: creating a digital presence that would authentically represent the shop's laid-back personality while providing practical functionality for expanding their business.
03 - Standing out in a sea of coffee shops
Those who live in NYC know that going to coffee shops & finding your regular "spot" is a ritual. Being located in Brooklyn specifically made Before Coffee part of that ritual within a bustling coffee scene that will only keep growing. This also means there's more competition within arm's reach, so I did a deep dive into surrounding coffee shops to see what each had to offer.
Compared to the others, Before Coffee's modern yet nostalgic branding is already trending with the Gen-Z & Millennial crowd. The shop's owner is a valuable asset given his friendly demeanor & proximity in age to his target audience, lending the shop a comfortable & relatable energy. However, other shops like Fiction BK & Brooklyn Ball Factory have an inherent physical advantage through larger spaces that afford seating & longer stays.
04 - It's all about the vibes
Given how chronically online most of us are, I also wanted to know exactly how people were searching for & finding out about new coffee shops, & what would influence them to visit.
Through interviews with people in their 20s-30s living in the NYC metro area, I noted this audience is drawn to local businesses with a cultivated "vibe". While they mostly rely on Google to find pertinent info when searching (on their phones) for new shops to visit, they do often go a shop's website to get a comprehensive look at their menu & additional visuals. Both factors are highly influential on their perception of the quality of the shop.
Tech-savvy & aesthetics-driven; have high expectations for both the quality & visual appeal of a shop's website
Perceive websites as being a lower-tier source of information, often find them outdated
Often resistant to corporate chains & want to feel patronage contributes positively to a local establishment/community
Looking for authentic local experiences they can share with others to demonstrate cultural awareness
05 - Mapping a key persona & her journey to the website
An important fact: the median population age in Brooklyn is 37.5, placing a majority of the surrounding customer base squarely in the Millennial camp. Knowing this, combined with insights from interviews, I created a persona in which to center the design process moving forward. Meet Maya; she's not yet a Before Coffee customer, but she's about to be!
It was also helpful to visualize how she might actually find her way to the shop as a first-time customer. She's influenced by social proof when forming an opinion on a new business, so it helps that Before Coffee currently has 4.9 stars with 200 reviews on Google. A glowing collective recommendation like this will surely serve to propel new visitors to the site.
06 - Foundations in wireframes
Having a good foundational understanding of how to tackle this website build, I created low-fi wireframes of each page. I tried a few different layouts for the home page: some more simple & others more experimental, with elements like photo galleries & social proof sections.
🧐
Client Feedback on wireframes
1) The owner requested to not be highlighted in the "About" page, preferring to focus on the shop's high-quality offering.
2) He also requested to simplify the home page by removing extra sections like social proof to focus on images & short copy. I was okay with letting go of the social proof section; his target demo would get that info on Google before arriving at the website anyway.
07 - Validating the approach through user testing
Even though the site was pretty straightforward, I ran some early-stage testing to make sure visitors could find important information quickly. I prioritized testing on mobile based on my research showing that, contextually, most people looking up new coffee shops to visit were doing so on their phones.
Parameters:
Tasks: Find the following - Instagram link, shop location, specific menu item
Goal: Validate findability of key info users will want to know on the fly
08 - Navigating conflicting visions
Throughout the process thus far, I'd been gathering inspiration images for the visual identity I wanted to capture on the website: a balance of white space minimalism with pops of color & photo accents.
[ Drag images to your liking ]
Sharing this general direction with the client, Building on his previous feedback, the owner shared a reference website he felt captured the simple & minimalist look he wanted. While this example fit the description of "minimalist" & "effortless", it felt detached & lacked personality. Probably not "vibey" enough to catch the attentions of the users I spoke with in my research.
I initially felt a bit discouraged, but this was one of those moments where I had to walk the line between what the owner wanted and what the customers wanted.
09 - Finding creative solutions within constraints
Another challenge: he didn't want to be featured in the About page, & preferred to keep the focus on the shop itself & the quality of the offering. Taking these requests into account, I knew I needed to leverage a lot of whitespace, keep the copy simple, & try to inject as much personality as I could, even if that personality was "chill."
Instead of stark white for the background, I chose a dusty ivory tone. I leaned into the brand's primary dark green color & used it to ground the design through the text & footer. I even designed a monogram logo that complemented his brand's wordmark to introduce a new graphic element. It's clean, a little retro with the double outline, but slightly perky with the off-kilter angles of the oval & intertwined letters. Simple but not boring.
09.1 - Creating assets from scratch
I mentioned earlier the client was super laid-back. He might have been too laid-back, because he didn't have any sharable assets for the website. I had to get creative & turn blurry screenshots from the shop's Instagram into clear, high quality photos using AI tools like Krea, as well as take my own photos in store to use on the site.
I leveraged these new HD photos to give users a glimpse of what Before Coffee is all about: a small but mighty shop with good coffee, tasty pastries, & dog-friendly. This visual storytelling became crucial for conveying the personality that the minimal design approach couldn't carry through layout alone.
10 - Putting it all together in mockups
I put all the visual elements together on mobile & desktop screens & presented the direction to the client, nervous that I didn't meet his expectation for how "minimalist" it should look. Good news: he loved it!
The design successfully balanced his desire for simplicity with the target audience's need for personality & visual appeal. The calming color palette, thoughtful typography, & approachable photography created a cohesive brand experience that felt authentic to Before Coffee while meeting modern web standards.
🧐
Note on "Shop" Page
Up to this point, I hadn't ideated on the e-commerce portion of the site. This is by design; e-commerce & subsequent checkout flows fully depend on which site builder/host we choose to move forward with.
Squarespace: somewhat custom e-comm page designs & direct Square integration;
Framer: full control on custom designs, but no Square integration - we'd have to forgo custom e-comm page designs altogether & settle for linking to an external Square storefront (not customizable).
11 - Testing & refining the menu structure
While the client approved the almost-finalized designs, I still felt uncertain about the Menu page layout. When looking at other restaurant & café websites, I noticed there was a split between menus shown as continuous lists & those broken up by category tabs.
This target demographic was likely going to look this site on their phones, so I had a feeling the tab-style menu might be more suitable. To confirm this suspicion, I conducted an A/B test with 8 participants to test how easily & quickly they could find information on each version of the menu layout.
Version A - Tabs
Version B - Continuous
Parameters:
Task 1: Explore the website to get a sense of what kind of place this is
Task 2: Take 30 secs to quickly check if the menu has something you'd want, & decide whether you'd visit
Task 3: Explore the menu to see if this shop accommodates vegan & gluten-free customers
Follow-up Likert questions:
1) Rate how easy or difficult it was to find what you were looking for on the website
2) Rate the time it took you to find the information you needed
3) Rate the visual appeal of the menu page
4) Rate how inviting you think this coffee shop is based on the website overall
The results were slightly more in favor of the tab-style, but it was almost an even split (reflecting what I'd been seeing in other websites). This confirmed that both approaches had merit, but the slight preference for tabs combined with mobile usage patterns made the decision clear.
The testing process also revealed that users enjoyed the aesthetic of the website, describing it as "hipster", "trendy", "Tik Tok famous".
Opportunities
Specials: Some wanted to see seasonal offerings to gauge what makes this shop different from others
Extras: There was confusion around upcharge for larger drink size not listed next to each item
Dietary restriction badges: Suggestions to use different color for GF badge for quicker scanning
View full report
12- Making final tweaks
Based on the test findings, I prioritized several minor revisions to tighten up the design:
13 - A digital presence that feels authentically "chill"
The final website strikes the perfect balance between the client's minimalist vision & his customers' need for personality & visual appeal. The calming ivory & green palette creates an inviting digital space that mirrors the shop's welcoming atmosphere, while the authentic photography gives potential visitors a genuine glimpse into the Before Coffee experience. The mobile-optimized design ensures that browsing feels effortless whether users are discovering the shop from their couch or while walking through Williamsburg. Most importantly, the site succeeds in translating that hard-to-define "chill" vibe into pixels, giving Before Coffee a digital presence that feels as approachable as the shop itself.
14- Coming up: development
The key constraint at this juncture is making sure the e-commerce functionality linked to the client's existing Square POS so it's easier for him to manage. That leaves me with 2 options for website builders/hosting: Squarespace or Framer.
After evaluation, I'm choosing Squarespace based on its direct Square integration capabilities to make it as easy as possible for the client to manage both his in-store & online sales from one system. While Squarespace offers less creative flexibility than Framer, I believe I'll get great results with this clean design.
15- Hindsights
This project taught me valuable lessons about navigating the tension between client preferences & user research insights. The key was finding creative solutions that satisfied both perspectives: using strategic whitespace & clean layouts to achieve the minimalist aesthetic the owner wanted, while incorporating personality through color choices, typography, & imagery that would resonate with his Gen Z & Millennial audience.
The challenge of working with limited assets also pushed me to be more resourceful & creative, ultimately resulting in a more authentic visual story for the brand.
View the next project: