[THE STRUCTURE OF A CASE STUDY]
UX/UI DESIGN
Design with Intention.
UX/UI for Small Business. Creativity Meets Structure.
Design isn't just how it looks. It's how it works.
For small business, good design means customers actually find what they need and trust you once they do.
A website can be beautiful and still fail. Slow load times, confusing navigation, buttons that don’t look like buttons and so on. Visitors won’t blame the design. They’ll blame your business.
That’s what separates UI from UX. One handles the visuals. The other handles the journey. Both matter. Neither works alone.
This page walks you through a real project, a tattoo portfolio, to show how small UX and UI decisions make the difference between a site that just sits there and one that actually brings in clients.
UX vs UI
UX is the structure. The invisible framework that decides whether a user reaches their goal or gives up.
It’s how someone moves through a site. Where elements are placed. What happens after they click a button. How many steps stand between them and what they came to do.
That’s why accessibility matters too. A website isn’t usable if not everyone can navigate it. Accessible design isn’t a feature. It’s a requirement for any product built for humans.
UI is the surface. The visual layer that shapes first impressions and builds trust, or breaks it instantly.
It’s the colors, typography, spacing, and visual hierarchy. Everything someone sees and touches.
That’s why UI isn’t just decoration.
Design isn't just how it looks. It's how it works.
For small business, good design means customers actually find what they need and trust you once they do.
A website can be beautiful and still fail. Slow load times, confusing navigation, buttons that don’t look like buttons and so on. Visitors won’t blame the design. They’ll blame your business.
That’s what separates UI from UX. One handles the visuals. The other handles the journey. Both matter. Neither works alone.
This page walks you through a real project, a tattoo portfolio, to show how small UX and UI decisions make the difference between a site that just sits there and one that actually brings in clients.
UX vs UI
UX is the structure. The invisible framework that decides whether a user reaches their goal or gives up.
It’s how someone moves through a site. Where elements are placed. What happens after they click a button. How many steps stand between them and what they came to do.
That’s why accessibility matters too. A website isn’t usable if not everyone can navigate it. Accessible design isn’t a feature. It’s a requirement for any product built for humans.
UI is the surface. The visual layer that shapes first impressions and builds trust, or breaks it instantly.
It’s the colors, typography, spacing, and visual hierarchy. Everything someone sees and touches.
That’s why UI isn’t just decoration.
Yoska Richard Tattoo - Portfolio UX/UI Case Study.
The Anatomy of a Case Study
A talented artist in Amsterdam. No website at first. Then the idea that AI search could help people find his work changed his mind.
The goal wasn’t a complex app. Just a clean, reliable portfolio where visitors can see his work, understand his style, and easily reach out.
Yoska Richard Tattoo - Portfolio UX/UI Case Study.
The Anatomy of a Case Study
A talented artist in Amsterdam. No website at first. Then the idea that AI search could help people find his work changed his mind.
The goal wasn’t a complex app. Just a clean, reliable portfolio where visitors can see his work, understand his style, and easily reach out.
Beyond the Portfolio: Aftercare as Trust-Building
A tattoo doesn’t end when the client leaves the chair. That’s when the questions start.
How do I clean it? What lotion can I use? When does it start peeling?
Instead of answering the same questions over and over, I suggested an aftercare guide. A dedicated page with full aftercare information, including day-by-day instructions using an accordion layout.
Clients get clear, trustworthy advice. The artist saves time. Everyone wins.
In UX thinking this it’s an example of a feature added with the user in mind and anyone who gets a tattoo will appreciate.
Low-Fidelity Wireframe
Beyond the Portfolio: Aftercare as Trust-Building
A tattoo doesn’t end when the client leaves the chair. That’s when the questions start.
How do I clean it? What lotion can I use? When does it start peeling?
Instead of answering the same questions over and over, I suggested an aftercare guide. A dedicated page with full aftercare information, including day-by-day instructions using an accordion layout.
Clients get clear, trustworthy advice. The artist saves time. Everyone wins.
In UX thinking this it’s an example of a feature added with the user in mind and anyone who gets a tattoo will appreciate.
Low-Fidelity Wireframe
My Role
- • UX/UI Design
- • Wireframes & High Fidelity Prototype
- • Front-End Development
- • User Research
- • Content
- • SEO Optimization
Competitive Analysis
Before starting, I looked at other tattoo portfolios in the Netherlands. What I saw, again and again: endless pages. Artist after artist. Image after image. An overwhelming wall of thumbnails that never stopped scrolling.
Visitors don’t have the tendency to endlessly scroll through galleries. They bounce.
That observation shaped everything that came next.
My Role
- • UX/UI Design
- • Wireframes & High Fidelity Prototype
- • Front-End Development
- • User Research
- • Content
- • SEO Optimization
Competitive Analysis
Before starting, I looked at other tattoo portfolios in the Netherlands. What I saw, again and again: endless pages. Artist after artist. Image after image. An overwhelming wall of thumbnails that never stopped scrolling.
Visitors don’t have the tendency to endlessly scroll through galleries. They bounce.
That observation shaped everything that came next.
Research & Discovery
Before a single wireframe or color choice, I started with simple questions. What does the artist need? What do potential clients look for? Where do they get stuck?
Yoska wanted his work to speak for itself. No clutter. Just clean, bold imagery.
Potential clients, on the other hand, need answers fast: style, availability, contact.
One of the biggest tension points was price. Most tattoo artists don’t list fixed prices, every design is different, and time varies. But clients land on a portfolio wanting a ballpark. Without it, they hesitate and leave.
The UX solution wasn’t a full price list. It was a starting point. A “from €75” that sets expectation without locking anyone into a number. It’s honest and it avoids friction.
That starting price appears early. The rest of the site handles the details, how to book, the consultation process, design agreement, deposit, and final pricing.
The wireframe also reflects other client needs: a clear path to aftercare and a portfolio that’s easy to browse without overwhelming the user.
The client got a clean portfolio. Potential clients got the answer they needed to move forward.
Low-Fidelity Wireframe
Research & Discovery
Before a single wireframe or color choice, I started with simple questions. What does the artist need? What do potential clients look for? Where do they get stuck?
Yoska wanted his work to speak for itself. No clutter. Just clean, bold imagery.
Potential clients, on the other hand, need answers fast: style, availability, contact.
One of the biggest tension points was price. Most tattoo artists don’t list fixed prices, every design is different, and time varies. But clients land on a portfolio wanting a ballpark. Without it, they hesitate and leave.
The UX solution wasn’t a full price list. It was a starting point. A “from €75” that sets expectation without locking anyone into a number. It’s honest and it avoids friction.
That starting price appears early. The rest of the site handles the details, how to book, the consultation process, design agreement, deposit, and final pricing.
The wireframe also reflects other client needs: a clear path to aftercare and a portfolio that’s easy to browse without overwhelming the user.
The client got a clean portfolio. Potential clients got the answer they needed to move forward.
Low-Fidelity Wireframe
UX Decisions
- • Clean navigation focused on portfolio, merchandise, bio and contact.
- • Image carousels to prevent endless scrolling.
- • Carousels overlays that allows users to see detail and style
- • Clear hierarchy
- • An Aftercare dedicated page to guide clients through the tattoo healing process.
UI Decisions
- • Dark, moody palette to match tattoo aesthetic.
- • Image carousels to prevent endless scrolling.
- • Typography that matches the artist’s primary specialty.
- • Minimal distractions.
UX Decisions
- • Clean navigation focused on portfolio, merchandise, bio and contact.
- • Image carousels to prevent endless scrolling.
- • Carousels overlays that allows users to see detail and style
- • Clear hierarchy
- • An Aftercare dedicated page to guide clients through the tattoo healing process.
UI Decisions
- • Dark, moody palette to match tattoo aesthetic.
- • Image carousels to prevent endless scrolling.
- • Typography that matches the artist’s primary specialty.
- • Minimal distractions.
Constraints & Trade-offs
No contact form. WhatsApp only. The client doesn’t want to manage email. That’s his preferred choice.
The answer: Place contact buttons that directs the user to his WhatsApp messenger inside key components.
Constraints & Trade-offs
No contact form. WhatsApp only. The client doesn’t want to manage email. That’s his preferred choice.
The answer: Place contact buttons that directs the user to his WhatsApp messenger inside key components.