Personal Project · Freelance Business · Client Journey

Iris & Oak

I designed and built Iris & Oak as the public home for my freelance development work, bringing together my services, selected projects and client enquiry journey in one clear website.

Commercial WebsiteAstroReactTailwind CSSNext.jsClient Journey
View live project
Iris and Oak digital development website

Overview

Building my own development business from the customer journey outward.

I created Iris & Oak to give my freelance development work a clear and credible digital presence, with services focused on websites, web applications, internal tools and practical technical support.

The site needed to present what I offer clearly, explain the value of each service and give prospective clients a structured way to share what they need before a project begins.

Problem

Technical services can be difficult for customers to evaluate

Many small-business customers know that their website or internal process needs improving but may not know which technology, project type or implementation approach they require.

I needed the experience to communicate my services clearly without expecting visitors to arrive with a finished technical specification.

Solution

Clear services and a guided path to starting a project

I built Iris & Oak around outcome-focused service descriptions and a multi-step enquiry journey. Customers can describe themselves, select their needs, provide project details and review their information before submitting it.

01

Clear Service Structure

Dedicated service information for one-page websites, small-business websites, website refreshes and custom digital development.

02

Guided Client Journey

A structured enquiry experience covering the client, their needs, project requirements and final review.

03

Responsive Design

Layouts and navigation designed to remain clear and usable across desktop, tablet and mobile screens.

04

Accessible Interaction

Readable typography, clear hierarchy, visible focus states and interface decisions designed for a wider range of users.

05

Selected Work

Project and concept presentation designed to demonstrate capability, process and commercial thinking.

06

Business Infrastructure

A custom domain, professional business email and deployment workflow supporting a credible independent development service.

Website Experience

A calm and considered commercial interface

Iris and Oak digital development website homepage
A homepage section introducing Iris & Oak’s approach to thoughtful, needs-led development.
Service overview offered by Iris and Oak
A services overview designed to make project options clear and easy to compare.

Architecture

How the website is structured

I used a modern frontend stack across the project, including Astro, Next.js, React and Tailwind CSS. The site combines content-focused pages with interactive areas such as the client enquiry journey, while Vercel supports production deployment.

  1. Layer 01

    Astro pages

    Provides fast, content-focused pages for services, selected work, business information and the main customer journey.

  2. Layer 02

    React interactions

    Supports interactive interface areas such as multi-step enquiry behaviour and responsive user controls.

  3. Layer 03

    Vercel and domain

    Delivers the production site through Vercel using the custom Iris & Oak domain and supporting business infrastructure.

Frontend

  • Next.js
  • Astro
  • React
  • JavaScript
  • Tailwind CSS
  • Responsive components

User Experience

  • Multi-step enquiry journey
  • Progressive disclosure
  • Accessible content hierarchy
  • Mobile-first interaction review
  • Clear calls to action

Content and Product

  • Service positioning
  • Customer-focused copy
  • Selected work presentation
  • Project qualification questions
  • Business process design

Delivery

  • Git and GitHub
  • Feature branches
  • Vercel deployment
  • Custom domain configuration
  • Google Workspace email

Engineering and Product Decisions

Challenges I worked through

Designing for customers rather than developers

Challenge

The website needed to explain technical services to small businesses and organisations without relying on engineering terminology.

Decision

I structured the content around customer needs, expected outcomes and clear next steps rather than listing technologies as the primary selling point.

Outcome

Visitors can understand what Iris & Oak offers and which service may suit them without needing technical knowledge.

Collecting useful project information without overwhelming people

Challenge

A detailed enquiry form can help qualify projects, but presenting every question at once can create unnecessary friction.

Decision

I divided the journey into four focused stages: About you, Your needs, Your project, and Review and send.

Outcome

The business receives more useful project context while the customer completes one manageable group of questions at a time.

Building credibility for a new development business

Challenge

As a new business, Iris & Oak needed to communicate professionalism before building a large catalogue of client work.

Decision

I combined a considered brand system, transparent service descriptions, selected engineering work and a visible development process.

Outcome

The website presents Iris & Oak as a focused digital development service while remaining honest about its current stage.

Learning

What building Iris & Oak taught me

Building Iris & Oak pushed me to think beyond implementation and consider positioning, customer confidence, project qualification and the complete journey from discovery to enquiry.

  1. 01

    How commercial website copy differs from technical project documentation.

  2. 02

    How to structure services around customer outcomes rather than technologies.

  3. 03

    How progressive disclosure can make a detailed enquiry process feel manageable.

  4. 04

    How to build reusable Astro and React components within a content-led website.

  5. 05

    How visual hierarchy, spacing and calls to action guide visitors through a business site.

  6. 06

    How custom domains, professional email and deployment contribute to a credible product experience.

  7. 07

    How accessibility and responsive behaviour affect both design and commercial usability.

Development

How Iris & Oak evolved

  1. Phase 01

    01

    Business and service definition

    Defined the target audience, initial services, project scope and positioning for Iris & Oak.

  2. Phase 02

    02

    Brand and website direction

    Developed the visual identity, colour system, typography and initial content structure.

  3. Phase 03

    03

    Custom Astro website

    Built the responsive site using Astro, React and Tailwind CSS.

  4. Phase 04

    04

    Client enquiry journey

    Created the four-stage Work With Us journey for gathering useful project requirements.

  5. Phase 05

    05

    Deployment and business setup

    Connected the custom domain, professional email and production deployment workflow.

Next Steps

Business and product improvements

01

Enquiry confirmation workflow

Add clearer submission confirmation, customer follow-up and internal enquiry notifications.

02

Client portal

Develop a secure space for proposals, project updates, files, feedback and delivery information.

03

CRM workflow

Connect qualified enquiries to an organised client and project-management process.

04

Expanded case studies

Add completed client outcomes, design decisions and measurable improvements as the business grows.