Centering users in Resource Media’s site architecture

 
 

Project Context

Client Resource Media is a communications agency that specializes in complex social justice issues. They partner with nonprofits and community organizations to inspire action through storytelling campaigns.

Duration Sept. - Dec. 2020

Role UX Research, UX Writing, Information Architecture, and Usability Testing

 
 
 

TL:DR

Resource Media wants to develop partnerships in new sectors. Over the past few years, their business has evolved but their website didn’t keep pace. The outdate site is now hindering their ability to attract new clients. For a 10-week capstone project I worked with a partner to restructure Resource Media’s website into a cohesive experience. We showed through usability testing that simplifying the site structure and page design improved content visibility.

 

Problem Definition

Poor Information Architecture

Resource Media’s site became convoluted as siloed project teams added content without working within an organizational vision. The ad hoc design overwhelms users with info, keeping them from discovering Resource Media’s deep suite of services and expertise.

Discovery

 

Interviews: understanding user motivations

To get in the headspace of target clients, I conducted interviews with individuals who fit Resource Media’s user archetype. These were professionals who worked in social justice and had interest in hiring a communications agency. The interviews revealed that users often visit an agency’s site with specific criteria in mind. They’re short on time and visuals play an outsized role in assessing the agency’s fit.

 

Mapping: visualizing structural issues

I mapped out the existing information architecture to align my team’s understanding of structural inconsistencies. We used the map to discuss how content was scattered across the site and spotlight issues.

 

Card Sort: observing user mental models

Facilitating an open card sort allowed me to observe how users organically grouped content. Once participants had created and labeled their groupings, I asked them follow up questions to probe their thought process. It was insightful to hear which cards participants found challenging to group. Several mentioned they struggled with fitting the funders and donate cards. Hearing this and learning from stakeholders that donations are not a primary goal helped me reprioritize content for the main nav.

 

Competitive Analysis: exploring the problem space

To understand how Resource Media stacks up against competitor agencies I conducted a round of competitive analysis. It was striking how features such as a flat navigation and strong visual hierarchy made the competitor sites significantly easier and more enjoyable to browse. Across the board, the competitor sites offered more “snackable” content with bold visuals.

 
 

Insights

 

Poor Organization

Content was hidden in the footer or deep within the site. New users often shop for an agency with pre-determined criteria. They don’t have time to dig for details as they’re comparing agency sites.

Confusing Navigation

The main navigation did little to orient new users. Labels were unclear, lacked consistency, featured inessential categories, and was missing key content.

Text-Heavy Content

Users had to read three pages of text to understand Resource Media’s services. By comparison, competitor sites offer more “snackable” content with bold visuals.

 

Design Exploration

 

Guiding Principles

The site had to be simple to help users find relevant content quickly. I prioritized redesigning the site structure and creating clean page designs to have the biggest usability impact. My design was guided by four principles: simple site structure, scannable pages, more visuals per page, and incremental storytelling.

 

Simplifying the Structure

 

One of the site’s biggest design challenges was unifying content into a cohesive scheme. The site was a labyrinth of one-off pages. To reorganize the content, I started by sketching a concept map based around themes identified during the card sort.

 
 
 
 

I paired down the global navigation to categories that served top user needs.

It was a business requirement to maintain a presence for the three standalone projects - Visual Story Lab, Outside Voices Podcast and Energy Media. These projects originally had their own section on the main navigation, but the indistinct “Projects” label and placement was confusing to users. It wasn’t clear how these projects differed from the other case studies. I moved the projects under a new biographical section entitled “Our Story” to declutter the navigation and add context.

 
 
 
 

Creating Scannable Pages

Another essential part of making the site approachable was reducing the amount of text. While it was beyond our original scope, I knew pairing down the text was critical for creating a visual hierarchy.

As my partner worked on wireframing pages, I rewrote the service offerings, consolidating three pages of info into one. In the process I removed duplicates and reframed the services to match user mental models.

 
 
 
 

Incorporating Visuals & Incremental Storytelling

Users didn’t have an easy way to understand which issues Resource Media has experience in. The homepage highlighted a few topic areas, but it was limited. In fact, there wasn’t a full list anywhere on the site.

To create that full list, I aggregated tags used on the blog and in Resource Media’s annual report. I then segmented the list into three categories: social justice & equity, environment & sustainability, and health. This list became an adaptable display that gave users a quick visual overview of Resource Media's experience.

 
 

Outcome

 
 
 

“It’s very simple and easy to find out more compared to other sites where there’s a lot of stuff and it’s not clear.”

Participant Three

 
 

Usability Tests Proved That Less Is More

To validate whether users could easily find content within our new site design, I wrote a research plan for usability testing. I wanted to see how well users understood the new navigation and whether they could locate core content. Using a low fidelity prototype, I conducted tests remotely with 4 participants. The tests affirmed my information architecture design was intuitive for first time visitors.

 
 
 
 
 

My Impactful Presentation

 

“This makes so much more sense than what we have currently. ”

Cristina Friday, Resource Media Development Director

Our team gave a strong presentation to the client. I walked them through my process and the research insights, helping them understand the impact simplifying the information architecture would have for their target user. I emphasized how the more focused site structure can scale as their business evolves and minimizes the cognitive burden for their time-strapped users.

The feedback I received was overwhelmingly positive. The client shared that they appreciated how well I connected the design solutions to the research. They felt they could use my artifacts to start a productive discussion with their peers on reworking their site.

 
 

Next