Case Study:

RAFI-USA

UX / UI Updates for Existing Website

Final design for RAFI's Event Detail page

Overview

My Role

UX / UI Designer

Responsibilities

User mapping, information architecture, brand development, visual design, developer handoff

Timeline

February-May 2022

Tools

Figma, Concepts, card sorting

Brief

  • Make recommendations for a limited-scope UX refresh
  • Create design patterns for high-impact components
  • Redesign home page
  • Design event detail page

Background

RAFI-USA is a non-profit organization that fights for equity and justice for small farms. They provide financial, technical, and community support for individual farmers and advocate for them at the local, state, and federal government levels.  Their primary service is on-the-ground assistance for individual farmers, which informs better policies and programming that contribute to farm viability.

Their previous website used an off-the-shelf Wordpress template that had never been fully customized for the needs of RAFI or their audience. The organization was growing and wanted a website that showcased their programs better, that was designed intentionally, and that was easier for users to navigate.

CONsiderations

  • Small budget. There was no money for usability research or a full website branding and redesign process.
  • The organization had never gone through a full branding process. They were keeping their logo, but were flexible on color and font choices.
  • Their website serves a wide range of users, including local farmers, faith organization leaders, and government policymakers.
  • RAFI was planning to make improvements to their existing Wordpress template, not change to a new template.

Results

I built user journey maps, reorganized the site’s information architecture, expanded the brand’s visual identity, and designed flexible components that would make RAFI’s website more user-friendly.

See the website at www.rafiusa.org.

Discover + Define

Core Problem

RAFI wanted their website to build trust with users, and to make it easier for users to find the information they want.

The Users

With user data provided by the client and additional info gleaned from analytics, 
6 key user groups were defined, including farmers, donors, and faith organization leaders.

Analysis of Old Design

  • As a new visitor to the site, it is not immediately clear what RAFI does or what its goals are.
  • The mega menu is difficult to navigate. Some submenus are hidden under others and are difficult to click on, especially at smaller screen sizes.
  • For a busy farmer, the site could feel overwhelming and confusing. There are a lot of support programs available, but it would take time to figure out eligibility guidelines and next steps.
  • Some pages have confusing titles; for example, the page titled ‘Take Action’ seems to be a list of blog posts but has no call to action.
  • There are very few calls to action overall, and button styles are inconsistent.
Screenshots from old website (click to enlarge)
RAFI's previous home page design.
Thumbnail of RAFI home page design
Thumbnail of RAFI old page design
Thumbnail of RAFI old page design
Thumbnail of RAFI old page design

My Recommendations

  • Reorganize the information architecture and main navigation bar for clarity and simplicity.
  • Make all pages easier to scan. Clarify the heirarchy of information, make page layouts more consistent, and make calls to action clear.
  • Design a component that is a prominent call to action for farmers who are in crisis or almost in crisis. These users, in particular, need reassurance and support as quickly as possible. In RAFI’s experience, most farmers are extremely busy and under a lot of stress. We can create a short form that they fill out to request a call back from RAFI staff who can talk them through relevant support options.

Develop

1.

Redesign information architecture and main navigation bar.

I started by building audience journey maps for key user groups. These showed the journeys I hoped to achieve, resulting in clearer navigation and fewer clicks for the user to get to the desired information.
User Journey Maps
(click to enlarge)
RAFI User Journey Map for farmers.
RAFI User Journey Map for farmers of color.
RAFI User Journey Map for donors.
RAFI User Journey Map for movement participants.
RAFI User Journey Map for faith leaders.
RAFI User Journey Map for coalition activists.
RAFI User Journey Map for farmers.RAFI User Journey Map for farmers of color.RAFI User Journey Map for donors.RAFI User Journey Map for movement participants.RAFI User Journey Map for faith leaders.RAFI User Journey Map for coalition activists.
With these user journeys in mind, I used card sorting to map out the main navigation. While there are a wide range of user goals on this site, I realized that they boiled down to 2 main groups: farmers who needed support, and allies who could provide that support. I used this insight to simplify the main navigation bar, and help users get to the right information faster.
Main nav wraps on smaller desktop screens
Mega menu items
 were cut off on
 smaller screens
RAFI's previous main navigation design.
In one round of feedback, the client requested a sentence of explanation under each tab of the mega menu.
Final approved design with a simplified main navigation
RAFI's new mega menu design

2.

Make pages easier to scan, with clear hierarchies and calls to action.
‍
Because RAFI didn’t have a fully developed visual brand identity, I built a sheet of type styles and expanded their color palette. After a round of client feedback, I discovered that they wanted to be able to use more and brighter colors that I had in the first draft, so I expanded the color palette further.
Updated colors and type
RAFI's branding colors for new site design.RAFI's text style examples for new site design.
With these in hand, I began designing general page layout styles, including elements like an optional sidebar menu. I also redesigned the home page layout and created an event detail page.  As I was not redesigning all of the site’s pages, any of the general style changes I made had to work across the existing site template.

3.

Design patterns for high-impact components, including a call to action for farmers in crisis.
‍
I iterated on RAFI’s existing pattern for a component that was used to highlight programs and documents on their previous site. I also created a smaller version of this component that could be used in a sidebar on any page as a CTA for farmers in crisis, so that RAFI’s crisis hotline number could be featured prominently on any page.

This component can also be used for directing farmers to a short form that would request a callback from RAFI staff. This form is planned for a future release, when RAFI has the staffing capacity to implement it.
CTA Components Samples
Samples of components

Deliver

Handoff to development

Once the designs were approved, I reviewed my Figma file again to make sure everything was consistent and fully documented for the developer.
Approved final designs
(click to enlarge)
Thumbnail of RAFI page design with no hero image and a sidebar navigationThumbnail of RAFI page design with hero image and no sidebar navigationThumbnail of RAFI page design for upcoming event detailThumbnail of RAFI page design for past event detailThumbnail of RAFI home page design

Learning

What did I learn?

  • Lots of communication, early and often, with the developer was really valuable. I needed to understand on a technical level how I could improve and expand the site design within the constraints of the existing Wordpress template.

How does this design make people's lives better?

  • It is easier for farmers to find the support they need.
  • The site is more accessible, as text is no longer hard-coded into images and the menu is more navigable.
  • It is faster for the RAFI staff to make changes to the site content.

Send me a message

Thank you! Your message has been received.
Oops! Something went wrong while submitting the form.

Marni Keenan

UX/UI and Visual Designer
Selected Projects
Oyatsupan Bakers
RAFI-USA
Plover Patrol