Café Mystika

Overview

Café Mystika is a specialty coffee shop in Valencia, Negros Oriental (a province in the central Philippines), founded in 2021 by Angelo Salvoro and Hazel Dagoy. Most people know it for its coffee, but it actually runs 8 lines of business: the café, a quiet study branch, a bistro kitchen, mobile bars for events, its own bean brand and streetwear, espresso machine repair, barista and bartending classes, and café consultancy.

I led the redesign end to end, from owner interviews and wireframes to the production build. The goal was a site where a first-time visitor finds what they came for in 1 or 2 taps, and where the owners can update menus, classes and products without calling a developer.

The problem

The business had outgrown how it presented itself. Customers saw a café; the owners were running a coffee company. 3 problems came out of that gap:

1. Buried revenue. Mobile bar bookings, machine repair and consultancy are the highest-value services. They were hard to find, so people who needed them often never learned Café Mystika offered them.
2. Too many paths, no clear next step. Ordering, booking, enrolling and buying each worked differently: Grab (Southeast Asia’s main delivery app) for delivery, Messenger for classes, phone or email for events. Visitors had to work out how to act on their own.
3. Stale content. Menus, class schedules and products change often. Updates depended on social posts or a developer, so information online fell out of date.

How might we present a multi-service coffee business so each type of visitor reaches their goal quickly, while keeping the warm, street-culture feel of the café?

What the old site showed

The old site made those problems easy to see:

• No way to act from the homepage. The hero had a headline and a paragraph, but no button. There was no menu in the navigation and no link to Grab.
• A shop that wasn’t there. The shopping bag in the header opened a “Shop Coming Soon” pop-up, so the beans and streetwear couldn’t be found online.
• Package cards cut off at the edges. On the Services page, the first and last packages were clipped by the screen edge, and only some prices said how many guests they covered.
• Placeholder contact details. Customer Service and Wholesale both listed the same placeholder email and phone number, so event and wholesale leads had no real way in.

Research

I used 3 methods, each to answer a different question.

Method	What I wanted to learn	What I did
Owner interviews	What the business needs the site to do	62 sessions with Angelo and Hazel over 7 months. I’m a regular at the café, so most were short in-person check-ins when they had a free moment. We covered goals, revenue mix, recurring customer questions and how they update content today
Customer feedback	What visitors look for and where they get stuck	Talked to 3 regulars, read the café’s Google reviews, and read the comments people leave on its social media posts
Audit of the old site	Where the current experience breaks	Mapped every page and call to action, noted dead ends, outdated info and mobile issues

Key insights

1. People come with 1 job, and it is rarely “learn about the café.” They want to see the menu, order, book an event, or enroll in a class. The site had to route intent, not tell a story first.
2. Credibility sells the expensive services. The owners are a TESDA National Trainer and Assessor (TESDA is the Philippines’ national skills authority) and a WorldSkills Philippines National Coach. Event clients and café owners trust that more than any adjective, but it was nowhere online.
3. Customers already live in Grab, Messenger and Facebook. A custom booking or checkout flow would add friction. The better move was to send people to the channel they already use, at the moment they need it.
4. Owners must be able to update content on their own. If changing a price takes a developer, the site goes stale within weeks.

One regular summed up the old site in a sentence:

“The old site takes me back to 2008. The design was sluggish and old school.”

Users and goals

I grouped visitors by what they came to do rather than by demographics. Each group needed a different entry point and a different final action.

Audience	Their goal	Where they land	Final action
Local regulars and students	See the menu, order, find the study branch	Home, then Menu	Order on Grab, visit
Event planners (weddings, corporate)	Book a mobile coffee or cocktail bar	Services	Message or call to book a package
Aspiring baristas and bartenders	Find a class, check dates and seats	Classes	Enroll through Messenger
Café owners	Fix a machine or get business help	Services	Contact for repair or consultancy
Coffee fans and fans of the brand	Buy beans or streetwear	Shop	Inquire to buy

Information architecture

I organised the site around what visitors come to do, not around how the business is run internally. Each audience gets 1 landing page and 1 clear way to act, and that action happens on a channel customers already use.

