← Back
E-commerce · Web · 2025

Swiss Snackbox: Online Shop

A complete redesign of the online shop for a young Swiss snack-box startup. The old site never fit their brand or reflected what the founders had imagined, so I reworked how it works as much as how it looks: a purchase journey that feels intuitive and effortless, and a brand that finally felt like them, shaped round after round by research, usability testing and real customer feedback.

Swiss Snackbox mobile website
Role
UX/UI Designer & Software Developer
Timeline
Multiple phases · 2025
Platform
Responsive web
Tools
Canva / VS Code
Overview

A shop that finally feels like the brand inside the box

Swiss Snackbox is a small Swiss startup with a lovely, simple idea: two snack boxes with unique themes that can be sent anywhere. Their signature product, the Swiss Box, makes a perfect gift, but can just as easily be bought for yourself. Inside are ten Swiss snacks, a little food guide that introduces each one, a small souvenir, and a postcard with a handwritten message. It is sold alongside a themed Movie Night Box.

A developer had already built the shop, but the founders didn't see themselves in it. It didn't feel Swiss, it didn't feel premium, and it didn't feel trustworthy enough to carry a premium gift you'd send to someone you love.

I came in to lead the redesign. I ran a competitive analysis and a UX audit of the existing shop, carried out user research and customer surveys, and went through round after round of usability testing to find and smooth every point where the path to purchase broke down. Alongside this, working with the developer across several phases, I shaped the brand identity, the logo and the visual design that fit the company, shot and edited the product photography, and wrote much of the customer-facing copy.

The work carried on well past launch. Guided mainly by Vercel's analytics, the visitor numbers, the mobile-versus-desktop split, the drop-off rate and where buyers came from, alongside the Google Ads data and what customers kept asking for, I built the requested features myself and developed the full mobile version once the first sales were in. I tested the payment flow closely before those first orders and kept testing afterwards, so nothing broke on the way through Stripe to checkout. The result is a shop that looks and sounds like Swiss Snackbox, wins its first customers, and knows exactly where it is headed next.

The problem

A great product, in the wrong clothes

The founders had everything that mattered, including the product, the suppliers and the story, but they had a website that told none of it. Built from a generic template, it didn't look Swiss or premium, the path to payment was confusing and often broke down, leading people to abandon their purchase, and, with customers across the EU, it locked out anyone who didn't speak English or German. Before the redesign there were no sales and barely a single newsletter signup.

The goal

A premium Swiss shop that actually sells

Rebuild the store so it looks unmistakably Swiss and premium, makes the path to payment effortless and reliable, and welcomes customers across the EU in their own language, turning a stalled shop into one that converts and grows its newsletter audience.

My role

Design, words, and code

I owned the UX, shaped the UI, brand identity and logo, shot the product photography and wrote much of the copy. The site's framework was already in place, so rather than wireframe from scratch I worked from a design concept: the developer built the first version, and I refined it page by page through annotated screenshots. I tested the site thoroughly, both before the first orders came in and long after, above all the Stripe payment flow, to make sure checkout worked reliably from start to finish. From there I went further and developed the requested features and the full mobile version myself, in code, always guided by what I uncovered in the customer surveys and usability studies I ran.

  • UX design & purchase-flow optimisation
  • UI design, brand identity & logo
  • Product photography & image editing
  • UX writing & microcopy
  • User research, customer surveys & usability testing
  • Analytics & advertising
  • Feature & mobile development
Tools

What I worked with

A deliberately lean toolkit. I designed the brand, the logo, the visuals and all the image editing in Canva, and I developed the features and the full mobile version myself in Visual Studio Code, with Claude as an AI pair, working hands-on with the shop's Supabase, Stripe, Resend and Vercel stack, and versioning my work with Git and GitHub. I also ran the shop's Google Ads and, above all, watched Vercel's analytics, the visitor numbers, device split, drop-off rate and countries, to guide what to build next.

  • Canva
  • Visual Studio Code
  • Claude
  • Supabase
  • Stripe
  • Resend
  • Vercel
  • Git & GitHub
  • Google Ads
Tech Stack Dev

What the shop is built with

The shop runs on Next.js, a React framework written in TypeScript, deployed on Vercel with Supabase as its backend. A developer built the core platform and foundation, while I contributed selected features, much of the mobile experience and the UI and UX decisions; the stack below therefore reflects a collaborative build rather than individual authorship.

