Interaction Design

Shaping Food Policy

international food policy research institute
Downtown Lincoln Website

Background

The International Food Policy Research Institute is a non-profit organization dedicated to providing research-backed policy solutions aimed at reducing worldwide poverty and hunger. As the lead designer, I collaborated with a project manager and a team of developers to optimize the user experience and interface while working within strict technical constraints in a Drupal environment.

Challenges

  • Upon project commencement, there was little to no user feedback or metrics, so calculated iterations became crucial.
  • The analytics that were available indicated very high bounce rates due to the lack of clear calls to action and general disorganization of information.
  • There was little time or budget to onboard users to an entirely new experience, so we needed to work within the existing technical framework in providing a more optimized experience.
  • The majority of content was organized within a robust, yet unintuitive, search experience.
  • As a research organization, a lot of the content was quite verbose and in need of distilling by a skilled wordsmith.

Process

We began the iterative process by making small updates to the site's interface. This allowed us to take small, measurable steps in uncovering the more significant underlying problems with the user experience.

Old IFPRI Interface
Updated IFPRI Interface
Old IFPRI interface and updated IFPRI interface

The old site implemented a dizzying array of type treatments and color application with no systematic approach. Calls to action were unclear and confusing. I began by paring down and streamlining these styles by creating a pattern library of all elements and their different states. An ever-evolving system of design treatments would provide the content-heavy site with the structure it desperately needed. I determined the most commonly-used elements and grouped them into a component library to maintain interactive cohesion.

There were countless instances of all-caps, condensed type which diminished the users' ability to skim the site. I replaced those treatments with a modern, type-cased Roboto and Open Sans.

Old header
Updated header
Old header vs. updated header, reflecting streamlined styles and updated information architecture
Updated styles
A sample from the pattern library

Color use on the old site was also inconsistent. Aside from implementing one too many colors, users found it difficult to distinguish between actionable, linked items and plain text. I assigned green underlined text as the inline link style, while using blue for linked titles. Yellow was used sparsely as an active state for form elements and tabbed buttons.

The most widely-used and frequently misunderstood functions on the site was the content search. IFPRI's research is the heart and soul of the organization, so we spent a good deal of time optimizing it for a wide range of users. The first issues I noticed with the search function (aside from the type and color issues mentioned above) included redundant and vague text, confusing filtering capabilities, and a lack of orderliness within the search listings. I approached the latter of those three issues by recommending the archiving of outdated irrelevant content within the listings and organizing content either by relevance or date. I worked closely with a back-end developer to clarify content tagging and filtering capabilities.

IFPRI's research content spans countless topics, geographical locations, and disciplines. Therefore, the filtering function required a great deal of attention. I reorganized the filters into an accordion-style layout and updated the visual indicators for selected and deselected states with greater contrast. Selected filters are moved to the top of the accordion section for easy access and to reduce scrolling. I also added filter buttons to the top of a search query as an added benefit for the user, helping them easily keep track of the filters they had selected.

Filters applied to a search query
Filters applied to a search query
Updated styles
Additive Filter: 1) Accordion menu closed state; 2) Selected accordion menu item; 3) Submenu item hover state; 4) Selected submenu item moves to the top of the list to distinguish it further from the unselected items; 5) Additional submenu item selection
Updated styles
Reductive Filter: 1) Accordion menu closed state; 2) Selected accordion menu item; 3) Selected submenu item; 4) Selected secondary submenu item

Research content is organized by both additive and reductive filtering, so I designed states and user flows for both.

  • Additive filtering allows users to apply multiple, cumulative filters to a search query.
  • Reductive filtering allows users to switch between different filters, only applying one at a time.
Mobile filters - Closed
Mobile filters - Open
Mobile filters:1) Open; 2) Closed

Once we finished optimizing the existing search function, I mapped the high-traffic portions of the site to gain a better understanding of current user flows while researching and devising possible improvements. I worked with stakeholders to make improvements to the information architecture.

Old IFPRI About page
Updated About page
Previous About Page vs. Updated About Page

While optimizing the website's crucial functionality, I realized there was no engaging introduction to the organization. The "About" landing page was dry and verbose, while research content lacked a landing page entirely. We made it easier for users to access the information they needed, but how enjoyable was the experience? I worked closely with a copywriter to devise a landing page for both sections of the site to give users (especially large donors) a friendly and passionate introduction to the incredible work performed by IFPRI's researchers.

Old IFPRI Research page
Updated Research page
The Research navigation link directed users to a collection of topics that provided no context. The new design provided terminology definitions and detailed explanations of research types performed at IFPRI.

Results

This website is still in development, but presenting each iteration to IFPRI's users resulted in positive reactions to the improved experience and helpful feedback that will ensure a more usable product for the wider audience.