Skip to content
Book a call Contact me

LIVY, HOA finance app

LIVY, HOA finance app, is a product design case: LIVY is an MVP web app that gives a homeowner association board one view of the association's money, from bank accounts and the budget to members. Pavlo Zhydkykh designed the MVP for a client in 2023: 54 wireframes, 49 UI frames, the onboarding and a library of 146 components.

Product designFrom the Figma file

Does ChatGPT recommend your website?

Free report in 48 hours · 5 AI engines

Product
HOA finance MVP
Users
HOA boards
Work
MVP app design
Year
2023
Stage
Wireframes to UI
Figma
103 frames

Key takeawaysUpdated By

Key takeaways

  • Pavlo Zhydkykh designed the LIVY MVP in two passes: 54 wireframes of the whole product, then 49 UI frames in the final look.
  • A homeowner association is a private organization that governs a housing community, collects dues and sets rules for the residents[1].
  • A minimum viable product has just enough features to be usable by early customers, who then give feedback for the next versions[2].
  • The first LIVY dashboard asks the board to connect a bank account, set a budget and invite HOA members: empty states like this are common during onboarding in complex applications[5].
  • The LIVY library holds 146 components on an 8 px spacing grid: inputs, buttons, dropdowns, toasts, typography, and brand and system colours.

What is a homeowner association?

A homeowner association (HOA) is a private organization that governs a housing community, collects dues from the owners and sets rules, run by a board of directors. LIVY gives that board one view of the HOA's money, and Pavlo Zhydkykh designed the MVP of the app, from wireframes to the final UI.

Wikipedia: Homeowner association

Pavlo Zhydkykh

“I start an MVP from the first screen a user sees. For an HOA board, that screen shows the money and what is late.”

Pavlo Zhydkykh · Web designer and developer since 2016

Figma · LIVY - MVP

LIVY dashboard with checking and reserve accounts, community goals and bank account cards for an HOA
The dashboard overview: account balances, a community goal and every linked bank account in one row.

Scope

What Pavlo did

  1. 01

    Wireframes of the whole MVP

  2. 02

    Onboarding: HOA details, profile, team and bank link

  3. 03

    Dashboard widgets for accounts, revenues and expenses

  4. 04

    Budget page with income and expense lines by year

  5. 05

    Component library: inputs, buttons, toasts, widgets

  6. 06

    Brand and system colours on an 8 px spacing grid

The Figma file

Screens from
the design file

Frames exported from LIVY in Pavlo's Figma file "LIVY - MVP" on 23 October 2026. Pick a screen below.

UI Design · Dashboard overview

LIVY dashboard with checking and reserve accounts, community goals and bank account cards for an HOA
The dashboard overview: account balances, a community goal and every linked bank account in one row.

What the file holds

103 screen frames across 2 sections of the file, counted in Figma. States count as frames: an empty list, an error, a success toast.

  1. MVP wireframes54
  2. UI design49

Checklist

6 widgets an HOA board dashboard needs

The widgets specified in the LIVY component library, each with a note on what the card shows. The same list fits any HOA finance dashboard.

  1. 1. Account summary

    The main HOA bank accounts at a glance, such as checking and reserve, with the current and the available balance.

  2. 2. Revenues and expenses

    Income this month, mostly HOA fees, next to the money paid out, with progress against the expected amount.

  3. 3. Top expenses

    This month's expenses by category, such as landscaping, utilities and insurance, with the transactions behind each category.

  4. 4. Budget tracking

    A traffic light status that shows whether the HOA is on track or behind, overall or by line item.

  5. 5. Late payments

    The members who have not paid dues this month, in one list the board can act on.

  6. 6. KPIs and P&L

    High-level numbers, payments received and expenses paid out, plus a line chart of income against expenses for a chosen period.

Fit check

Is an MVP design project like LIVY
right for you?

A good fit if

  • You have a product idea for one group of users, such as HOA boards, and need the MVP designed before the build.
  • You want wireframes of the whole product first, so the flows are agreed before the visual design starts.
  • Your engineers need a component library with spacing, type and colour rules, not only finished screens.
  • The product handles money: bank accounts, budgets and dues, and every number needs a clear place on the screen.

Not the right fit if

  • You need the app built: Pavlo designs the product in Figma, and the client's engineers build the app.
  • You need a marketing website on Webflow: Pavlo builds websites only on Framer and Astro + Sanity.

Compared

Wireframes and UI design: the two passes of the LIVY file

Pavlo designed LIVY in two passes. The wireframes map the whole MVP; the UI design gives the key screens the final look.

Wireframes and UI design: the two passes of the LIVY file
CriterionWireframesUI design
Frames5449
PurposeMap every flow: what each screen holds and in which orderThe final look: colour, type, widgets and states
CoversOnboarding, dashboard, members, payments, statements, team, budgetOnboarding, dashboard widgets, top expenses, budget, budget calculator, members
Member sideStatements, payments and notifications for HOA membersA members list where the board approves or declines new members
ContentPlaceholder titles such as "Expense 1 Title"Sample amounts, categories and dates

How it works

How Pavlo designs
an MVP like LIVY

The order Pavlo usually follows on an MVP. This is his working method, not a dated log of the LIVY project; the stages match what the LIVY file holds.