Supabase provides the Postgres database, the authentication and the file storage, with some logic written directly in the database in PLpgSQL. Stripe handles payments and checkout, the exact step where the old shop used to lose customers. Resend, paired with React Email, sends the transactional emails such as order confirmations. next-intl runs the shop in six languages, so the Spanish and Italian visitors the old shop turned away now have a store that speaks to them. Tailwind CSS handles the styling on top of accessible Radix UI components, security headers such as CSP and HSTS keep the shop hardened, and Vercel adds analytics and speed insights alongside hosting. The code is versioned with Git on GitHub.

  • Next.js · framework (React + TypeScript)
  • TypeScript · app logic
  • PLpgSQL · database logic
  • Supabase · Postgres, Auth & Storage
  • Stripe · payments
  • Resend & React Email · transactional email
  • next-intl · localisation (6 languages)
  • Tailwind CSS & Radix UI · styling & components
  • Security headers · CSP, HSTS
  • Vercel · hosting, analytics & speed insights
  • Git & GitHub · version control
  • Visual Studio Code · editor
  • Claude · AI-assisted development
Research

Learning what feels Swiss, and where people slipped away

I started with two questions: what makes a small Swiss brand feel trustworthy enough that someone would buy a premium snack box from a shop they had never heard of, and where exactly potential customers were leaving once they reached the online shop? The answers came from a mix of desk research, a competitive look at snack-box sellers in Switzerland and abroad, customer surveys, and the brand's own advertising analytics.

I also looked closely at what simply feels Swiss, from the colours and the materials to the sense of restraint, so that I could ground both the brand and the design. Alongside this, I ran a UX audit of the existing shop, evaluating it against established usability principles to map where the experience broke down, and complemented it with usability testing on real users to see exactly where a purchase quietly fell apart.

The data was very clear. Most people were shopping on their phones, where there was no real mobile experience. A sizeable number arrived from Spain and Italy and left again, because the shop spoke only English and German. The checkout asked for so much that many people gave up before paying. Each of these findings became something concrete to fix.

Persona

Designing for Claudia

Claudia isn't shopping for herself. She is sending the Swiss Box to someone she cares about, perhaps for a birthday, a new baby, or a friend in recovery, and she wants it to feel personal. Like most customers, she has a connection to Switzerland and a reason to share a little of it.

C
Claudia
Gift-giver
Age
42
Location
Switzerland
Context
Sending to a loved one
Budget
CHF 50–80

"I want to send something that feels like home, and add a small message in my own words."

Goals
  • Send a thoughtful, personal gift for a special occasion
  • Add her own message instead of a generic, pre-written note
  • Know exactly what's in the box and that it'll arrive well
Pain points
  • No built-in way to add a personal message, so she had to email support
  • Shop only in English and German, which was a barrier for some buyers
  • A long checkout asking for lots of personal details, which left her hesitant to pay
Information Architecture

A small shop, easy to navigate

The site stays deliberately small. The homepage leads with the product, while two product pages and a handful of supporting pages, such as shipping, about and contact, give a first-time buyer everything they need to feel safe before they make their first purchase.

Swiss Snackbox
Home
Hero & bestseller
How it works
Testimonials
Products
Swiss Box
Movie Night Box
Cart & checkout
Shipping
Costs & times
Delivery zones
Returns
About
Our story
Why we started
Contact
Message form
Get help
User Flow

From homepage to a confirmed order

The purchase is the heart of the shop, and it is where most of my work lived. I took a little friction out of every step, and a lot of it out of payment, which was where people were slipping away.

01
Homepage
Leads with the bestseller's product photo and a direct buy link, so mobile visitors don't have to scroll to find the product.
02
Product page
The Swiss Box presented in full: what's inside, the food guide, the souvenir and postcard, the price, and reviews from real customers.
03
Cart
A clear summary with quantities and total, plus the gift option, where you choose to send it as a gift and add your own message.
04
Checkout
A short, focused form. The original asked for far too much, so I cut it down to only what is needed to ship the box.
05
Payment (Stripe)
Secure card payment via Stripe, kept visually consistent with the rest of the shop so the moment of paying still feels like Swiss Snackbox.
06
Confirmation
An order summary and a note on what happens next, reassuring first-time buyers that a real team is behind the box.
Design

Quiet confidence, in a Swiss key

The old template had no real identity, so the redesign meant building the brand from the ground up. The previous site leaned playful, with loud colours, a clutter of icons and not a single real photo, which pulled against a premium gift made and packed by hand in Switzerland. I went for something simpler, more elegant and honest, that feels like Switzerland itself, clean and calm and quietly confident, while keeping a light, playful touch that suits a box of snacks, so people always know where they are.

We settled on a white background with red accents, representing the colours of the Swiss flag. Red sets the tone, so a single glance brings Switzerland to mind, while the white background keeps everything calm so the product photography draws the most attention. Black adds sharp contrast and quietly recalls the traditional Swiss art of Scherenschnitt (paper-cutting). Grey represents the Swiss mountains and the warm brown tones the Swiss forests. Inside the Swiss Box, wood wool is used to protect the snacks, so these natural, earthy tones fit the brand perfectly. I wrote much of the copy alongside the layout, warm and specific, and added four more languages so customers across Europe could finally browse and shop in their own language.

