TeamHappiness Official.

Team Happiness offers services and resources spanning matchmaking, relationship counselling, faith-based coaching, workshops, and personal development. These offerings needed a dedicated digital home where visitors could learn about the organisation, explore its services, and find relevant information about how to engage with them.

The challenge was to turn a broad range of offerings into a coherent website experience that communicates the organisation's value, makes its services easy to explore, and provides clear pathways for visitors to take the next step.

There was also an opportunity to approach the work differently from a traditional design-to-development workflow. Rather than designing static screens in Figma and handing them over for implementation, I used AI-assisted development to move directly from product and design decisions into a working website.

The goal was to create a functional, well-structured digital experience while using vibe coding to accelerate the journey from concept to live product.

Team Happiness needed a new website, rather than a redesign of an existing one. This meant the work began with establishing the website experience and bringing the organisation's different offerings together in one place.

Each offering serves a different visitor need. The website therefore needed to make the available options understandable without overwhelming visitors with information.

My role

Product Designer & AI-Assisted Builder — combining product thinking, user experience decisions, interface design, and implementation through vibe coding.

Services supported

Private matchmaking; premarital and marriage counselling; faith-based coaching; workshops and speaking engagements; resources and educational content; pricing, consultations, and testimonials; and a bookstore.

Design workflow

Direct-to-code, without Figma. I worked through an AI-assisted development workflow to create and refine the website, so design and implementation happened much closer together.

Rather than treating the design as a static deliverable, I could work towards a functioning product and evaluate the experience in its actual website environment. The project demonstrates how product designers can extend their practice beyond interface mockups and participate more directly in bringing digital products to life.

I approached the website around the information visitors would need to understand Team Happiness and its services. The priority was to establish a coherent structure for the organisation's offerings, supporting information, and relevant next steps.

1. Understanding the experience to build

Established a coherent structure for the organisation's offerings, supporting information, and relevant next steps — the foundation for the website's content organisation and visitor journeys.

2. Structuring the services

Organised the website experience to help visitors explore matchmaking, counselling, coaching, workshops, and other resources. Supporting information — pricing, testimonials, and consultation pathways — helps visitors learn more as they consider their options.

3. Designing through vibe coding

Instead of creating designs in Figma before development, I used AI-assisted development to build the website directly. Design decisions and code generation came together in a more iterative workflow, with the live website as the final expression of those decisions.

4. Bringing the experience to life

Developed the website into a live digital product, bringing its service information and supporting content together in a single destination — a complete website experience visitors could access and navigate, rather than a prototype or design handoff.

5. Evaluating the actual product

The live website is the primary evidence of the work. Screenshots in this case study will be captured directly from the published website, keeping the presentation grounded in the product that was built rather than in hypothetical mockups.

My contribution covered the design and AI-assisted building of a new website, bringing product design thinking and implementation closer together.

Product and experience design

Shaped the public-facing experience around the organisation's services and the information visitors need to explore them.

Information architecture and service discovery

Organised the different offerings and supporting content into a connected website experience, with attention to clarity and navigation.

AI-assisted development and vibe coding

Used AI-assisted development to build the website directly, without a Figma-first workflow — moving from design decisions to a functioning digital product through a more integrated process.

From concept to live website

Carried the work beyond static design deliverables to a published website that can be experienced by real visitors.

Product-focused execution

Approached the work as more than an exercise in visual presentation. The objective was a usable digital destination that communicates the organisation's offerings and gives visitors a way to explore them.

The key contribution was combining product design with hands-on AI-assisted building to deliver a new website from concept to publication.

The project resulted in a live website for Team Happiness, providing a dedicated digital destination for its services, information, and resources.

A working product, not just a design file

Rather than ending with static screens in Figma, the work resulted in a published website. The live interface provides tangible evidence of the design decisions, the organisation of content, and the final digital experience.

Extending my product design practice

The project allowed me to apply product design skills in a hands-on building process, using AI to support the translation of design intent into a functioning website — shortening the distance between an idea and a working product while keeping the user experience at the centre.

Measured traction since launch

The live website's reach has been tracked since launch across two analytics reports. They record 6,281 total visits (reported change +12%) and 1,792 total visits (reported change +20%) respectively — real audience growth since the site went public, not a projection.

Where the visitors come from

Across the two analytics reports, social channels are the leading source of traffic (275 and 818 visits), followed by direct visits (252 and 685) and search — including SEO and answer-engine (AEO) traffic (92 and 269). Referrals added 9 and 20 visits, and every visit arrived without paid advertising: zero ad-sourced visits in both reports.

Team Happiness was an opportunity to approach website creation beyond the conventional design-and-handoff process. By combining product thinking, interface design, and AI-assisted development, I was able to take a new website from concept to a live product without relying on a Figma-first workflow.

For me, the value of vibe coding is not simply generating code faster. It is being able to participate more directly in building, testing, and delivering the experience that people actually use.