Resource Media
A rapidly expanding nonprofit organization deeply committed to equity.

My Role

Visual Design
Research
Wireframes
Prototypes
Writing
Client Liaison

Team

Trina Packard
Hilary Liniard

Timeline

Ten Weeks

The website is convoluted and no longer supports Resource Media’s developing purpose.

Within the past eight years, Resource Media’s social justice issue areas have expanded rapidly while the website trailed behind.
RM’s goal is to attract new business while maintaining current clients to develop long-term partnerships.
They want to know how they can ensure new users quickly understand who they are, what services they offer, and easily find their resources and internal projects.

We are so focused on our work that we rarely find the time to update our site, and it’s turned into this sort of Frankenstein thing.
From Stakeholder Interviews

IA Structure BEfore

Target Users & Team Roles

Clarification for users and flexibility for stakeholders

 

The target user works for a nonprofit that has limited resources, especially for creative and digital services. The employee’s boss is willing to hire an outside communications firm so she is searching for something like Resource Media.

Furthermore, employees and stakeholders at RM need a flexible site architecture so they can make updates without breaking the site.

A team of two developing an approach to meet one goal

 

For ten weeks, I worked with one partner. I led the design, prototyping, internal research, visual design, UX writing, and worked as the team liaison.

My partner’s role consisted of user research, IA, navigation structure, UX writing and user testing.

Approach and Discovery

I began my process with a comparative analysis and heuristic evaluation

 

Due to the short timeline, my partner and I strategized how we would iterate on only high-level pain points to make the most impactful usability improvements. We were dealing with a massive amount of information and endless opportunities to improve user experiences.

I observed design patterns, writing styles, and visual design while my partner analyzed information architecture and navigation structures.

I observed what WAS working on other sites based on usability standards

 

On the competitor sites, the hero images were large, and the language was concise. The content contained more graphics, less text, and was more scannable and organized than RM’s site.

My partner expressed having a more effortless user journey with a shallow nav model and less jargon.

More Graphics

Intuitive Nav

Clear Language

I gained more clarity and could recognize major pain points

 

RM’s site violates some standard usability heuristics, such as UI inconsistencies, a jargon style language, large blocks of text that could trigger cognitive overwhelm, and a deep and wide IA structure, resulting in a confusing sitemap with unintuitive nav labeling.

Validating assumptions with Research

Stakeholder Interviews

To validate my assumptions about user pain points and dive deeper into the business needs, I recruited five stakeholders for 1:1 interviews while my partner recruited potential Resource Media clients from nonprofits. We used our data to consolidate our main focus areas.

My data synthesis process
I did a card sort to narrow my research data down to five themes, four insights and eleven design recommendations. My four research insights were the pillars through this project.

5 Themes

~

4 Insights

U

11 Design Recommendations

Stakeholder Research Insights

Highlight

Scale

Navigation

Reorganize

Ideation, sketching and planning

New IA informed my wireframes

 

My partners IA diagram.

My wireframes guided UX writing, nav labeling and content hierarchy

 

I begin sketching rough wireframes on paper while keeping user needs at the heart of my thinking.

I also roughed out UX writing ideas to show RM’s unique value upfront and to create navigation object distinction.

Boiling content down to the essence of it’s purpose

 

RM’s services and case studies needed to be consolidated because users expressed not wanting to read long lists and large text blocks.
I iterated on several design solutions for the home page sections with mid-fi wireframes. My goal was to show users hi-level snippets of RM’s services and case study subject areas.

Interaction Design Ideation

Interaction design iterations

 

I sketched out solutions like, expandable section and rotating CTA’s to show pertinent information to first time visitors who need to quickly scan for what they may need to make a decision about working with RM or not. However, my iterations didn’t account for company side expansion and users need for simplicty.

I don’t want RM to lose potential clients because they missed key information

 

I didn’t want potential users to miss anything that would pique their interest, but I also wanted to avoid page clutter and cognitive overwhelm. The solutions was to create three large buckets for services to live inside while writing intuitive nav labels to create section differentiation. My stakeholder interviews revealed little differentiation between nav labels on the current site, so labeling had to be well thought out.
Services Section buckets

Digital and Creative | Multicultural | Campaigns

Case Studies Section buckets

Environment and sustainability | Social Justice | Equity | Health

Home page Hero Section Redesign

 

The new hero section highlights what RM does with a clear message that is easy for the target users to understand.

My solution also provides the flexibility stakeholders need to make frequent updates and stay relevant while scaling the organization.

The main goal is to help users understand Resource media within seconds to increase conversion rates.

Services section on the home page

 

I created three large graphics to introduce the services buckets with one large CTA button guiding users to the services overview page.

We decided to move this section to the top right under the hero section of the home page based on our research insights from both the business and user side.

Case study section on the home page

Users want to see RM’s social impact up front before deciding to hire them. My challenge was how to show the categories within the three buckets without cluttering the page.

My solution was to create a pagination component thumbnail snippets of RM’s areas of work so users can take a quick scan before diving into the site.

This component also meets business needs for subject area expansion since more buckets can be added to hold more focus areas.

I designed and wrote labels for the internal page contextual nav structure

My partner designed a shallow nav with single scrolling pages containing content sections in her IA structure. I brought her vision to life with my UI design.

I created a consistent contextual navigation that’s repeated on all scrolling pages so users can quickly navigate to sections they want to see.

I added sub-text on all navigation labels throughout the site to further clarify their meaning to users.

Finalizing the last touches before usability testing

The primary testing goals were to see if users understood right away what RM stands for and the type of services they offer.

We wanted to know if users could easily find service descriptions from the homepage and predict page content from the navigation labels.

Usability Testing Results

Users found the homepage clean and easy to understand.

 All users concluded that RM has a social justice focus and could predict page content with the nav labels.

They also understood that RM has several service offerings, is people-centric, and has work to show that validates their social impact.

All users felt like RM could help them communicate their message better for their nonprofit company.

“ We are so focused on our work that we rarely find the time to update our site and it’s turned into this sort of Frankenstiene thing.”

Based on testing insights, I reworked my prototypes for our final product presentation

 

I incorporating more visuals, designed more icons for visual hierarchy, rewrote confusing labels, and fixed interaction pain points to prepare for our final stakeholder presentation.

Resource Media was Impressed

Users found the homepage clean and easy to understand.

 Resource Media was impressed with how much we accomplished in a short period of time. They have begun implementing our design recommendations to their site.

What’s Next?

Based upon initial success and feedback, I’d like to extend the project and conduct another round of user testing and refine the blog section.

Final Deliverables