In order to create a compelling landing page, I first needed a deep understanding of the audience, their goals, and the problem space. Since I helped design the first version of the product itself, the design team and I had already conducted numerous interviews with financial advisors to understand their specific jobs-to-be-done and the various methods and tools they use to accomplish them. To capture and convert our core audience, I decided to keep the story arc tight, starting with: value proposition → problem statement → solution → product features.

I love typography: tinkering with sizing, measure, and line spacing. I also love grids, not the standard CSS grid with columns, but a traditional print grid, where both the x and y axes are related. A cohesive design system should have all elements mathematically connected. For example, line-height should align with the grid so the baseline lands (or eventually lands) on a grid line. I also design my type systems with optimal line lengths, avoiding overly long lines that make it harder to track to the next line. For instance, a large size body style like P1, can be used across the full page width because the character count per line is still readable. But as sizes get smaller like in P2 and P3, the line length must also shrink to maintain readability, therefore, P2 is used in 2 column containers and P3 for 3 columns.

As I mentioned, having design elements related, sizing, ratios, padding, and spacing, all work to create a more stable and cohesive design. Designing in Figma first helps to achieve this, taking advantage of one of my favorite features, variables. All my spacing and sizing variables relate to the size of a grid square. I do this for every major breakpoint.