The 4 service lines (mobile bars, machine repair, consultancy, classes) were split across 2 pages by audience: services for businesses and events, and classes for learners. The founders’ story and blog support trust and search, but they stay out of the paths people use to take action.

Key design decisions

1. The homepage routes people instead of telling a story

• Problem: 8 services competed for attention, and visitors arrived with 1 specific job. The old navigation didn’t even link to the menu.
• Solution: The hero offers 2 clear actions (View Our Menu, Shop Merch and Beans). Below it, each business area gets a short section with a sample and 1 “View all” button: Shop, Menu, Services. Menu also sits in the main navigation, and the founders’ story moved to its own page.
• Why: First-time visitors are usually curious about what the café serves, so the menu is 1 tap away from anywhere. The homepage also works as a table of contents for the whole business.

2. Credibility as a value proposition, not an “About” paragraph

• Problem: The strongest selling point, owners who train national competitors, was invisible.
• Solution: A “Why Café Mystika?” section with 4 numbered reasons. Each ends in a short, bold closing line, such as “You are not drinking from hobbyists. You are drinking from coaches.”
• Why: It answers “why you and not the café next door” in under 10 seconds of scanning, and it supports the high-value services further down.

3. A Grab button that appears only when you are deciding

• Problem: Most orders happen on Grab, but a permanent floating button covers content and gets ignored.
• Solution: A Grab-branded button that appears only while the menu section is on screen. Tapping it lets you pick a branch: Café Mystika for espresso, or Anii, the bistro kitchen.
• Why: The action shows up at the moment of intent and stays out of the way the rest of the time. It also tells visitors the café delivers, which the old site never mentioned. Picking a branch first stops people from ordering food from the coffee bar.

4. Product browsing driven by scroll on phones

• Problem: On phones, side-swiping product carousels are easy to miss, and most products never got seen.
• Solution: On mobile, the shop row sticks under the navbar and moves sideways as you scroll down, then releases. On desktop it becomes a grid. With reduced motion turned on, it falls back to a normal swipeable row.
• Why: On phones, people flick quickly through long pages. A row that moves sideways while they scroll down breaks that rhythm and makes them look, and it’s an interaction that sets the site apart. Every product gets seen without asking the user to discover a hidden gesture, and motion-sensitive users are respected.
• Still to prove: I haven’t yet watched people use it. Scroll-driven motion can feel like the page is taking control, so it’s first on the list for usability testing.

5. Classes show availability before asking for commitment

• Problem: Would-be students had to message just to find out whether a class was running.
• Solution: Course cards show category, level, dates, time, price and seats left. Courses can be marked “always open,” and they close automatically once their date has passed. Enrolling goes straight to Messenger.
• Why: It answers the questions that used to arrive as DMs, and the “only 5 seats per session” detail is real scarcity, not a sales trick.

6. Use the real menu boards, made readable

• Problem: The café’s menu boards were the source of truth, and retyping them as HTML would drift out of sync.
• Solution: The menu shows the actual boards as images, uploaded through the CMS, with a lightbox for zooming on phones.
• Why: 1 source of truth that staff already maintain, and it reads like the physical café.
• The trade-off: The café sells far too many items to retype by hand, but images can’t be read by screen readers, search engines or translation tools. It’s the biggest compromise on the site, and the next step is a real text menu, for readability and for search.

Visual design system

The brand brief from the owners was “where the street’s raw energy meets a cozy corner.” I turned that into a dark, chalkboard-and-espresso palette with 1 warm accent, and a type system that mixes street signage with a bookish serif.

Token	Value	Role
Void	#191B1A	Page background, like a dark café at night
Slate	#252928	Alternating section surfaces for rhythm
Gold	#C9922A	The only accent: calls to action, labels, highlights
Chalk	#F0EDE6	Primary text, like a chalkboard menu
Rust and Sage	#7A3E1A, #4A5E48	Supporting tones for categories and badges

