Kogl: Establishing Web Presence

Designing a product listing site for Kogl, an Oslo furniture studio, launched in time for Milan Design Week 2026.

Problem

Kogl had a growing collection but no digital presence to attract customers, manufacturers and collaborators. The ask: a minimalist product listing site that could grow into e-commerce, ready for Milan Design Week 2026.

01Explore

I worked from one board: type studies for the name, and the reference sites I kept going back to.

I annotated each reference with what it does well, like bold type with smooth animation, or limited furniture with a minimal aesthetic. That set the type, spacing and grid.

Exploration board: type studies for the studio name, above a set of annotated reference sites — Fig. 1The board: type studies for the name, above the annotated references.

Four product cards, each setting the product name in a different typeface, size and position — Fig. 2The same studies tested on a product card: serif or sans, above or below the image.

02Splash

People struggled to pronounce Kogl, so the landing page teaches you how to say it.

The founders ran into this most at international events. We chose a phonetic animation over a logomark hover, so every visitor gets the pronunciation before entering the site.

Splash option A: the logomark, which repeats down the screen on hover — Fig. 3B shipped, so every visitor hears the name before reading anything else.

Splash option B: the name animating through its own phonetics — Fig. 3B shipped, so every visitor hears the name before reading anything else.

03Cards

The card snaps to each image's own dimensions instead of forcing one height.

Each category also got its own colour, tagged onto the card, so a collection reads at a glance.

Card option A: the full extent of each image — Fig. 4Three card rules. A shows each image at full extent, B sets every card to the tallest image, C snaps to each image's own dimensions.

Card option B: card height set by the tallest image — Fig. 4Three card rules. A shows each image at full extent, B sets every card to the tallest image, C snaps to each image's own dimensions.

The product index, with each card tagged by category — Fig. 5The filter system: one colour per category, so a collection reads before you click.

04Build

Designed mobile-first, with each image's crop following the column it lands in.

Frequent check-ins with the developer and founders kept to a quick turnaround. The site launched in time for Milan Design Week 2026.

Try it: pick a device or drag the side handles to resize ↓

Fig. 6Jump between breakpoints: the order never changes, only how many cards fit across and how each is cropped.

Client

Working with Mary was a seamless experience from start to finish. She took the time to understand our needs and requirements, and came back with a website design that felt tailored to us, our industry and our target audience.

Throughout the project, Mary guided us from the initial brief through the development and finalisation of the website. She made the process feel clear and collaborative, especially with the developer, and her thoughtful approach gave us confidence in the direction we were taking.

The result is a website that reflects who we are and communicates what we do in a clear and engaging way. We really appreciated Mary’s professionalism, creativity and attention to detail, and would happily recommend her to anyone looking for a UX Designer who can bring their vision to life.
Jonas Oppedal and Christian Sandbye, Founders, Kogl

What I learned

Before the catalogue, a visitor needs confidence. Answering the smallest question, how to say the name, shows what the Kogl team values: the details.