Get Social With Us
 

National Beef Digital Branding

Roles

  • Lead User Experience (UX) Designer
  • User Interface (UI) Designer
  • Art Direction

Deliverables (Varies per Project)

  • Low-Fidelity Wireframes
  • High-Fidelity Wireframes
  • Theme Branding
  • UX Architecture
  • UI Kit
  • Art Direction

Duration: Varies
Tools: Figma, Photoshop, Illustrator

Background
National Beef has several Value Added Brands, each with its own unique branding. I have designed and built all of the current brand pages on the corporate National Beef website, which function as information hubs for customers as well as selling tools for the internal sales teams.

Problem
Value Added Brand pages need to be visually appealing and representative of the brand’s identity, while adhering to the established design system to ensure consistency across the entire corporate website.

Goal
To utilize the established design system to create pages for the Value Added Brands that represent their branding while providing a simple and effective user experience.

Personas / User Journey

The Value Added Brand pages provide information for three of the main six National Beef personas.

  • Sellers: National Beef employees who use these pages as sales tools or direct customers to them.
  • Customers: Established customers of National Beef and of the program.
  • Prospects: New customers or established customers from another program.

These personas will generally only arrive at these pages through navigation or because they were directed to them from the sales team or from an ad or email campaign.

Sitemap / UX

These pages are microsites that fall under the main corporate website. To provide a positive user experience, we work with the client to establish and understand key talking points to ensure these pages provide value to the user.

Visual Design

The brands have an established branding that must be applied within the prevailing design system. The design system allows us to establish branding with the following elements:

  • Headline Fonts
  • Imagery
  • Call-to-Action Colors
  • Background Colors
  • Navigation Colors

By changing these elements, we can establish the digital design language of these brands while adhering to the global rules of the corporate website.

By utilizing the components in my toolbox as well as the flexibility, I am able to deliver each brand's messaging in the most efficient and best way possible.

Wireframing

Upon alignment with the client about key talking points, I will ideate with my team, then I will sketch / create low-fidelity wireframes to establish the informational hierarchy. Once approved, the next step is to create the high-fidelity mock-ups.

Low-fidelity wireframe for the Grass-Fed Organic page.

High-fidelity mockup

With Goodness Grazecious being a new grass-fed organic program, its branding is playful and unconventional. This allowed me to have a great time bringing the program to life. I incorporated typography with slight angles and flourishes on the headlines, and the illustrated imagery of the brand complemented this typographic treatment.

View Page

Production

Upon design approval, I will create a style guide for the development team, this guide will include:

  • CSS Rules (such as hex-codes)
  • Fonts / Font-Sizes
  • Needed Assets (such as font files)
  • Directions for Any Major Alterations
  • Any Functionality Updates

The final files will be delivered to the development team along with the style guide. Upon completion, I will QA the pages and work with the development team to make any necessary adjustments.

View Production Spec Guide

These pages are great because they challenge me differently with each brand's unique messaging and branding while forcing me to push the boundaries of the design system without breaking it.

Click on Image to View Full Design

Hyplains was created to appeal to high-end food service providers looking for a higher-quality beef. The branding needed to reflect this exclusivity, the use of script fonts with flourishes and gold accents, helped the brand to stand out from the competition. The imagery complements the branding, with subtle black and white background imagery that allows the colorful videos to pop and the white marble that allows the red beef to be spotlighted.

View Page

Click on Image to View Full Design

Variety meats are the less appealing parts of a steer, such as tripe, tongue, and liver. Because most people may not find these items appealing, the branding needed to make them look attractive. Since these cuts are being used to make unique dishes in many high-end restaurants, I wanted to highlight the appeal of these dishes with photography while complementing them with subtle textures and typography as a design element.

View Page

Summary

Each Value Added Brand page features a unique design that represents the brand while adhering to the established design system. The client is satisfied with these pages, particularly in their ability to promote and sell products. As we evaluate user feedback and data related to these pages, we have made adjustments to enhance the overall user experience (UX) and will continue to do so.