Get Social With Us
 

National Beef – Consumer Websites

Roles

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

Deliverables

  • Low-Fidelity Wireframes
  • Theme Branding
  • Module Specification Guide
  • Module Maps

Duration: Variable
Tools: Figma, Photoshop, WordPress

Background
National Beef is strictly a B2B company, but they do have B2C brands that are sold to customers without an in-house brand. In order to help sell these brands, National Beef has consumer websites it uses as a value add sell-in, these websites not only contain information about the brand, but also have web apps that provide a grilling timer, recipes, and a beef cuts guide. Unfortunately, because these websites and apps are mainly value adds, National Beef does not want to invest a lot of money into them.

Problem
The consumer websites were built on the Umbraco CMS and were not very user friendly nor responsive, and the apps were only accessible on one site and functioned as a pop-up. These websites needed to be updated in a more modern CMS that allows flexibility and expansion while providing a better user experience (UX).

Goal
Our objective was to assess and update these consumer websites and applications while adhering to budgetary restrictions. We needed to create a design system that would allow us to replicate each website and easily rebrand it to match each product’s branding, as well as the flexibility to alter pages to present content in the most user-friendly manner possible.

Persona / User Journey

Due to the nature of these sites as well as the budget constraints, we did not develop personas or user journeys.

Creating a flexible design system that can easily be adapted to different brands while keeping within a limited budget provided a challenge. With a minimal effort, we can easily clone the design system and adapt it to any National Beef brand.

Visual Design

Each brand needed to present its branding through colors, fonts, copy, and imagery. We needed to create components that could universally be used to display information in the best way possible. For the apps, I was able to make minor UI and UX changes.

Wireframing / UX

The objective of our low-fidelity wireframes was to create components that could universally display information in the most user-friendly manner across all brands. The high-fidelity mockups were used across brands to showcase the branding of these components. Although I attempted to improve the overall user experience (UX) of the apps, the functionality of these apps was either dictated by the old functionality (Grill Timer) or the functionality of the Beef Council API (Recipe and Beef Cuts), and due to our limited budget, we were only able to make minor changes to the front-end.

View Wireframe Deck

Production

I worked with the development team to ensure both the consumer websites and apps matched the designs and functionality.

Summary

These websites are very unique in that the goal is to provide value to customers with a limited budget as the ROI is just not there currently. While I would like to create personas and user journeys to help provide a better overall user experience, it is not currently a worthwhile investment for the client. I also believe there is an opportunity to rebuild the apps from the ground up to provide better overall functionality and usability, but unfortunately, like the websites, it is not worth the investment for the client.