Colour palette
Swiss RedWhiteBlackWarm brownGrey
Typography
AaAa
Two neutral faces · Headings & body
One playful display · Accents
Between elegant and friendly: readable, premium
Logo
Swiss Snack Box logo
Inspiration
Traditional Swiss Scherenschnitt (paper-cut)
Reference: traditional Swiss Scherenschnitt (paper-cutting)
01
Let the product speak
Beautiful photographs of the boxes and snacks take centre stage, in warm, inviting colours that build trust, while everything else steps back.
02
The phone comes first
Most people arrive on a phone, so the design starts there, with the product and a buy button within reach the moment the page loads.
03
Trust you can see
A young brand has to earn belief. Real reviews, testimonials, an FAQ and clear shipping quietly answer the question of whether this can be trusted, before it is even asked.
Before / After

From a template to a brand

Before
The old Swiss Snackbox website: a generic orange template with placeholder product cards
Before: an off-the-shelf template
An orange, off-the-shelf shop with flat placeholder cards where the products should be, generic copy, and only two languages. It could have belonged to anyone, and it had nothing to show for it, with no sales and barely a single newsletter signup.
After
The redesigned Swiss Snackbox website: clean red-and-white design with real product photography
After: truly Swiss Snackbox
Real product photography sits front and centre, in a calm red-and-white design, with visible trust signals such as made in Switzerland, handmade and ready to gift. The checkout is short, there is a built-in gift message, and four more languages were added. The first sales, and a sharp rise in newsletter signups, soon followed.
Key screens

Across the shop

The important pages of the live shop, shown on mobile, where most visitors are. Swipe through the homepage, product, shipping, about, contact and checkout.

Swiss Snackbox mobile homepage hero with product photo and buy button
01 · Homepage
The shop's front door
The landing page, with the brand, the bestseller box, how it works, testimonials, and the newsletter signup.
Swiss Box product page showing the box, price and contents
02 · Product
The Swiss Box
The main product page, with real photography, a clear "what's inside" summary, the price, and a bestseller badge, holding everything needed to decide.
Shipping information page
03 · Shipping
Shipping
Shipping costs, delivery times and zones across Europe and Canada, covering everything about getting the box to the door.
About page introducing the Swiss team
04 · About
About
The brand story, told by a small Switzerland-based team, and why they started Swiss Snackbox.
Contact page with a message form
05 · Contact
Contact
A help page with a message form for questions about boxes, orders, or anything else.
Simplified checkout form on mobile
06 · Checkout
Checkout
The final step, with customer details, shipping address, and secure payment via Stripe.
Usability Testing

Two rounds, led by real buyers

Testing never really stopped. Before launch I ran a UX audit and a usability study with test users, focused above all on the core journey, the path to payment, refining it round by round until the whole flow ran smoothly. After launch, every problem the data or a survey surfaced started another round.

Two rounds stand out. The first, around the soft launch, turned up three things standing between people and a purchase: gifting, language and a heavy checkout. The second, once sales were steady, came straight from the analytics. Almost everyone was on a phone the shop wasn't really built for, and hesitant visitors needed more reassurance before they would buy.

Recruiting from real and would-be customers, people who actually send Swiss gifts, kept the feedback specific. It was about trust, language and checkout, rather than e-commerce in the abstract.

"I just wanted to send a box with my own note, and now I can do it without emailing anyone."
Iteration

Each round, a little less friction

Every change traced back to a specific moment where the shop let someone down, whether in a test, a survey or the analytics, and never to guesswork.

The biggest shift came from the customers themselves. The founders had imagined the postcard inside each box as their own gesture, a handwritten thank-you to the buyer, because they assumed most people were keeping the box for themselves. The survey said otherwise. Most people were buying it as a gift, and they wanted their own words on that postcard rather than the makers'. So the concept changed, and I built a gift option where the buyer chooses to send the box as a gift and writes the message personally.

The analytics pointed to another fix. A steady stream of visitors arrived from Spain and Italy and left without buying, because the shop was only in English and German, so I added French, Italian, Spanish and Portuguese, and the drop-offs fell sharply. It fits Switzerland itself: large Italian- and Spanish-speaking communities, many descended from the guest workers who came and put down roots here, make up a significant part of the population, and they often have family in and beyond the country to send a Swiss gift to.

The second round was about the phone. Because most visitors were shopping on mobile while the design had been built for desktop first, I rebuilt the mobile shop to feel effortless, with the product and a buy button right in the hero and no long scroll. Around the same time I lifted the newsletter out of the footer and into a popup, and added reviews and testimonials to give hesitant visitors the reassurance they were missing.

