Hapidae Family Life App & Framer Website

Racheal James

Verified

Completed work

Framer Developer

UI Designer

UX Designer

Figma

Framer

Jitter

Family & Childcare

Hapidae – The Family Life COO App & Website

Role: Product Designer & No-Code Web Developer Scope: UX/UI Design · Feature Strategy · Wireframing · Website Design & Development (Framer)

Project Overview

Hapidae is a modern family organization app designed to help busy parents, especially working moms, manage their family lives without overwhelm. Think of it as a Family Life COO: overseeing co-parenting logistics, schedules, meal planning, household tasks, and self-care.

I worked on the full product experience, from mobile wireframes to a responsive, on-brand Framer website that tells the Hapidae story with clarity and empathy.

Overview of the the navigation

Project Goals

Simplify the mental load modern parents carry

Create a collaborative experience for families and co-parents

Build a calm, empowering interface

Clearly communicate the value of Hapidae through the marketing website

Challenges & Solutions

1. Challenge: Designing for the mental load

Parents don’t just do tasks; they carry the stress of remembering everything.

Solution: A clean, structured home dashboard provides a calm view of family life: tasks, events, meals, and more. Microinteractions and soft tone-of-voice help reduce pressure.

2. Challenge: Showcasing the brand message through the website

The Hapidae site needed to feel as thoughtful as the product itself, clear, nurturing, and helpful. Solution: I designed and built the Framer website to reflect the brand’s warmth and clarity. I used:

Calm colors and spacious layouts

Friendly, supportive copywriting

Scroll-based storytelling to guide visitors through what Hapidae offers

A responsive layout that feels light on both desktop and mobile

3. Challenge: Juggling complex use cases while keeping the UI intuitive

Families have diverse routines, some structured, some unpredictable. Solution: Each core feature was designed with flexibility in mind:

Tasks can recur or shift

Calendars can sync with Google

Meal plans can be edited collaboratively

Roles are clearly defined but not rigid

Preview of task and home screen

Feature-by-Feature Breakdown

Home Dashboard

The main center for family life, at a glance, you know what’s coming. Goal: Reduce mental overload and boost confidence in day-to-day planning.

Calendar View

Designed to feel familiar yet powerful. Includes Google Calendar sync. Goal: Make planning fluid and adaptable.

Task Manager

Assign, schedule, and complete shared responsibilities. Goal: Promote teamwork, not silent stress.

Meal Planner

Flexible, collaborative meal planning the whole family can contribute to. Goal: Save time and reduce daily decision fatigue.

(image of meal planner section)

Meal plan screens

Framer Website

A clean, responsive website that communicates the mission in 30 seconds or less. Goal: Build trust with potential users and clearly show what Hapidae is about.

Visit site:

What Made This Project Special

Real-world empathy: I designed for a real emotional pain point, one that’s often dismissed.

Creative trust: I had room to lead both UX and visual direction without constraint. Lou (the client) wanted a non-traditional visual direction for her app and I delivered just that.

Holistic design: From product to site, every element ties back to one message: family life shouldn’t feel like chaos.

Framer flow: I brought the brand to life online with clean animation, thoughtful layout, and smooth transition.

Tools Used

Figma – UX Design & Wireframes

Framer – Website Design & Development

Notion – Planning & Documentation

Google Calendar API (planned) – Sync research

Jitter - Motion/Animation Presentation

Visual Preview (Add screenshots) [This section will be deleted after I've added the requirements]

Consider showing:

Homepage & Hero section from the Framer site

Calendar & Dashboard wireframes

Mobile task assignment screen

A side-by-side: App ↔ Website (showing brand consistency)

Outcome

Designed 100+ screens

Built & launched a full Framer site

Created a strong UX foundation for development

Maintained brand clarity across web and app

Like this project

Completed work

Posted Jun 30, 2025

Designed and developed Hapidae app and website for family organization.

Likes

Views

Timeline

Apr 1, 2025 - Jun 3, 2025

Clients

Louise