About the Client
This large and well-known private, nonprofit organization is dedicated to economic research in the United States. They have been a leading voice, respected throughout the economic research community for conducting and disseminating nonpartisan research that addresses a wide variety of topics in society.
The client asked Velir to redesign their website after we partnered with them on a successful Sitecore upgrade. Their primary goal for the website redesign was to create a great user experience. To meet that goal, they asked us to design a site where audiences could easily locate and leverage their decades of research. They also challenged Velir to improve their site’s accessibility and readability with a flexible design system. The client wanted a modern, editorial design that relied less on imagery to deliver information, so their audiences could have a better digital experience.
The project’s key challenges were:
- Rethinking type as a visual brand element
- Creating a modern design system that used type to reduce reliance on stock photos
- Establishing a complex type hierarchy that made content easier to digest and navigate
Like many nonprofit organizations, the client didn’t have a dedicated photographer to capture high-quality photos for their website. We proposed that they could reduce their reliance on stock photos by using a compelling typeface that grabs visual attention and acts as a recognizable element of their brand.
With that in mind, we focused on type as a vital aspect of their updated design system. We carried that thought throughout subsequent phases of work, from performing a series of landscape and competitive design analyses, to a comprehensive type study. Based on the visual characteristics and brand attributes the client wanted to express through typography, we presented them with a range of options that reflected the target qualities of the new experience that we were crafting.
Our approach included:
- Conducting a comprehensive type study and presenting our research to stakeholders
- Creating a connection between high-level strategies we previously developed and type selection
- Establishing a complex type hierarchy and ramp that enhances usability
Comparing Typeface Experiences
Our type study, our team took a thoughtful approach to typeface selection, assessing both brand and usability potential. We addressed concerns about type usage in different sizes, languages, and color palettes. To make comparison easier, we created a chart that highlighted the typefaces’ different attributes and what they expressed for the brand (like contemporary/sensible and formal/classic). We based our typeface efforts on earlier strategies we developed in the redesign process to show how the typeface fit within their current and future brand.
Integrating with Design and Development
Throughout our design and development process, we continued type conversations alongside the general design and development of the client's updated design system. By breaking the typefaces down in a chart, we clearly communicated what made the typefaces different and what parts of the brand they highlighted. Our final decision was to use the commercial typeface Tiempos by Klim Type Foundry — a typeface made for editorial typography. Although many clients lean toward free typefaces, the client felt it was more appropriate for their brand to use a premium typeface with a unique look and feel.
The result of our thoughtful collaboration with the client was a consistent, modern, and adaptable design system, that’s more user-friendly, and has a distinguished look that better reflects the brand's strong reputation. Even as one part of the total system, Tiempos seamlessly blends a modern editorial look with the client's classic educational roots, paying homage to their past, while signaling their future and continued role as a leader in their space.
With Tiempos, the client received a modern typeface with a variety of weight options. A wide set of supported languages also allowed them hassle-free adaptation of international names and potential translations. To help the client better understand how to use Tiempos, we collaborated with them to establish rules on color and size usage for the typeface. These rules were created to help them maintain the correct contrast and consistent legible sizes across the different sections of their site.