Shape at Prosper: Cutting design time by 90%
A focused case study on architecting Prosper's first enterprise design system, moving from fragmentation and technical debt to a single source of truth that accelerated the entire product development lifecycle.
Summary
Prosper's multi-product financial ecosystem was suffering from severe fragmentation and technical debt due to siloed development. By building the Shape design system from the ground up, we defragmented the ecosystem and created an enterprise-wide asset that radically accelerated our product development lifecycle.
Overview
Shape is Prosper's first comprehensive enterprise design system, built to serve as the single source of truth for UI components, brand guidelines, and coded assets across all product lines.
I was responsible for strategy, vision, aligning Shape's priorities with business goals, integrating its roadmap with development, ecosystem auditing, usability testing, ROI financial modeling, securing buy-in and contractor resources, rearchitecting the system for scale, and technical integration with engineering (including Figma MCP).
Goal
To defragment Prosper's product ecosystem and create a single source of truth for design and code, enabling faster, more consistent product development and establishing Shape as an enterprise-wide asset for UX, engineering, and product teams.
Understanding & Defining the Problem
Prosper's products had grown rapidly to meet customer needs. However, because each product was built by different teams with little coordination, the user experience became increasingly fragmented.
This fragmentation manifested in three critical ways:
- Visual Disparities: Fonts, color palettes, and icon sets varied wildly across products, watering down the brand.
- Technical Debt: Engineering teams were constantly re-inventing UI components, slowing down development and inflating costs.
- User Friction: Returning users struggled to navigate different interfaces, impacting overall satisfaction and loyalty.
Compounding these issues was a severe resource imbalance. We were operating with roughly 20 engineers for every UX designer, double the high end of agile best practices, alongside a staggering 50:1 ratio for UX researchers and content designers. My team was stretched thin across multiple expanding product lines, spending at least 10% of their time just managing design and technology debt. Without a scalable system, this debt would only accrue, hindering innovation and our competitive edge.
The Process
Defining the Vision & The 8-Month Audit
We defined our ideal design system comprehensively as a pattern library, a documented style guide, a coded component library for developers, and a centralized hub for brand mission and design principles.
Before I joined Prosper, the UX team had already started working on two competing versions of Shape. Shape 1.0 was a reactive band-aid cataloging existing inconsistencies, while Shape 2.0 was an aspirational vision. When I came in, I reviewed these diverging paths and saw that they were straining our limited resources and achieving very little in a vacuum. I pushed us to retire Shape 1.0 entirely and refocus our energy exclusively on 2.0. My end aim was to take Shape from a pet design project to a foundational tool that all of Prosper depended on.
To build a true foundation, we spent eight months auditing 10 years of design files. We identified all existing design patterns across the ecosystem, methodically merged duplicative ones, and conducted rigorous usability tests to ensure the newly unified components performed seamlessly across all distinct user flows.
Capitalizing on Year-End Budget & The First Business Case
We initially secured a dedicated design system contractor for three months by leveraging remaining budget at the end of 2023 that would have otherwise been lost. We used this short window to build as much of the foundation as possible, but we knew we needed more time to execute our full vision and needed to build a formal business case to extend the contract.
Generating a business case without long-term internal ROI data was challenging, so we anchored our pitch in industry standards from organizations like Google, Salesforce, and Shopify. We leveraged data from Forrester highlighting a 671% ROI for design systems, alongside industry averages showing 37% savings in development time and an 18% improvement in product quality.
We projected conservative internal savings of $48,000 annually in direct UX labor and $55,000 in engineering. We estimated a 44% time savings for designers and a 20% savings for engineers, intentionally under-promising on the engineering impact since AI tools weren't fully available to us yet. This data-driven pitch successfully secured the budget to extend our contractor for six months to help our understaffed team establish the foundation.
Rearchitecting the System for Scale
With resources secured, we overhauled our architecture. Instead of one monolithic file, we split the system. We created a "Foundations" file for brand elements (colors, typography, style variables) and a separate "Components" file for UI patterns. Minor token updates no longer required pushing massive, risky updates across the entire system.
We instituted rigorous governance, adopting Figma's branching and merging features alongside a semantic versioning model (Major.Minor.Patch) to clearly communicate compatibility impacts, requiring two peer approvals before merging.
To drive adoption without breaking existing workflows, we utilized Figma modes. We established three distinct modes: Legacy (outdated but widely used tokens), Current (sporadically adopted guidelines), and Future (our new brand refresh). This allowed designers to safely adopt Shape tokens into their files without risking sudden visual breaks.
Proving the Value: The Second Business Case
As our initial contract neared its end, we needed to secure further investment, but this time we had internal data. We demonstrated that our contractor had completed 15 new and rearchitected components in just two months, work that previously took our overburdened team nine months.
To make the ROI undeniable, we presented a live side-by-side timelapse. In a training session, two designers built eight development-ready funnel screens using Shape in just 30 minutes, a task that previously demanded half a day. Highlighting that the contractor cost was significantly less than a full-time senior UX hire in Chicago, we secured another six months of funding.
Upskilling the Team & Technical Integration
To ensure the system scaled into production, we needed to improve the team's Figma best practices so they could master auto layout, component properties, and variables. I also worked closely with engineering to architect the design system directly in code. By utilizing Figma MCP for the first time, we created a direct 1:1 connection between our Figma components and the React codebase, drastically cutting down on design-to-code handoff time.
Final Result and Impact
The results blew our conservative estimates away. Shape transitioned from a library to the source of truth for the entire enterprise, delivering workflow transformations that far exceeded our initial projections. On average, across all departments, we cut project time in half. We freed our team up to work on about 6 additional projects on average, representing a 500% increase in productivity. These massive gains were realized across every phase of the product lifecycle:
- 0 Decrease in Design Time: By centralizing design assets, workflows were streamlined, rework was eliminated, and designers were freed up to focus on high-level problem-solving rather than recreating UI patterns.
- 0 Decrease in QA Time: Standardized components cut testing cycles in half, reducing miscommunication and smoothing the design-to-development process.
- 0 Decrease in Engineering Time: With Shape components rolled out and connected via Figma MCP, engineers spent significantly less time rebuilding UI elements, allowing them to ship and maintain features faster.
- Brand Cohesion & Better User Experience: Unifying typography, UI components, and interaction patterns created a consistent and intuitive experience across all Prosper products, significantly reducing user friction.
Learnings & Next Steps
Building an enterprise design system is as much an exercise in change management as it is in design. Looking back, there were several major lessons learned:
- Delayed Upskilling Cost Us Time: I did not push Figma best practices with my team soon enough. Knowing my team was resistant and spread thin, I worried that adding the burden of learning new skills would hurt morale and jeopardize their ability to complete product work on time. However, by waiting until most of Shape was built, our actual product design files didn't utilize the new standards. Even though Shape was integrated into code, we couldn't take advantage of it until the team understood how to use it and took the time to update their files. This slowed us down substantially, and we are still making up for it.
- Engineering Must Be Involved Earlier: We did not bring engineering into the process early enough. Part of this was due to a lack of dedicated engineering resources, but we also failed to realize the extent to which we would have to rearchitect certain components and variables to translate them effectively to code.
- Trust, but Verify Your Tools: We placed too much trust in Figma's platform early on, causing us to lose days of work to bugs that detached components when moving them between libraries, despite following Figma's own migration documentation.
Next Steps
Currently, we have only partially implemented Shape into code with our MCP utilization. Our implementation is largely focused on a new mobile application that will unify our products into a single experience. While this has provided an excellent early measure of our success, our data will continue to evolve as we expand across web experiences, retire our old tech stacks, and fully roll out our refreshed brand. Moving forward, our priority is continuously improving our Figma practices across the team so we can fully leverage everything Shape has to offer.