design icon

The Pay for Success Website: Designing for the Future

Laura Schoppa, Senior Designer
#Design | Posted

The Urban Institute asked Phase2 to design and build a website for their new Pay for Success Initiative. I was part of a Phase2 team that created a design that not only holds true to the Urban Institute brand, but expands on it with a bold, modern, colorful aesthetic.

Pay for Success site collage

The Urban Institute is a Washington DC-based social and economic policy research organization. Their new Pay for Success Initiative collaborates with governments, nonprofits, and other stakeholders to improve Pay For Success projects based on rigorous research and to ensure programs are evaluated accurately.

Requirement: Forward Thinking Design

We met with the Urban team in their offices in DC in late 2015. Through a series of exercises and interviews, including a variation of the 20 Second “Gut” Test, we gleaned the design goals for the site: to engage the user with a professional, approachable design, to communicate data in an intuitive and compelling manner, and to display the Urban Institute brand in a unique way.

And then we received this extra request from an Urban team member (which I especially loved):

Note from client that says, "Our users will appreciate something that looks like what's next."

How We Did It

The Urban Institute brand was very elegant and well defined. We were provided with solid style guidelines.

Many of the sites that the Urban Institute team asked us to look at for design inspiration had modern, high-contrast designs created through large imagery, huge blocks of color, and heavy, dark fonts.

I knew we needed to somehow combine the classic, professional quality of the Urban brand with this new aesthetic.

We took the style and amplified it to create a rich, bold experience. We used large photos and fonts and textures. Some of the less-used colors from the Urban color palette, including pink and yellow, were splashed across the site. We overlaid blocks of color and photos with heavy, italic text. We created a set of custom icons that were exclusive to the Pay for Success design.

Strategic Design Deliverables

With a tight timeline, we carefully chose a set of design deliverables that communicated a clear design direction without being too time-intensive to create. We started with an Element Collage, which showed a design concept to which the Urban team could respond and on which to build.

We then designed three key pages which needed to be especially visually impactful: the Homepage, a Landing page, and a Community of Practice page. The rest of the design deliverables included interaction states and “atoms,” which were distinct page elements, including search filters and video blocks (not to be confused with Pattern Lab’s Atoms. I am borrowing the terminology and symbolism, but in this case, an “atom” means not a full-page design, but rather an element on the page).

3 pages and 7 atoms

 The developers on the team then built out a responsive site using Phase2’s Atrium as a starting framework.

Pay for Success mobile site image

Positive Feedback

We were thrilled to receive this feedback from the Urban Institute team when we launched the Urban Institute’s Pay for Success website a few weeks ago:

We are really happy with the final product. Thanks to everyone who helped get it up and running!

Learn more about Phase2’s work with the Urban Institute in our case study, or watch our webinar recording to learn more about the collaborative design process.


Laura Schoppa

Senior Designer