But, what’s it about?

 
 

The most trafficked product on cfr.org wasn’t increasing any metrics on our site. A primer is just that - an introduction. Let’s get our users the exact information they’re looking for.

 

The before.

 

We’re a non-profit with limited resources and budget constraints. So, how do we collect our qualitative data? First, we looked at our analytics.

 
 

Some of the demographics.

 
 
 

Armed with our quantitative data we worked with the editorial team to determine who the archetypes for this product were. We discussed high level intentions and worked backwards. What does our user need from this primer? Can they find what they’re looking for? Are there ways to get to other information on the same topic? Where are the pain points on this page?

 
 
 

The Influencer

Frank Arlie
Age: 56
Location: Washington, D.C.
Occupation: Diplomacy and International Relations

Goals
Brush up on background of policies and decisions.

Needs
Expects a well researched and knowledgeable article.
Needs easily to be able navigate or skim article.
Interested in saving article for future use.

Concerns
Difficulty finding correct article.
Ads have taken over the internet. Just wants to get the information needed.
Needs credible information. Appreciates when resources are linked.

The Professor

Gabriella Tumelo
Age: 42
Location: Boston, MA
Occupation: Comparitive Politics at Boston University

Goals
Plan class syllabus and semester presentations.

Needs
Expects a well organized and easy to read primer so their students can understand the issues.
Interested in sharing information for presentations.
Information should be up to date.

Concerns
Ease of reading article. They know their students need something that is easy to navigate and doesn’t look too dense (even if it ultimately is).
Information disguised as elementary but it really for experts.

The Student

Jackie Ellery
Age: 19
Location: New York, NY
Occupation: Student at Columbia University

Goals
Write a paper about Brexit.

Needs
Wants to gain a base level understanding of what Brexit is and how it came about.
Sources that can be cited.
Up to date information.

Concerns
Not interested in lengthy articles unless it’s what they’re looking for. Would like to be sure this is a good article before diving in.
Credibility of information.
Less is not more. Interested in more than one piece to get them an overall view of the issue.

 

Once we understood our primary users we dove deeper into their journey. And boy did we find some opportunities to improve. Scanning was difficult. It was hard to navigate to similar articles. URLs weren’t working or incorrect.

 
 
Solutions

Our users need to know they’re getting the information they searched for. Sometimes UX isn’t about creating a new pattern for the user but creating boundaries for the business.

 

Before. The editorial team had to limit section titles in order to fit the chapter navigation character count. Note, there's no summary and introductions can be wordy.

 

After. I kept the structure of the chapter navigation. It followed typical UX patterns and users weren’t confused about what it was. However, I adjusted the boldness and size of the text to give prominence, gave a larger max character count, and had development divorce the navigation name from the paragraph headers allowing for writers to lengthen and shorten where they saw fit. I also added a summary box to give a quick overview of what the user should expect from this article.

 
 

So, what if this isn’t what the user wants? We don’t want them just going back to the search engine.

 
 
 

I added a related module near the beginning of the article. Here, we are looking at the tablet break point. The goal is to not have it interfere with the text just in case it is what the user needs while having it prominent enough that the user immediately knows this content is similar to the article they’re reading.

 

“Tags” before. A user has no idea what these are as they’re served up randomly.

 

I created real tags which and moved them to the bottom of the article where users expect them. The UI was updated to match our brand. On the back-end we added a tool that allows the editor to add tags based on the article. What is pulled into “Related” (above) is based on these tags. This information was added to and documented in the design system to reuse across the platform.

 
 

We didn’t tackle this project only to make it easier for the user to get the information they need. The business also needed to increase visibility of other products. To achieve this I created a way for our user to keep exploring and our teams to serve up important content they’ve been working on.

 
 
 
 

Animation of new cross-promo module. The 2020 election had just started so it was the perfect opportunity to get it in front of people and test this widget.

 
Takeaways

This redesign helped us understand our core CFR users. Did they get a better product? Yes. Did our metrics increase? Absolutely! By 23%. The best part though? This overhaul included research that will help inform future products and create a more consistent and enjoyable experience for the user.

 
Team

Senior UX | UI Designer: Victoria Brooks
Senior Product Manager: Maria Teresa Alzuru
Deputy Director, Design: Katherine Vidal
Director, Product & Design: Lisa Ortiz