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.
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):
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 Urban.org 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).
The developers on the team then built out a responsive site using Phase2’s Atrium as a starting framework.
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!