Responsive Website Design for Atelier Green

Designing a family-friendly, trustworthy, and elegant digital presence for a sustainable architecture consulting business.

Overview

Atelier Green is a new consulting business focused on helping young families make healthier and more sustainable choices in home building and interior design. From non-toxic materials to environmentally conscious design practices, the goal is to empower parents to create safe, future-forward spaces for their children.

This project involved designing a responsive website that clearly communicates the business’s mission, builds trust with families, and encourages visitors to book a free consultation.

My Role & Timeline

Role: UX/UI Designer (solo) — research, IA, UX flows, visual design, prototyping
Duration: 4 weeks
Deliverables: Full desktop & mobile designs, brand tile, moodboard, updated flows, prototype animations

This was my first time designing for a small business, which made client collaboration a central part of the process.

1. Problem

Families want healthier homes—but lack the guidance to make safe, sustainable choices.

Research interviews showed that parents care deeply about the materials used in their homes—especially regarding safety, indoor air quality, and non-toxic finishes. However, many feel overwhelmed by the amount of conflicting information available online and struggle to find trustworthy, accessible resources.

Key Pain Points

  • Difficulty finding clear, trustworthy information on non-toxic and eco-friendly materials

  • Overwhelming amount of online content

  • Budget concerns related to sustainable choices

  • Uncertainty about whether contractors or designers understand their priorities

Business Challenges

  • Communicate expertise and mission clearly

  • Build trust with potential clients

  • Create an intuitive funnel toward consultation sign-ups

2. Research

Participants: 5 respondents — all parents, homeowners, or planning construction

Key Findings

Priorities

  • 100% ranked quality of materials as their top priority

  • 80% emphasized budget

  • Sustainability was not always an explicit priority, but appeared frequently in emotional context (health, children’s safety).

Sustainability & Safety

  • All participants wanted non-toxic materials

  • Strong interest in safe paints, natural flooring, chemical-free spaces

Knowledge & Information Gaps

  • 4 out of 5 said it’s difficult to find trustworthy information

  • Most turn to the web, professionals, or family

Cost Concerns

  • Mixed willingness to pay more for sustainable options

  • Some would invest for health reasons; others were skeptical of paying “for moral points"

What a “Healthy Home” Means

  • Non-toxic paints

  • Good air quality (no toxic dust)

  • Natural, durable materials

  • No harmful chemicals

3. Target User Persona: Camille

A 38-year-old San Francisco parent balancing a demanding career with raising a young child. She wants a safe, sustainable home but doesn’t have the time or knowledge to research materials or evaluate eco-friendly options.

Needs

  • Trustworthy guidance

  • Time-saving recommendations

  • Healthy, natural materials

  • A simple, reassuring experience

5. Design Strategy

Website Architecture

Website Architecture

Six core pages: Home, About, Services, Projects, Read + Learn, Partners
Each includes a prominent CTA (“Book a Consultation,” “Start Your Project”).

Design Approach

  • Warm, minimal aesthetic

  • Neutral palette with soft green accents

  • Family-friendly without being juvenile

  • Clear, digestible layout

  • Mobile-first for on-the-go parents
    AG project all pages

Mood board & Photo art direction

For the mood board and photo art direction, I selected imagery with natural lighting and clean, straightforward compositions. The photos feature calm, slightly desaturated tones that are easy on the eye and evoke a sense of peace and balance. I also included close-up details of natural textures to highlight the beauty of materials in a subtle, refined way.

Brand Colors

For the brand colors, I explored a range of green tones. My initial palette leaned toward softer, more muted shades to complement the slightly desaturated photography featured in the moodboard. After further exploration, I found that introducing greens with a touch of blue created a brighter, fresher look. This more vibrant green stands out beautifully against simple black typography and pairs naturally with the wood and stone textures in the imagery.

Naming and Logo

For the logo, I explored several directions. I experimented with the original name Pick-a-green, but it felt slightly off-brand—too playful for a mature consultancy focused on sustainability. I then worked with words like green, vert, atelier, bureau, arch, and feuille. Ultimately, I chose Atelier Green because it’s simple, memorable, and carries a subtle French charm while still sounding professional and authoritative.

For the mark itself, I refined the concept down to the initials AG, paired with a parallel slanted green line on the left. This element not only adds a distinctive touch but also evokes the shape of a roof, nodding to the architectural side of the business.

Logo lock uo works well in large and small sizes, will looks great in both small digital formal and large print.

6. Information Architecture & User Flows

Goal: Make the sign-up process simple, clear, and visible.

The final flow includes:

  • Dedicated consultation page

  • Short, straightforward form (name, email, location, budget, project type)

  • Success confirmation

  • Email notification

6. Information Architecture & User Flows

Goal: Make the sign-up process simple, clear, and visible.

The final flow includes:

  • Dedicated consultation page

  • Short, straightforward form (name, email, location, budget, project type)

  • Success confirmation

  • Email notification

7. Usability Testing

Participants: 5 users including the business owner

Test Goals:

  1. Assess ability to find and complete the consultation for

  2. Evaluate navigation clarity

  3. Understand impressions of trust and professionalism

    Findings

    Sign-up Flow

    • 100% of participants successfully completed the task

    • CTAs described as “impossible to miss”
      AG project all pages

    Navigation

    • Clear, intuitive, easy to understand

    • Service offerings communicated well
      AG project all pages

    Branding and Aesthetic

    • Professional, minimal, upscale

    • Green accent added personality without looking childish

    • Strong alignment with target Bay Area audience

    Areas for Improvement

    • Add more imagery of family/children’s spaces

    • Move consultation form to a dedicated page

    • Update CTA color for consistency


7. Final updates

Based on client and user feedback, I implemented:

  • Dark green CTAs for visual consistency

  • Dedicated booking page

  • Improved button styling

  • Additional imagery featuring family spaces

  • Fixed prototype interactions

  • More engaging CTA language (“Book Now”)

9. Reflection & Learnings

  • Designing for a small business requires thoughtful communication and clear expectation-setting

  • Diverse user perspectives help uncover critical insights (even uninterested users were valuable)

  • Health-focused messaging resonates more deeply than environmental rhetoric

  • AI-generated imagery, when controlled carefully, can elevate early-stage design presentations

Challenges

  • Communication delays due to client availability

  • Ensuring the balance between sophistication and family-friendly warmth

10. Final Deliverables

  • Brand tile and moodboard

  • Updated user flows and task flows

  • Interactive prototype

  • Visual explorations and page layouts

  • Full responsive desktop & mobile designs

Previous
Previous

Adding a new feature to Duolingo app

Next
Next

Reversi—App Companion for Reversing Prediabetes