Conflicted

 

The Center for Preventive Action (CPA) is a program at The Council that focuses on conflict where U.S. interests are at risk. Their public facing product, The Global Conflict Tracker, showcases and updates conflicts that are of concern. As it’s a top performing product at The Council, CPA came to us asking for guidance on how the user experience could be improved and potentially act as an entry point for other users.

 

Before.

 
Research

Given this is the second highest performing product, getting on average 150,000 unique visitors each month, and we had a flexible timeline we had the opportunity to dig deep for information. From analytics to surveys to user interviews - we did our due diligence on this product.

 

1.2 million unique visitors between November 1, 2020 and November 1, 2021.

The home page is consistently the top page. Beyond that it fluctuates with the news.

Most of our users come to our page organically.

 

What about the information we can’t get from google analytics though? We chose to do a site survey over two two week periods. CFR users tends to engage with us when asked but if they didn’t want to we gave them the ability to dismiss and a cookie that would remember their choice so we didn’t continue to bug them. Every survey question got over 4,000 responses and first four logged over 7,500 responses.

 

We made the survey as unobtrusive as possible. We’d love their help but the primary goal across the site is to get the user the information they need and we aren’t going to take away from that. It’s only ever shown once so, if the user minimizes it or leaves the page and comes back we made sure it wasn’t going to pop up again.

 
 

Armed with this information we jumped for joy because we got a small budget approved for usability tests! We recruited five participants to chat with us over zoom. Each user was 18-24 years old and four out of five were attending four year universities. We had three test our desktop tracker and two test the mobile version.

 

72.4% come to the Tracker for research
82.5% of users are students
68.5% are between the ages of 18 and 24
82.3% are first time visitors
85.7% of users found what they were looking for
79.1% thought it was easy to find what they were searching for

 

Usability testing took about 50 minutes. We first had them do a free exploration followed by various tasks (using the map to identify conflicts, telling us more about a conflict, fact checking, and further reading), and finally their final thoughts and general consumer behaviors.

We also made a mobile prototype because we already new how terrible the user experience was on the live version.

 

 

 
Findings

Tier 1

  • “View by” toggle not obvious.

  • Color of map dots proved confusing.

  • Insufficient map functionality on mobile.

  • Methodology information hard to find.

Tier 2

  • Homepage “alerts” go unnoticed.

  • Insufficient map detail.

  • High interest in imagery.

  • List view of conflicts on homepage underutilized.

  • Additional resources are buried and not always understood.

Tier 3

  • Conflict page “Alerts” understood as “Recent News.”

  • Unsure if information is up to date.

  • More about CPA is not always found.

  • Links to CFR need clarification.

Acknowledgement

  • Hamburger menu proves confusing. This is an issue caused by not updating the main navigation. It’s not in our tiers as it will automatically be resolved.

 
 
Wireframes

We determined it best to begin from the final part of the user journey and work backwards. This detailed page will inform what information is truly needed when landing on the tracker map.

 

 

 
 

From here we went on to put pencil to digital.

 
 
 

Direction 1. Tracker based. Brought photography to the forefront by creating a stack of photos on the left rail. News is very important so it is brought to the top on the right rail. They’re both sticky. Main content is centered.

Direction 2. Tracker based. Again, stickies on left and right rails but left rail has the header of the conflict along with a navigational element — aligning with our backgrounders. Main content is centered.

Direction 3. Lean into telling the story about the conflict. Allowing for a content heavy experience — standard for The Council. Photography is accessible but less important. Latest news remains important and would be on either the left or right rail.

 
 

Feedback from stakeholders took us toward direction two - tracker based! Working backwards understood the landing page map is used for navigation. The detail page is where the user is going to get the information they’re looking for. Poking around the internet I found that most trackers immerse the user. Seeing as we have the time and funds this was our first opportunity to create an immersive experience which is exactly what our target user likes to engage with.

 

Direction 1. Split frame. Ability to toggle between map experience and list view. Title, description, and methodology in full view at all times.

Direction 2. Floating blocks. Everything can collapse so the map becomes fully immersive. Remove list view as only one of our tests revealed it as useful.

Direction 3. Story style intro with tracker style map. List and map are visible at the same time allowing two ways to navigate the map.

 

You might be noticing that all our wireframes are in desktop at this point. This is because over 56% of our cfr.org users are on desktop. Even though I’ve been going through the mobile version in my head the entire time I want to make sure it’s going to work on desktop. By focusing in this way it helps to form our final direction.

 
 
 
Designs

So many aspects of the UX and UI came to life once we got into the nitty gritty. If you hadn’t noticed we had taken away the filters in the wireframe round. Once we started prototyping we realized these filters, while unnecessary, are very helpful. So, we added them back in.

 
 

 Filter Options

 

Tooltips. How do we make sure that dots aren’t covered when the tooltip appears? Can we showcase photography with the tooltip? How much information needs to be in the tooltip? How do we connect the dot we just hovered on to the tooltip that appears? There are many important questions for such a tiny piece of the puzzle.

 
 

Tooltip Options

 

Color. Oy with the poodles already!* Out of the entire project I have to say this was the most controversial. Staying on brand, while being accessible, while the stakeholder is requesting for something wow worthy. When I say we spent hours on this I’m not exaggerating. I fought hard for accessibility and branding and keeping it from becoming too over welcoming.

*Gilmore Girls. Yes? No? Well, I’m a fan.

In order to help the stakeholders understand how we should not have a rainbow on the map ... I made a rainbow map.

I won! We ended up adjusting the branded color palette a tad in order to make the colors more accessible.

 

 

Let’s take a look at mobile now. This is a lot of information to get onto a screen that fits in your hand.

 

Look at all these options. And this isn’t everything. We went through version after version.

 

 

Allow the title to stack so we have room for the UI in the upper right. Traditional swipe up for the list. Would like to note that I created that little filter. I really like him.

Hamburger UI leads to the menu. User can navigate to the methodology page, the CPA page, or click on The Council’s logo to get to the homepage.

Filters. The user can search for keywords and it will automatically start to filter the conflicts the utilize that keyword on the back end.

First tap on a dot and the tooltip eases in from the bottom.

List swipe up. To make it a shorter scroll we’ve changed to horizontal scrolling within each region. This also allows us to create a card where the user is drawn in by the visual and can get a few details in order to decide whether or not to click through.

 
 
Final

While this was a challenging project I am super proud of it. I was the only designer from beginning to end.

 

 

 
 

You might be asking - how are we going to measure whether or not this was a success?

  • Improved bounce rate

  • Increase in number of sessions w/ clicks

  • Increase in pages/session

  • Decrease in exit rates

  • Increase in click-through-rate to other products

  • Improved feedback from users about usability and content.

 
Team

Senior UX | UI Designer: Victoria Brooks
Deputy Director, Product: Maria Teresa Alzuru