Homepage and visual rebrand
Designing an updated homepage, backed by user research, and a new visual identity that can fit alongside current features.
At a glance
Role: Lead designer
Timeline: Winter 2021 - Autumn 2022
Activities: Facilitating ideation sessions, sketching, wireframing, visual preference testing, high fidelity mockups, responsive design, design systems, developer handoff
Background
The USAspending homepage hadn’t had a significant update since the COVID-19 features were added in 2020.
The design team started efforts to update the homepage to not only mirror the recently-updated sitewide navigation, but to also create expand upon the existing colors and visual branding of the site.
Starting with the homepage hero image
Based on previous user interviews and site usage analytics, we knew that new users were most likely to land on the homepage. Returning users were more likely to go directly to the search or download feature they needed.
Given this knowledge, we wanted to create a homepage experience that showed the breadth and depth of USAspending’s data in an approachable way for people who might be new to the site.
We decided to start designing the homepage hero image, which is the first thing people see when they land on the homepage. We wanted to replace the current COVID-focused hero image, and then progressively update the rest of the homepage.
Early ideation
We set up an ideation exercise to understand the product owners’ opinions about what was most important to communicate in the hero image.
For our first exercise, we added a series of questions to a Mural board to prompt us to think about USAspending’s value. We completed a series of timed exercises where we added our answers to sticky notes, grouped similar responses together, and then grouped the groupings to find overall themes.
After finding the themes, we learned that ideas like “community impact,” “seeing programs you care about,” and the fact that USAspending is the source of truth for federal spending data were all important.
We then completed a series of workshops where we brainstormed imagery to fit with each of the themes, writing ideas on sticky notes or pulling image inspiration from the web. The designers and product owners then voted on the strongest visual concepts.
Sketching
Designers took those visual ideas and completed a few internal rounds of sketching before presenting sketches back to our product owners.
After reviewing with our product owners, we learned that showing spending flowing from the federal government to states and a "rotating tagline" were our strongest concepts.
I created animated homepage hero images using Sketch and Adobe XD for each of the concepts we wanted to test.
Collecting user feedback
We reached out to professional contacts, friends, and family in order to quickly recruit for the tests. Since our focus was to create a design that resonated with new users, we intentionally wanted to test with people who never or very rarely use the site.
The goal of theses tests was to understand which visual concept(s) led new users to understand the most about the data and features available on USAspending.
In order to gauge peoples’ attitudes toward and understanding of each hero concept, we showed the concepts in a random order and asked a series of questions about what each mockup made people think of and what they expected to be able to do on the site.
At the end of the visual preference tests, we synthesized the responses and found that the “rotating tagline” concept led new users to understand the most about what the data on USAspending could be used for.
Polishing the visual design and creating a design system
After we landed on our finalized hero concept, we worked with the product owners to finalize the rotating phrases, as well as the features we wanted to link to through our primary and secondary action buttons.
We created v1 of the hero, as well as the topics, illustrations for the remaining sections of the homepage.
As a result of these homepage updates, we defined new typography styles, theme and accent color tokens, and a new card component.
With our new theme colors defined, we later worked with an illustrator to implement the hero image on the site today. We were really inspired by illustration styles that mix vectored images with photographs to create a “collage” style hero.