Context
Background
Lafayette Square Institute Aims to Bridge the Gap Between Policymakers and Investors. The organization provides US policymakers across the political spectrum with the insights, data, and resources needed to mobilize private investment to generate prosperity for more people (i.e. low to middle class population).
The Ask
Develop a full-stack report generation tool to dynamically create the 535 Insights Report, featuring key data metrics on Housing, Employee Ownership, and Job Quality across multiple levels of geographic granularity.
Our main tasks include:
Dynamically populate fields with Snowflake data
Allow for simple version tracking using existing user authentication
Update report layouts for easy rich text editing
Flexibility to integrate new themes and branding
HMW Statement
How might we design a internal portal that allows employees to efficiently generate and customize insight reports?
Lafayette Square Institute
Product Designer (Contract)
Figma
3 PMs
3 Designers
7 Developers
Product Design
UX Research
February - May 2025
Role
Focus
Tools
Team
Timeline
Initial Ideation
Low-Fidelity Iteration #1
Initially, we planned to place all customization features on a single page, with the goal of creating a straightforward and efficient experience. After the user selects all the customization features and generates the report, they will then be taken to the second page to view the report on full screen.
However, we realized this approach could overwhelm users, as the cluttered layout lacked a clear, intuitive step-by-step flow. As a result, our team began researching how other platforms have implemented step-by-step experiences to simplify complex user flows.
Due to a development heavy project scope and client request, our design team immediately started ideating low-fidelity wireframes to ensure our final prototype would be delivered time for developer implementation.
Post-Research Ideation
Following our research, we began dividing the customization steps into four phases and making a user journey map.
Low-Fidelity Iteration #2
User Journey Map
With the journey map and phases in mind, we made a second iteration of our low-fidelity wireframes. In this new iteration, we made a progress bar and divided the sections into multiple pages.
Deliverables
Finally, using Lafayette Square Institute’s design system, we finalized a high-fidelity mockup ready for developer implementation.
Reflection
This project was essential to my growth as a product designer, as it taught me that design is rarely a linear process. When implementing complex features, I learned that progress often requires moving back and forth between research, ideation, and iteration in order to arrive at thoughtful solutions. I’m really thankful for this experience!
UX Research For Reiteration
Many platforms use a multi-page approach to guide users through each step of a process. To explore this pattern, our team examined TurboTax and Airbnb, which effectively break down user flows into sequential steps.
TurboTax:
Takeaway
Airbnb:
Though the two platforms appear to have different layouts, we rely on the same UX features to guide users:
Clear progress indicators
Users know where they are in the process and what steps remain, which reduces uncertainty
One primary action per step
Each screen focuses on a single decision, which minimizes cognitive load
Guided decision-making
Users know exactly which steps to follow to ensure end goal is reached