As National Beef continued to adopt digital media as a marketing tool, they outgrew the SharePoint CMS their website was initially built upon. The introduction of more complex digital branding and the need for a modern aesthetic mixed with a friendlier responsive design was imperative for their continued brand success. It also called for better usability and pushed for an investment to switch from SharePoint to SiteCore as their backend CMS. This critical change allowed my team and I to evaluate potential UX and UI pain points and make recommendations based on our observations.
National Beef Replatform
The decision was made and SiteCore was chosen as the new CMS. My team was tasked with refreshing the overall digital corporate branding based on the new branding updates. The challenge was that the client wanted to have as close to a direct transfer as possible to stay on budget. Any UX issue we identified had to be presented to the client and approved as well as any design updates. The only exceptions to this rule were the header, footer, and homepage design, as they were a part of the original scope.
In order to attack the challenge head on, we had to look at multiple areas of their website such as UX Design and Strategy, UI Design and Branding, and the creation and functionality of the components that will be the building blocks of the new website.
We were able to give the National Beef website a more modern aesthetic, maintain a streamlined backend that offered flexibility and simplify the user experience while maintaining the corporate and unique program branding.
Strategy (UX Improvements) and Wireframes
We removed the modal functionality and replaced it with child pages and a sub-navigation. We were able to reduce the marketing objectives on the homepage, essentially simplify it.
Our audit identified some minor UX improvements and a couple of major ones, one of which was the use of modals for additional content instead of child pages with a sub-navigation. The implementation of this helped solve a few issues:
- On marketing emails or banner ads we could now link directly to that content
- The user had an easier time understanding the content they were clicking to view
- We reduced the number of clicks the user had to make to reach and to leave content
- It allowed us to make more dynamic designs than what was possible with a popup page
We were also able to cross-link easier as well as optimize the information on the page as the modal design caused many overlaps in information.
After getting approval of our recommendations, we set forth with a streamlined sitemap as well as began the process of wireframing the pages. This wireframing process allowed us to streamline the number of components being utilized on the site. We were able to adjust similar layouts that may have minor differences into one component.
Once we wireframed the entire site, I created a component guide and a digital branding guide for the development team, so they could develop the base CSS.
New Designs and Adjustments
The entire website would have a base CSS, but there was the issue of programs that had unique branding that differed from the main corporate branding. To solve this, we created themes that would load specific branded CSS that would overwrite the main CSS. Although these brands have unique branding, we also wanted to make sure that they would still fit within the feel of the main website, so we developed universal rules of what was allowed to be changed with a new branding vs. what would still align with the main branding. Some of those rules are:
- Headlines can have unique fonts and sizes, but paragraph text would remain consistent throughout the website
- Although the header imagery would reflect the branding, the fonts would remain
consistent throughout the website
- Except for particular circumstances the top and bottom padding for each component would stay the same throughout the website
Although the theming took care of many issues, we still needed to determine the functionality of components as we wanted to keep the number of components created streamlined and prevent myopic design. The functionality could be as simple as a boolean value of show / don’t show or could be more complicated like embedded img vs. background image with multiple sizing for mobile breakpoints. While working with the development team and the wireframes, we evaluated each page to determine the necessary functionality and compromises that would prevent us from having to make two similar components.
One unique solution was to create what we called the marriage component. This component allowed us to combine two components that would act as a single component. We could still achieve the desired design while still maintaining a streamlined component catalog.