How Pavlo designs an MVP like LIVY, step by step
#StepWhenWhat happensYou get
01 Map the MVP First Who signs up, what the board needs to see first and which screens the first version needs. A screen list for the MVP
02 Wireframes After the screen list Every flow in low detail: onboarding, dashboard, members, payments, team and budget. On LIVY, 54 wireframes. Agreed flows before any styling
03 Component library Before and alongside the UI Inputs, buttons, dropdowns, toasts, type and colours on an 8 px grid. On LIVY, 146 components. One source for every screen
04 UI design After the wireframes The final look of the key screens: onboarding, dashboard widgets, top expenses and the budget. On LIVY, 49 UI frames. Screens ready for the build
05 Widget specs With the UI A note per widget on what the card shows and where the card links to. Specs the engineers can follow
06 Handoff Last UI design, wireframes and components on separate pages of one Figma file. A file the engineers build from

In their words

MVP and HOA design, in the words
of the docs and Pavlo's clients

Word for word, with the source linked: research, official documentation and the people Pavlo Zhydkykh has worked for.

“The board of directors makes decisions regarding the HOA, including management of the HOA's finances, protecting the HOA's real and intangible assets (generally the amenities provided which were the basis for inducing people to purchase lots), and enforcing the governing documents.”

WikipediaHomeowner associationSource ↗

“A minimum viable product has just enough core features to effectively deploy the product, and no more.”

WikipediaMinimum viable productSource ↗

“A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.”

Nielsen Norman GroupDesign systems 101Source ↗

“One of the best contractors I have worked with. Really thoughtful about communication. Went above and beyond in delivering the results that our team needs. Would 100% hire again for our projects.”

Client on UpworkFramer development contractSource ↗

“Pavlo was a pleasure to work with on this project. The web and mobile designs he created were amazing. His communication was prompt which made for a smooth project. I highly recommend his services.”

Shawntae SpencerClient, QuickQuick Pay · Web and mobile design on UpworkSource ↗

“He's amazing in what he contributes, both design-wise and also from the ideas.”

Oliver BockOwner, The B2B Answer · Website design, 2025Source ↗

FAQ

Questions about
the LIVY project

Still unsure? Ask your AI about Pavlo Zhydkykh:

ChatGPTPerplexityClaudeGeminiGrok

Q.01

What did Pavlo Zhydkykh design for LIVY?

Pavlo designed the MVP of LIVY, a finance web app for homeowner association boards, in Figma: 54 wireframes of the whole product, 49 UI frames in the final look and a library of 146 components.

Q.02

Who is LIVY for?

The HOA board. During onboarding a board member can invite the vice president, secretary, treasurer and community manager to the team. The wireframes also map the screens where HOA members see statements and pay dues.

Q.03

How does onboarding work in LIVY?

A new user signs up with email or Google, confirms the email with a code and adds the HOA details: role, community name and address. Then the user creates a new HOA or joins an existing one, invites colleagues and connects the HOA bank accounts, or skips that step for later.

Q.04

What does the LIVY dashboard show?

The balance of each linked bank account, revenues and expenses this month, a community savings goal, top expenses by category and KPI cards. A budget calculator projects next year's budget or the rest of this year's expenses, and the board can add widgets from a modal.

Q.05

Does LIVY have a design system?

Yes, a library of 146 components: icons, inputs, buttons, dropdowns, checkboxes, radio buttons, toasts, typography, brand and system colours, elevation and widget specs. Spacing follows an 8 px grid, with 4 px when needed.

Q.06

Who builds the LIVY app from the design?

Pavlo designed LIVY for a client in 2023, and the client's engineers build the app. The LIVY case shows the Figma file: the wireframes, the UI and the component library.

Sources and further reading

  1. [1] WikipediaHomeowner association
  2. [2] WikipediaMinimum viable product
  3. [3] Nielsen Norman GroupDesign Systems 101
  4. [4] WikipediaWebsite wireframe
  5. [5] Nielsen Norman GroupDesigning empty states in complex applications
Pavlo Zhydkykh

About the author

Pavlo Zhydkykh

Pavlo Zhydkykh is a web designer and developer in Eastern Europe who has built websites for AI, fintech and B2B startups since 2016, designing and building each project himself on Framer or Astro + Sanity. Clients include MStudio Asia, Silicon Data, Inturai, Accolade Pro, NimbleStax and Sancts.

  • Top Rated on Upwork
  • 100% Job Success
  • 10 years since 2016
  • 50+ sites shipped
  • 90+ PageSpeed at launch
Kulparkivska St. 200, Lviv 79021, Ukraine +380 93 610 62 68 [email protected]

LinkedInUpworkContra Privacy policy

Page reviewed by Pavlo Zhydkykh · Updated

Numbers

The design file
in numbers

Counted in Pavlo's Figma file on 23 October 2026. The file is private, so these numbers have no public link.

Screen frames: wireframes and UI
103
Wireframes of the MVP
54
Components in the library
146

AI visibility check

  1. 1Website
  2. 2Business
  3. 3Contact
  4. 4Check

Does ChatGPT recommend your website?

Pavlo Zhydkykh asks ChatGPT, Perplexity, Gemini, Claude and Grok 20 questions your buyers ask, and shows where you show up.

Free · report in 48 hours