A clear, accessible path to a first home.

Buying a first home is hard to start. The rules are unfamiliar, the numbers feel out of reach, and saving competes with everything else in a paycheck.

HomeFund brings the first steps together. People learn how buying works, find out what they can afford, and save toward a down payment through payroll deductions, with contributions from their employer and lender along the way.

I generated the HomeFund concept and shaped it with the product team: who it serves, what each step has to do, and how saving through payroll fits alongside learning and planning.

I designed the experience end to end, from the information architecture and flows to the visual system and the screens at every breakpoint, and took it into user testing.

The concept started with a simple promise: learn, plan and save for a first home in one place. With the product team, that became a structure and a set of flows, from the first calculator to setting up a payroll deduction.

The flows were assembled into a clickable prototype covering sign-on and account setup, both calculators, the savings plan and its confirmation, and the account overview. That prototype is what we put in front of users.

Early concepts organised HomeFund around four menu paths: My Resources, Explore My Options, Start My Savings and My Account. Each made sense on its own, but together they asked people to guess where a task lived.

The design follows the order people move in. Learn how buying works, plan what you can afford, then save toward it. My HomeFund holds everything that comes after.

HomeFund pairs a light, friendly teal with a deep navy, and Work Sans with Cormorant for display headings.

Light Blue measures 2.2 to 1 against white, well short of the 4.5 to 1 that WCAG AA asks of body text, so it is kept for illustration, charts and large tinted surfaces. A deeper Teal Ink carries anything people read or press, at 5.0 to 1.

The home page leads with the promise and two clear actions, then answers the three worries people bring with them: cost, credit and commitment. A savings card shows what progress looks like before anyone signs up.

Soft teal light pools behind the photo and fades into the next section. It keeps the page warm without putting colour behind the text, and every line of copy over it still measures at least 4.5 to 1.

The first concept asked four questions in four cards and gave its answer after you submitted. The design sets the questions and the answer side by side. Move a slider and the price, the monthly payment and its breakdown update in place.

In the prototype, setting up a payroll deduction meant typing an amount and choosing an end date. The design lets people pick an amount per paycheck from a few sensible options and see straight away how many months it will take to reach their goal.

The employer match and round-ups show what they add, and the confirmation says exactly when the first deposit lands.

Enrolment is only the start. Three screens keep people moving toward a purchase once the saving runs on its own.

As the concept grew, the working file collected 73 colour and fill styles and 50 text styles. The design system brings them down to 18 colour tokens and 8 type roles: Work Sans for the interface and Cormorant for display headings only.

Components carry their states with them. Hover, focus, disabled, error and success are designed once and reused everywhere.

Every screen was designed at phone width alongside desktop, with full-width buttons, tap targets of 44px and up, and a header that stays in reach. Sign-up and the savings plan show their step and a back button, and nothing depends on hover.

HomeFund went from an idea to a tested concept: one path to learn, plan and save, calculators that answer as you move, a savings plan that runs itself, and a system built to meet Section 508 and WCAG 2.2 AA from the first token.