Responsive Web Design: U.S. Department of Agriculture

OVERVIEW

The United States Department of Agriculture (USDA) develops and executes federal laws related to farming, forestry, and food. The website is updated with news and publications on related topics.

DESIGN GOAL

Build a purposeful user interface from a clear and deliberate brand voice.

TIMELINE
5 weeks
ROLE
Developed a brand style guide and applied UI elements to responsive mock-ups.
DELIVERABLES
UI style guide, brand voice, information architecture/site map, sketches & wireframes, responsive high-fidelity mock-ups
TOOLS
Adobe XD, InVision

Research: Assessing the Current Website

With the help of 2 UX design students, a website brand audit was conducted to assess the current brand direction. A card sorting activity was also used to take an inventory of the navigation items. The goal was to become familiar with the website’s current structure and brand identity.

ASSESSMENT: WEBSITE IS ONE-DIMENSIONAL & INFORMATION-HEAVY

Long blocks of text, generic images, and a cluttered footer made the current brand seem informative, regulated, and slightly disorienting. The USDA's brand lacked a personality that would make the government agency seem more approachable.

Proto-Persona
Research: Examined the website to assess the current brand & information architecture.
Proto-Persona
Analysis: A brand audit and card sorting helped map the current state and potential opportunities.

Rebrand: Defining New Structural & Visual Rules

MY APPROACH: CREATE MORE FULL-BODIED, WHOLESOME EXPERIENCE

The USDA’s website was cluttered with duplicate navigation items, while the overall experience felt flat and one-dimensional. To solve this, I planned to reorganize the site map and also develop a new brand voice with the goal of making the visual design more friendly, intimate, and visually stimulating.

NEW SITE MAP: GROUPING LIKE ITEMS TOGETHER MADE A BIG DIFFERENCE

I referenced results from the card sorting activity to identify content patterns, group like items together, and label new categories. By removing duplicate navigation items and creating tertiary navigation, I was able to build a site map that was more structured and comprehensive.

Proto-Persona
Site Map:A strong information architecture can help orient users on the USDA's website.
NEW BRAND VOICE: DEVELOPING AN ENGAGING PERSONALITY

I defined 5 adjectives that would strategically influence the style, perspective, and personality of the new brand identity through structure, syntax, and UI elements.

Proto-Persona
Brand Voice: Shifting the brand identity to become more friendly, engaging, and visually stimulating.

Redesign Solution: Stylizing UI Elements

Visual design choices were directly influenced by the new brand voice.
See Full Style Guide 

Responsive: Building the Design Across Multiple Breakpoints

USER FLOW: NAVIGATING FROM THE HOME PAGE TO THE BLOG

The design considers a ​​​​​​​simple user flow from the Home page to the Blog for a farmer who wants to read published articles.

Proto-Persona
LOW FIDELITY PROTOTYPES: FOCUSING ON CONTENT STRUCTURE

The goal of the low-fidelity wireframes was to determine the content structure on each page before applying visual design.

On the home page, I reorganized the sections based on their relevance to the user, Frank.

The blog uses cards to package entries into content chunks thereby increasing user focus and comprehension. Both screens were designed across 3 breakpoints, while maintaining rules of responsive design.

Proto-Persona
Low Fidelity Prototypes: Considering content structure before applying visual design.
USER TESTING SCOPE: MENU NAVIGATION

Using the low-fidelity prototypes, I conducted in-person usability tests with 4 participants and received general feedback about the size of the content (too large) and use of affordances (needed more).

MINOR CHANGES IMPLEMENTED

A/B testing of the navigation menu’s position and alignment yielded minimal user feedback because their differences were very subtle. Tests occurred in 3 rounds with minor changes implemented after each round.

Proto-Persona
User Testing: Feedback yielded minor changes to the structure of the navigation menu.

InVision Prototypes

Reflection

Keeping a consistent brand identity. It was a challenge to unify the content, structure, and UI elements under one brand vision. The key was to solidify the brand words in the beginning and use those words to influence every design decision.

Communicating information effectively. The content structure can make or break a user experience. I experimented with different variations of content chunking to maximize comprehension and enable users to scan the page quickly.

Tackling responsive web design. Knowing that users are becoming increasingly more mobile made this project a valuable exercise in responsive web design. We as user experience designers similarly need to be responsive to the expectation that digital content should be accessible across a growing number of screen sizes, platforms, and orientations.