THE BARN
THE BARN is a Berlin specialty coffee roaster with an international e-commerce storefront.
During my time there, I worked across frontend development, Shopify architecture and UX/UI, modernizing parts of the storefront while reducing unnecessary platform complexity.
System
The storefront had accumulated third-party functionality and implementation complexity over time.
Part of my work was identifying where existing Shopify capabilities could replace redundant plugins, and where structured platform features could make the storefront easier to maintain.
I replaced plugins whose job the platform already did natively, and moved content without a clear structure into metafields and metaobjects, so it could be edited and reused without changes to theme code.
Redundant third-party plugins replaced by Native Shopify functionality
Unstructured content replaced by Metafields and metaobjects
Landing page
The homepage evolved significantly between 2011 and 2024. This study reconstructs 18 documented versions from archived captures, using 142 measured sections to show how the page’s structure, hierarchy and priorities changed over time.
2011
The homepage is extremely sparse and mostly logo-led, with very little content visible beyond navigation. It appears to function more as a digital front door than as a complete commercial destination.
01.12.2013
The page becomes dominated by a large product-and-image grid. The homepage starts carrying more of the shop itself, suggesting a shift from simple brand presence toward browsing and product discovery.
2017
A large photographic hero appears, followed by brand messaging, category navigation and editorial content. The homepage begins to balance commerce with a stronger brand and storytelling role.
17.05.2018
The same structure expands with more brand content and a longer page. The homepage appears to be taking on more responsibilities at once: storytelling, category navigation and ongoing editorial content.
17.12.2019
The page accumulates
The page becomes substantially longer and more modular, combining seasonal promotion, products, editorial content, locations and social proof. This suggests the homepage is becoming a broader brand-and-commerce hub rather than a single-purpose landing page.
2020
Subscriptions appear directly inside the opening hero structure while products remain prominent further down. Subscription is no longer only a secondary destination; it begins to enter the primary browsing hierarchy.
21.10.2021
The hero introduces direct actions for both buying beans and subscriptions, while brand, products and editorial sections continue below. The opening area becomes more explicitly action-oriented, even as the page remains content-heavy.
12.10.2022
Subscriptions become persistent
Subscriptions appear repeatedly across the experience: in navigation, the hero and a dedicated section. The structure suggests subscription is becoming a more persistent commercial priority rather than a single isolated offer.
14.11.2023
Promotion and proof before primary commerce
Seasonal promotion, awards and campaign content occupy much of the upper page, while subscription plans and products appear later. Multiple priorities compete for attention before the visitor reaches the core commercial sections.
20.11.2023
The page continues to layer promotional and subscription content, including more than one subscription block. The repetition suggests the offer is important, but its role in the overall hierarchy is still not fully resolved.
18.12.2023
A collection above the hero
A product collection appears before the main hero, breaking the expected hero-first structure. This appears to push seasonal commerce more aggressively to the top of the experience.
29.12.2023
Commerce moves up
The page becomes more product-led: a focused hero is followed immediately by a featured collection, while awards and supporting brand proof move further down. The hierarchy begins to favour product discovery and action over supporting content.
17.05.2024
Study
The header gains structure
The redesign concentrates attention around a more structured header and a subscription-led hero. Subscriptions move from being one section among many to becoming part of the primary navigation and opening proposition.
17.05.2024
Study
From general to specific
Across the F1 → F2 → F3 studies, the message becomes progressively more specific and actionable. The exploration moves from a broad brand statement toward a clear subscription proposition with a dedicated CTA.
11.06.2024
Live
Subscription as an entry point
The live storefront carries the new header structure forward, with utility navigation, clearer primary navigation and a persistent Subscription Plans entry point. The hierarchy now makes important commercial paths visible before the visitor begins moving through the rest of the page.
Catalog study
Eight specialty-coffee catalogs reduced to structure, rhythm and package language. The comparison looks at how density, editorial interruption, color and package form shape product discovery.
Eight catalogs, one shelf
Each strip is one collection page, top to bottom, drawn to its captured length. Brown outlines mark editorial breaks in the product rhythm.
Coffee Circle and Verve carry the most products per scroll. Coffee Circle breaks the grid with offers; Verve almost never does.
Package language
One glyph per observed package variant (silhouette, body and colour mark), not per product. Outlines show the formats that appear later in each list.
THE BARN repeats one kraft bag. Packaging carries no product colour, so tags and buttons do the differentiating - each card carries more interface.
Verve, Five Elephants and Nomad keep one shape and change one colour per coffee. The package becomes the index. La Cabra and Red Rooster show fewer coffees, larger. La Cabra puts the colour in the photograph, Red Rooster in the illustration.
A structural reading
Density is calculated from the captured catalogs. The remaining positions are interpretive readings of the source material.
THE BARN sits between dense and sparse on measured density, and toward the utility, muted and uniform ends of the three readings.
Subscription evolution
Subscriptions carry a different design pressure: the interface has to explain the offer, support the decision and make an ongoing commitment feel understandable.
This study follows how THE BARN’s subscription experience changed from 2020 to 2026.
Subscription page evolution
Each model is one page, drawn to scale in page widths. The brown path runs from the top to the first point where a subscription can be chosen.
Distance to choice
Page travelled from top to first decision; analytical reading, not a UX metric. Measured in page widths, so captures of different widths compare.
Decision architecture
Each row is one page, top to bottom, by function. The brown mark is the first choice; in 2026 it opens a separate flow.
Effort / confidence
Not a score: what each version asks of the visitor, beside what it gives back.
| Version | Effort: what it asks | Confidence: what it gives back |
|---|---|---|
| 2020 |
|
|
| 2021 |
|
|
| 2022 |
|
|
| 2023 |
|
|
| 2024 version |
|
|
| 2026 |
|
|
From page to guided flow
6 questions before the cart, with a 7-part progress bar, “most popular” marks, an explicit commitment term and an editable review. The flow removes distance to the decision and adds deliberate configuration after it.
Who is the coffee for?
Caffeinated or decaf?
Would you like to try different coffees?
What taste notes do you enjoy most?
How much per delivery?
How often should we send your coffee?
Summary
Across THE BARN, the work extended far beyond individual pages. I worked across Shopify architecture, frontend implementation, UX and UI, product structure, content systems, performance and SEO, for a bilingual German and English storefront.
The three studies above look at different parts of that work: how the landing page evolved as the business and its priorities changed, how THE BARN’s product catalog compared with other specialty-coffee brands, and how the subscription experience moved from long-form explanation toward a more guided decision flow.
Alongside that research and design work, I helped simplify the Shopify setup. I reduced reliance on redundant apps, moved more content into native Shopify structures, and introduced and organised metafields and metaobjects. I improved product information, worked with reporting and store data, built responsive interfaces in Liquid and JavaScript, and supported the day-to-day evolution of the storefront. Work on frontend stability contributed to fewer interface-related support issues.
The work was never just design or just development. It moved constantly between understanding the problem, shaping the interface and implementing it, together with the rest of the team.
One of the best parts of the experience was the team. It was a pleasure working alongside Fikayo, Pawel, Joseph, Eltan Tan, Jax, Izabela, Eva, Rafa, Pia, Jonas, Tamara, Ralph, Andreas, Aljaz, Til, German and Chisa.