myManifest

The first version already worked. It had been built quickly with Lovable, which was exactly what an early MVP needed — but as more features were added, the experience started carrying the usual signs of something that had grown faster than its design system.

Financial products are difficult because almost every screen contains information that feels important. Accounts, cash flow, debt, budgets, forecasts, meetings and client decisions all compete for attention. If the hierarchy is weak, the product becomes a wall of numbers very quickly.

The redesign needed to solve three things at once:

• Make a large financial product easier to scan and navigate.
• Create clearer workflows around real client decisions instead of isolated data.
• Build a system the team — and AI coding tools — could keep extending consistently.

Before touching the visual style, I spent time understanding how the different parts of myManifest connected. The product covered Dashboard, Accounts, Cash Flow, Budget, Debt Payoff, Financial Lab, Messages and meetings — and each area had its own set of states, calculations and actions.

The goal was not to make every module look identical. It was to create a hierarchy that made the relationship between them obvious. A user should be able to move from understanding a client’s situation to investigating a problem and then taking an action without feeling like they had entered a completely different product.

The dashboard moved away from being a collection of generic cards and became a stronger overview of the client relationship. We introduced clearer views for client health, important financial changes, upcoming meetings, a decision pipeline and a timeline of what had happened recently.

Instead of asking “what data can we show here?”, the question became “what should the user notice first?” That small shift shaped a lot of the redesign.

Cash Flow was one of the densest areas of the product. It included reports, income, expenses, transfers, forecasting and later recurring transactions. The challenge was giving users enough detail to investigate finances without forcing them through spreadsheet-like interfaces.

We improved grouping, filters, transaction states and the way information was summarised. Forecasting also evolved during the project: instead of presenting the future as if it were certain, we reframed parts of the experience around financial readiness — helping users understand where a client stood and what could affect upcoming decisions.

The same principles extended into Accounts, Budget, Debt Payoff and the Financial Lab. Credit cards, mortgages, loans and other accounts needed enough detail to be useful without overwhelming the page. Debt and budgeting tools needed to make progress obvious. Experimental planning tools needed to feel powerful while still belonging to the same product.

We also became more deliberate with status and colour. In a financial product, red and green can easily become a shortcut for “bad” and “good”, even when the underlying meaning is more nuanced. The interface relied more on labels, hierarchy and context rather than colour alone.

A major part of the engagement was replacing one-off styling with a real system. Components, spacing, typography, states and data patterns were standardised so new screens could be built much faster without slowly drifting away from the rest of the product.

But the handoff was designed for a slightly different workflow than a traditional Figma-to-engineering process. The team was using AI heavily, so I structured Figma variables and tokens in a way that was easier for AI agents and coding tools to understand and reproduce.

The design system was not just documentation. It became a shared language between Figma, the team and the tools being used to build the product.

The entire revamp happened over roughly a month and a half, so the process had to stay fast. We worked through weekly syncs, frequent feedback and daily updates instead of treating the project like a long handoff cycle.

A typical loop looked like:

• Understand the financial workflow and what decision the screen needed to support.
• Simplify the structure before adding visual polish.
• Design the important states and edge cases.
• Review with the client and adjust around product feedback.
• Turn approved patterns into reusable system components.

The scope eventually extended beyond the application as well. I designed the website and developed it with an AI-assisted workflow using Claude, keeping the product story and visual system consistent from the marketing site into the app.

Over the engagement, myManifest went from a fast MVP to a much more structured product foundation with:

• A complete product revamp with clearer hierarchy and navigation.
• Redesigned workflows across dashboard, accounts, cash flow, budgets and planning.
• A scalable design system with reusable variables and tokens.
• Figma structured to work better with AI-assisted development.
• A redesigned and developed marketing website.
• A stronger foundation for the team to keep adding features without losing consistency.

More importantly, the product stopped feeling like an MVP made up of separate financial tools and started feeling like one connected system for understanding a client and making the next financial decision.

myManifest was a good reminder that redesigning an early-stage product is not about replacing everything that came before it. The MVP had already done its job: it helped the team build quickly and understand what the product needed to become.

My job was to add the structure that comes next — simplifying complexity, creating consistency and designing a system that could move as quickly as the team building it.