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