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.
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.
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
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.
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