Do
Branding and Responsive Web Design | UX Case Study
Project Duration: August 2025
Project Overview
Product
A website for a Berlin-based café, Onri, that also sells merchandise like tote bags, mugs, t-shirts, and coffee beans. The site combines café culture with lifestyle branding and allows users to explore the café, shop products, and see events.
My Role
-
UX/UI Designer
-
Created the brand style (logo, colors, fonts)
-
Designed the website layout and pages
-
Planned how users move through the site
-
Helped with merchandise design (totes, mugs, etc.)
-
Chose images and visual mood
Problem
Onri had no strong online presence. People couldn’t easily find the menu, location, or buy products online. It needed a simple, stylish website to match its brand and reach more people.
Goal
Create a clean and mobile-friendly website that shows the café’s atmosphere and story. It needed to make online shopping easy for customers and help them find information about the menu, location, and events. The website also aimed to make the brand stronger both online and in-person
User Research
Summary
To understand our users, I gathered feedback from local café visitors in Berlin, online shoppers, and lifestyle-focused Instagram followers. I focused on what people look for in cafés, how they shop for branded products, and how they interact with café websites or social media.
I used informal interviews, competitor research, and Instagram comment analysis to find common needs and habits.
Pain Points
-
Hard to find info online: Users often said they couldn’t easily find the café’s opening hours, menu, or location.
-
No easy online shopping: People liked the merch they saw on social media but had no way to buy it.
-
Not mobile-friendly: Some users tried visiting the café website but found it hard to navigate on their phones.
-
Lack of brand feeling online: Users said the website didn’t reflect the café’s cozy and cool atmosphere they experienced in person.
Persona
Name: Lena König
Age: 24
Occupation: Illustrator
Location: Neukölln Berlin, Germany
Tech Comfort: Very comfortable with mobile apps and online shopping
Bio:
Lena often works from cafés to stay inspired by the city's creative energy. She follows many Berlin-based lifestyle brands and cafés on Instagram and prefers local, design-forward spots. Lena appreciates brands that align with her values—sustainability, creativity, and community.
Goals:
-
Buy unique merchandise (like tote bags or mugs) from places she loves
-
Stay updated on events, pop-ups, or limited drops at her favorite spots
-
Easily access basic info (menu, hours, location) when she’s on the go
Frustrations:
-
Gets frustrated when online shops are hard to use or not mobile-friendly
-
Finds it disappointing when a café’s website doesn’t match the vibe of the place
-
Wants to support brands but often finds no way to shop online
Problem Statement:
Lena needs a mobile-friendly, visually engaging website for Café Onri that allows her to easily find café details, shop for merchandise, and feel connected to the brand she enjoys in real life.
Competitive Audit
Site Map
Digital Wireframes
Designed with Figma
The website is designed to deliver a seamless, mobile-first experience, from browsing the onri's story and events to shopping for merchandise and finding location details. It reflects the onri’s artistic identity with clean layouts, bold visuals, and playful brand elements.
Low-fidelity Prototype
Usability Study
I conducted a usability test with four participants who represent onri’s target users: creative professionals, café-goers, and online shoppers. Participants were asked to complete tasks such as browsing merchandise, locating café info, and exploring event pages.
Finding 1
Issue: Users were unsure whether a product was successfully added to the cart.
Observation: All 4 participants hesitated after tapping “Add to cart,” with some trying to tap again due to no visual confirmation.
Suggested Fix: Add subtle animations or visual feedback (e.g., cart icon update, toast message, or modal) to clearly confirm the action and reduce confusion.
Finding 2
Issue: The contact form felt too narrowed on mobile screens.
Observation: One user had to zoomed in to fill the form, which made the page feel inconvenient.
Suggested Fix: Adjust form spacing while maintaining the brand’s clean aesthetic.
Refine Design
-
Pop-up message
-
Next Action Options
-
Visual Balance
-
Improved Email Hierarchy
Style Guide
