Creative Brief
Crafted Product
Link to → Center for American Progress
With my team at Graphicacy, I was the lead designer for a website redesign for the Center for American Progress (CAP), one of the nation’s most influential progressive think tanks. I was also the lead designer for the CAP Action Fund, the advocacy wing of the organization. The CAP development team encouraged us to explore color as an organizational tool. We also explored a flexible card-based taxonomy system. The final design is more minimal. Yet it reflects our user research and design system overall.
Goal
We teamed with the Center for American Progress (CAP) to re-imagine the CAP web presence and implement a new architecture with more effective, visually powerful, and intuitive way-finding, search, and data visualization tools.
Criteria for success
- Make the CAP sites more visual (CAP & CAP Action Fund).
- Make the site more useful, more interconnected, more cross-pollinating, and more clear in its taxonomies and organization.
- Brand and distinguish the research and advocacy sides of CAP.
- Make the search function more effective in targeting and relevance.
Role
In partnership with our UX specialist partner, Nina Baglia, we did a complete audit of the CAP site to:
- See all the different types of content CAP has, and how they're organizing issues, projects, experts, and other categories.
- Organize this content differently. For example, Does a person going to the website look for a specific expert when they are arriving?
Process
Discovery
Observations
Link to → Center for American Progress
- This piece by Melody Joy Kramer shows that there are a lot of ways we could approach how CAP displays content on their pages.
- The Guardian has an easily scannable framework that works great across different screen sizes.
- The Aspen Institute is taking a step in the direction that the Guardian has with the ever more popular use of cards these days.
- Rand adds dynamic features to the site and allows for a certain level of customization/sorting per the user's needs.
- Exploring a more visual route: the Pew is a good example of that. NPR has also moved their new site in this direction.
We interviewed staff and readers of CAP's website and created user persona archetypes from the interviews. From these user personas, we developed user journeys to discover pain points and features that remedy them.
Whiteboard facilitation by Jeff Osborn. 
User Experience Summary CAP.pdf2840.5KB
User Personas Outline.pdf232.6KB
We looked at CAP's Google Analytics data to find out more about who their users are, what platforms they are using, how much time they spend on the site. We discovered that users were landing on pages directly from the Google Search, but they weren't navigating the site much otherwise. Also, even though there's a lot of research and content on the site, it had an average bounce rate of seconds per page. We discovered that CAP could use more tools and organizational strategies to keep people reading and spending time on the site.
Our initial sketches were done on the whiteboard, and then with the wireframing tool Balsamiq. While sketching, we kept in mind our goals for the CAP website and the Action Fund site...
- Raise awareness on CAP issues
- Raise awareness on CAP’s viewpoints
- Create a robust yet easy to use user experience
- Bring reports to the foreground
- Increase user loyalty
- Encourage users to explore
- Help users understand the connectedness of issues
Create an engaging, advocacy-oriented Action Fund site:
- Create a place for activists around issue awareness
- Increase user engagement with the CAP brand and CAP issues
- Build a community
- Create an intuitive experience between the companion websites
- Position the Action Fund site as a place between content and advocacy.
Concepts → Blueprint
Concepts
Concepts-2.pdf18665.1KB
Concepts-1.pdf5881.2KB
Blueprints
The new menu organization was developed by our discovery process. Here you can see it action: card sorting.
I explored a Power Search option, based on user needs—those who work on Capitol Hill or in academia.
Reflection
This was my first in-depth project using human-centered design and User Experience design methods. I'm grateful for my collaboration with Nina Baliga, and I use these methods now in my projects and in teaching my classes.
Although the final websites didn't integrate all of our style recommendations, they did incorporate many of our user experience insights and designs.