• Type: Bebas Neue for headlines (street signage), Fraunces for body (warmth, craft), Space Mono for labels and prices (the precision of a barista’s recipe card).
• Components: About 30 reusable components, including Button, Badge, SectionHeading, MerchCard, ClassesCard, ServiceCard and MenuBoard. Every page is built from the same parts, so new pages stay consistent.
• Texture and motion: A 3% film-grain overlay, oversized faded words behind sections (“SHOP”, “MENU”, “SERVE”), and short slide-up reveals. All of it is decorative and none of it blocks content.

Building it

Because I designed and built the site myself, I could make design decisions that only hold up if the build supports them.

• Sized to the business. A small café shouldn’t carry monthly software bills. Sanity’s free plan and pages built ahead of time mean the owners pay no subscriptions, only what it takes to keep the site online, and I priced the build for where the business is today. If it grows, each part can move to a paid plan without a rebuild.
• The owners as users too. I set up Sanity CMS with 8 content types: menu boards, products, courses, mobile bar packages, testimonials, blog posts, baristas and authors. Fields match how the owners think, for example “Seats Available,” “Always Open” and “Manually Closed” on a course. They update the site from their phones without me.
• Accessibility. Every image has descriptive alt text, though the menu boards’ items and prices are still only in the photos (see the trade-off above). Motion respects reduced-motion settings, buttons are labelled for screen readers, and the anchor offset keeps headings clear of the fixed navbar.
• Performance on mobile data. Images are resized for each screen width, and CSS is inlined to stop Safari from flashing unstyled content. Pages are rendered ahead of time and served from Vercel’s edge network.
• Being found. Each page has its own title, description and share image for Facebook and Messenger previews, plus a sitemap, canonical URLs and a custom 404 page. Most local discovery happens through shared links.

Working with the client

Working with Hagil Tan on Cafe Mystika’s website was a great experience. He was professional, collaborative, and open to understanding our vision as a brand. What I appreciated most was his willingness to listen to our ideas, communicate throughout the process, and translate our vision into a website that represents Cafe Mystika’s identity.

Hagil approached the project with a positive attitude, creativity, and a genuine commitment to the work. He was easy to work with, receptive to feedback, and focused on finding ways to bring our ideas to life. His contribution helped us strengthen our online presence and create a digital platform where people can learn more about Cafe Mystika and what we stand for.

I would recommend Hagil to businesses and individuals looking for someone who values collaboration, understands the importance of a brand’s identity, and takes the time to bring a project together.

I shaped the new design side by side with the owners, mostly in person. Every suggestion was heard out, and we weighed its pros and cons before deciding. Between sessions I sent progress updates online, on the social media channels the owners already use every day.

• Feedback I took: a photo gallery for each product. Angelo asked for a gallery for his merch. I had assumed 1 photo per item was enough, which was my blind spot as the only designer and developer on the project. Products now show several photos.
• Feedback I pushed back on: “simple and clean.” Angelo first asked for a simple, clean website. But his brand on social media is bold, loud and street style, and a minimal site would have contradicted it. We went with the dark, high-contrast design described above instead.

Outcomes and reflection

The redesign launched on 3 October 2026 at cafemystika.com. It has 10 pages, all 8 business lines have a findable home, and the owners now manage their own content.

Before the redesign, weekly visitors were growing about 20%. In the first week after launch, they grew 60%, measured with Vercel Analytics. It’s 1 week of data, so I’m watching whether the rise holds.

What I would do next

• Replace the menu board images with a real text menu, for screen readers and search.
• Test the scroll-driven shop row with real users before keeping it.
• Run moderated usability tests with 5 people from the audiences above, for example “book a mobile bar for a wedding of 80 guests.”
• Track which call to action each audience uses, so I can check whether routing by intent actually works.
• Add a simple inquiry form for mobile bars. Event planners shouldn’t have to leave the site to get a quote.

What I learned

• Design the information architecture before the screens. Most of the value came from deciding where each service lives, not how it looks.
• Meet users in the tools they already use. Sending people to Grab and Messenger beat building custom flows they would have to learn.
• The client is a user too. A CMS shaped around the owners’ vocabulary is what keeps a small-business site alive after launch.