Katerina Kabanova

Moss Space

A multi-page website for a London studio that makes custom walls, art pieces and installations from preserved moss.

The Moss Space website on a laptop, a tablet and a phone: the home page, the Ethereal Bloom project and the gallery
Type
Concept project
Role
UX/UI Designer
Tools
Figma, Midjourney
Year
2025

Project brief

Two Moss Space business cards: the moss logo with a phone, an email and a London address on one, an embossed leaf pattern on the other

The studio

Moss Space is a design studio I invented for this project. I wrote its brief the way a client would fill one in.

The brief

The studio makes preserved-moss decor for homes, offices, restaurants and hotels. It asked for a website that shows its work and brings in requests for custom projects.

  • Key selling points

    • Creative thinking
    • A personal approach
    • Quality materials only
    • A guarantee on the work

  • Visual direction

    • Stylish and minimalist
    • Natural accents
    • Shades of green

  • What customers need

    • A cosy space that feels alive
    • Eco-friendly materials
    • A wow effect
    • Greenery without plant care

Problem & goal

The problem

The studio wanted a stylish, minimalist website that brings in requests. Before ordering a custom piece, customers want to see plenty of past projects and reviews. That much proof can crowd a minimalist page.

The goal

A visitor feels the studio’s style from the first screen and finds enough proof to leave a request. The pages keep their minimalist look with all that proof on them.

Key decisions

  1. Need: Feeling the studio’s style at first sight

    Large serif headings with script initials sit over cut-out moss compositions. Wide margins of cream background keep the page minimalist.

    From the research“The studio with more proof looks less refined”

    The home page’s first screen: MOSS SPACE in large serif letters with a script M over moss, white stone shapes and white and orange flowers

  2. Need: Trusting the studio before ordering

    I spread the proof across the site, so no page has to carry all of it. On About, it is the team at work, with a short note on their backgrounds.

    From the research“Neither studio shows its team”

    The About page’s Meet the team block: a short note on the team beside photos of its designers and makers at work on moss pieces

  3. Need: Seeing how a piece is made

    A future customer follows a finished project from its natural materials through the seven steps of the work to the customer’s review.

    A project page: five material cards from Mood Moss to Italian Ruscus, then the first steps of the process

  4. Need: Leaving a request from any page

    The “Leave a request” button stays in the header as the page scrolls, and the short “Work with us” form closes every page.

    From the brief“A website that brings in requests for custom projects”

    The bottom of the gallery page: the header with Leave a request over the scrolled photos, and the footer’s Work with us form with name and email fields

Process

Research

Competitive analysis

I analyzed two studios that make moss walls, The Moss Box and Emerald Green. I looked at how each one shows its work and earns a visitor’s trust before a custom order.

What worked

  • Photos of real projects
  • Clear navigation
  • A large portfolio and well-known customers
  • Contacts in the header and the footer
  • A contact form on both sites

What didn’t work

  • Neither studio showed its team
  • Neither stated a guarantee
  • One studio gave few details about its services
  • A video on one home page made the site slow to load

Both studios were easy to use, but the one with more proof of its work looked less refined. So I paired a calm, modern look with proof on every page.

Structure

Information architecture

I designed five pages for the site. The line shows each page with its blocks, top to bottom.

Prototype

Wireframes

Visual Design

Visual style

The brief asked for a stylish, minimalist look with natural accents in shades of green. I kept the greens on a cream background and added warm copper for the project and material cards.

Typography

Colors

  1. Home
    1. First screenStudio name, short introduction
    2. About usWho the studio is and what it makes
    3. Our servicesFour services with descriptions
    4. Our projectsThree featured projects
    5. AwardsFour awards by year
    6. ReviewsCustomer reviews
    7. FAQFive common questions
  2. Gallery
    1. ProjectsPhotos of the work by type, each opens its project page
  3. Project page
    1. DescriptionProject photo, name and description
    2. MaterialsThe moss and plants used, each with a photo
    3. The processSeven steps from consultation to final walkthrough
    4. ReviewThe customer’s review
    5. Other projectsA slider of more projects
  4. About
    1. About usThe studio’s story and its founder
    2. By numbersThe studio’s work in figures
    3. Meet the teamThe team at work and their backgrounds
  5. Contacts
    1. Contact detailsAddress, phone, working hours
    2. MapThe studio’s location
  1. Home
    Home page wireframe: the studio’s name over a large image, then about, services, projects, awards, reviews and questions
  2. Gallery
    Gallery wireframe: GALLERY (120) with filters, then a loose grid of project images
  3. Project page
    Project page wireframe: the project’s name and photo, then materials, the process, a review and other projects
  4. About
    About wireframe: About Us, the studio’s statement and story, its numbers, and the team
  • STIX TwoHeadings: a classic serif
  • Classica OneInitials: a decorative script
  • InterBody text: easy to read
  • #FFFCEF
  • #6F8A40
  • #645D21
  • #24331C
  • #BC6C25

Final design

Home

The home page opens with the studio’s style, and its projects, awards and reviews follow.

The whole home page on desktop: MOSS SPACE over a moss composition, then the studio’s introduction, services, projects, awards, a review, questions and the footer
Scroll inside the screen

Gallery

A visitor picks a type of work and opens any project from its photo.

The whole gallery page on desktop: GALLERY (120) on green with tabs for all work, walls, frames and installations, then a loose grid of moss pieces and the footer
Scroll inside the screen

Project page

A visitor follows one piece from its materials to the customer’s review, then opens the next project.

A whole project page on desktop: Ethereal Bloom, a wedding photo zone of moss and white hydrangeas, then its materials, the process, a review and other projects
Scroll inside the screen

About

A visitor reads the studio’s story and sees the team at work.

The whole About page on desktop: About Us over a blurred photo of a moss wall, then the studio’s statement and story, its numbers, the team and the footer
Scroll inside the screen

Contacts

The address, phone and working hours sit above a map.

The whole Contacts page on desktop: Contact us in large serif letters, the studio’s address, phone and working hours, a map and the footer
Scroll inside the screen

Reflection

What I learned

On Moss Space I learned to show a business’s mood and vision through design. I kept the site as minimalist as the studio wanted and ran the proof of its work through every page.

What I’d improve

I’d add a blog with project stories and award news, so visitors can see the studio keeps taking on new work.

Next steps

Next, I’d test the site with interior designers and homeowners: can they find a project like theirs and leave a request without help?