Changes Dev

What I added to the shop

The features and improvements I added to the existing shop, shaped round by round from research and real customer feedback, are all live in the shop today.

Developed by me
Mobile-first homepage with product photo and buy button in the hero
Mobile-first
Built for the phone
Since most people shop from their phones, the homepage was rebuilt mobile-first. The product photo and a buy button sit right at the top, so everything that matters is there at a glance, with no scrolling needed to reach it.
Developed by me
Cart with the send-as-a-gift option and a personal message field
Gifting
Send it as a gift
Most boxes are bought as presents, so a "Send it as a gift" option lets the buyer add a personal message at checkout. Once the order is placed, the message is written by hand onto the postcard inside the box, so the gift feels thoughtful and special from the moment it is opened. This feature was the one customers requested most.
Developed by me
Language selector fixed at the bottom of the screen, showing six languages
Languages
Shop in your language
French, Italian, Spanish and Portuguese, added after EU buyers kept bouncing on a shop they couldn't read. The selector stays fixed at the bottom of the screen, so customers notice it right away instead of hunting for it.
Developed by me
Simplified checkout form on mobile
Checkout
A shorter checkout
The payment form was trimmed from around 14 fields to 7, asking only for what an order truly needs. With fewer steps in the way, far fewer people abandon before paying, and Stripe handles the secure payment behind the scenes.
Developed by me
Newsletter popup offering 10% off the first order
Newsletter
A newsletter popup
On a first visit, a popup offers 10% off the first order in exchange for a newsletter signup. The discount encouraged hesitant visitors to buy, and with the form upfront rather than hidden in the footer, far more people subscribed.
Developed by me
Product page showing a five-star customer review
Trust
Real customer reviews
Reviews from real buyers were added to the product pages and the homepage, giving hesitant visitors the social proof they needed before trusting a young brand.
What's next

The next steps for Swiss Snackbox

The soft launch landed well, and the feedback has been nothing but positive. The next chapter is mainly about building trust: being seen by new customers and giving them reasons to believe in a young brand, while turning those satisfied early buyers into repeat customers.

Next
Let the reviews be seen
Bring the glowing feedback that lands in support onto the homepage and product pages, where new visitors can see that real people love the box. The reviews are gathered through a link sent to each customer after their purchase.
Then
Let creators tell the story
Add short videos of influencers and creators trying the box, placed across the shop. People trust real people they know more than a brand, so this builds confidence and brings new visitors in at the same time.
Later
Make it personal
Introduce the team with faces and behind-the-scenes moments, and perhaps a call option too, so customers can see the real people behind the box.
Outcome

A real start, and a brand to build on

For a young shop with almost no budget, the redesign turned a site with no sales into one that quietly converts and steadily grows in its first months since launch, and it handed the founders a brand they are proud to put in front of people.

0 → 14
First paying customers, from a standing start
3 → 19
Newsletter signups, from a near-empty list
88% → 60%
Homepage bounce rate, after Italian localisation
A newsletter people join
Moving the signup out of the footer and into a popup turned a near-empty list into a steady, growing stream of subscribers.
Bought as a gift
Almost every purchase so far has used the gift option, which confirms that the box is sent as a present and proves the new direction was right.
Open to all of Europe
Adding four more languages was one of the biggest wins. EU buyers who used to leave without buying could finally read the shop and order: Italian visitors, for one, bounce far less than English ones. Spanish and Italian are now among the shop's most-used languages after English.
A checkout people finish
A shorter, more focused payment form asks for far less than the old one, so the path to payment stays simple and quick right up to the moment people pay.
Reflection

What I learned

Results & impact

  • A shop that finally sells: a site that had never made a sale started converting within weeks of launch.
  • Fewer people slipping away: cutting the checkout roughly in half removed one of the biggest reasons people had been abandoning the purchase.
  • A brand that fits: the founders finally have a shop that looks and sounds Swiss, modest, clean and trustworthy, and that feels like them.

Design takeaways

  • The client's idea isn't always the customer's: the founders pictured one use, while customers wanted to gift the box in their own words. Following real behaviour, rather than the original brief, unlocked the most important feature.
  • Language is still a real barrier in Europe: even today, an English-only shop quietly shut out a significant portion of EU buyers. Meeting people in their own language is a matter of both accessibility and conversion.
  • Design mobile-first, and design desktop well too: with around 80% of visitors on a phone, mobile cannot be an afterthought. The best results came from starting there while keeping a strong desktop experience.
  • For a small shop, focus beats breadth: leaning into the Swiss Box rather than spreading attention made the whole experience clearer and stronger.
  • Keep paying painless: every extra field at checkout is a reason to leave. The shortest honest form wins.
←
Next case study
Standin: Activity Companion Platform
Standin website preview
→