Responsive Design: United States Department of Agriculture
Building a meaningful user interface from a clear and deliberate brand voice for a government agency website
TIMELINE
5 weeks
ROLE
Developed a brand style guide and applied UI elements to responsive mock-ups.
DELIVERABLES
DELIVERABLES
UI style guide, brand voice, information architecture/site map, sketches & wireframes, responsive high-fidelity mock-ups
TOOLS
TOOLS
Adobe XD, InVision
The United States Department of Agriculture provides leadership on food, agriculture, and natural resources.
Preface
WHAT IS THE USDA?
The United States Department of Agriculture (USDA) is a government agency whose mission is to provide leadership on food, agriculture, natural resources, and related issues based on public policy, the best available science, and effective management.
Research: Assessing the Current Website
WEBSITE BRAND AUDIT & CARD SORTING
With the help of 2 other designers, 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.
Research: Examined the website to assess the current brand & information architecture.
Analysis: A brand audit and card sorting helped map the current state and potential opportunities.
ASSESSMENT
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.
Rebrand: Defining New Structural & Visual Rules
MY APPROACH
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
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.
Site Map: A strong information architecture can help orient users on the USDA's website.
NEW BRAND VOICE CHARACTERISTICS
I defined 5 adjectives that would strategically influence the style, perspective, and personality of the new brand identity through structure, syntax, and UI elements.
Brand Voice: Shifting the brand identity to become more friendly, engaging, and visually stimulating.
Redesign Solution: Stylizing UI Elements
LOGO
The primary USDA logo is made up of two components: the USDA field graphic and the name of the department.
COLOR PALETTE
Color is used to frame the content in a way that feels personable and engaging to the user.
TYPOGRAPHY
Futura, Brandon Grotesque, and Gill Sans create an educational experience that is tidy and suitable for all readers.
BUTTONS
Use Futura in Primary Buttons and Brandon Grotesque Bold in Secondary Buttons.
ADDITIONAL UI Elements
ICONOGRAPHY
Simple icons are used to represent navigational functions, social media access, and blog content.
PHOTOGRAPHY
Images are engaging, natural, realistic, and offer users a "slice of life."
Responsive: Building the Design Across Multiple Breakpoints
USER FLOW
The design considers a simple user flow from the Home page to the Blog for a farmer who wants to read published articles.
LOW FIDELITY PROTOTYPING
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.
Low Fidelity Prototypes: Strongly considered 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).
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.
User Testing: Feedback yielded minor changes to the structure of the navigation menu.
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.
