Advanced user experience: Safe Food Queensland case study

Government websites are a different breed to the commercially oriented content marketing and eCommerce websites we usually work on.Conversion isn’t the order of the day, and instead of a targeted client base, government websites tend to require managing a stable of different stakeholders.Working on a government website involves crafting a user interface that will effectively serve anyone from industry, consumers, other government agencies, academics, researchers, schools, media and interest groups.This makes government websites interesting and a nice challenge.In this case study, we will take a look at how we balanced the demands of these stakeholders to create an effective user interface for Safe Food Queensland, and explain how this can be applied to your own projects.

The client

Safe Foods Queensland(Safe Food) is a statutory authority for the Queensland Government. This means they are technically part of the government in its regulatory capacity, but they are not bound by the same guidelines and structures as a government department, which gave us open water on which to design the new Safe Food website.Safe Food is a part of a complicated regulatory ecosystem where different food and animal products are managed by different government authorities. Specifically, Safe Food regulates the primary production and processing of meat, eggs, dairy, seafood and horticulture in Queensland, Australia.

The problem

Safe Food had a problem with digital: As an organisation, Safe Food needs to provide information promptly to consumers.Regulations in food demand that people know when product recalls have been announced – people’s lives are literally on the line. For example, a product could be found to contain salmonella or could be mislabelled.Despite the importance of the information being presented, the website Safe Food has failed as a communications platform.Some of the key problems resulting in this failure include:Issues updating content - While the internal page content on the website could be updated, critical pages like the homepage could not be updated without engaging with a developer.Not mobile responsive - Given the age of the website, it was not even close to being mobile responsive. This is a particular problem as the regulated industry stakeholders were becoming increasingly mobile-focused. Mobiles were being used more actively as a quick check for product recalls or compliance information.Poor communication - Safe Food as an organisation also suffered from a critical problem - many people did not understand what exactly they did. This is a result of the complex legislative and regulatory ecosystem where multiple organisations are responsible for similar sounding regulations.

The situation

• Unclear definition of the organisation's main purpose.
• Lacked a dynamic communication platform - unable to easily make simple changes.
• Desktop-only website, with a customer base that was becoming increasingly mobile-focused.
• A poorly structured website - difficult to find common information.

The bottom line was that the existing website was used by stakeholders purely to get the Safe Food phone number. This was simply forwarding the customer support burden onto the customer support team.

The challenge

Safe Food needed a website to provide information, and it didn't do this well.The primary use case for all stakeholders was to check information such as legislation requirements, product recalls, accreditations or to pay a bill.The secondary use case was for industry to apply for accreditation.The new website project featured the following challenges:

• Balancing the information requirements and customer journeys from half a dozen different stakeholder groups.
• Design a website that looks credible but avoids the vanilla website structures that are common on heavy content-based websites.

The information architecture and web design were the primary challenges for the project. If the information architecture failed, then the website would fail.

The insight

Strategy 1 – Mapping the stakeholders (simplified example)We focused our efforts on reviewing the stakeholders and their interactions with Safe Food. The simplest means of doing this is mapping:

• What did they need to see?
• What did they need to do?

Industry	Compliance requirements. Gaining accreditation.
Consumers	Product recall information. Reporting a food incident.
Other government agencies	Detail on compliance information. What does Safe Food do?
Academics, researchers, schools	Annual reports. Legislation and regulatory information.
Media	Press releases. Recall information.
Interest Groups	Key contacts.

This loosely mapped out the scope of the information and key actions that needed to be taken.NOTE: When designing commercial sites, the stakeholder make up is almost always simpler and  includes only one or two user groups in most cases.Strategy 2 – Prioritising actions and informationThe major problem with the existing website is that it does a poor job or prioritising and organising the information.  Looking at the example (above) there are over 35 discrete information options presented to the user when they land on the website:

• Navigation links are placed all over the page
• Information to stakeholders is not segmented
• Quick links consist of a bucket of common activities (a "catch-all" solution that is not effective)
• The interface doesn't follow how people navigate, resulting in users scanning multiple times back-and-forth to find what they need.

The website doesn't need to do everything all at once, especially on the home page. We want to simplify! Strategies we can use:

• Group information that is applicable to the same stakeholder group
• Extract out information and actions that have a higher rate of engagement
• Use visuals to emphasise things that are important
• Use navigation structures like mega menus to organise and hide secondary level information

When considering these strategies, we ask ourselves the following questions:

• How often are these activities done?
• How big or important is this stakeholder group?
• What is the familiarity of the companies with Safe Food?

Stakeholder	Frequency / Importance	Notes
Industry	Very common.	Required to be certified and understand the requirements.
Consumers	Medium.	Low understanding of Safe food.
Other government agencies	Moderate-Low.	High understanding of Safe Food.
Academics, researchers, schools	Low.	Low understanding, but will search.
Media	Low.	Relatively simple needs. Knows to look for 'News' or 'Newsroom'
Interest Groups	Low.	Self-interested. Can find their own way.

The findings

Ultimately, we found that the website needed to be primarily oriented towards industry stakeholders who were reliant on Safe Food for certification. The secondary focus would be consumers. While consumers usage of the website was moderate, the information they were looking for was very focused and highly important - specifically in relation to product recalls.

The solution

We starting building the website in WordPress using our modular content management system.Our solution had a number of elements:

• Simplified information dashboard - Action dashboard
• Navigation system segmentation and simplification
• Visualised explanation of Safe Food purpose
• Module system

Action dashboardWe wanted to create a system that would enable a very quick overview of the key activities and information that were important to industry stakeholders.  Within the list of key actions, there is a quick reference to food recalls. Recall notices are easily noticed with the warning icon.In the case that a food recall has been recently announced, a strapline beneath the action dashboard will appear to bring attention to the fact that a new food recall has been announced. Navigation systemThe investigation of the different stakeholders found that the industry and consumers were predominantly the most frequent and important users of the website. But ultimately the full set of stakeholders were seeking to get more information about food safety and advice, and the other group was more related to how regulations impacted their business operations.We split the navigation into two elements.

• Food safety advice
• Food businesses

This hyper simplicity, complemented with a mega menu, allowed for a very easily understood navigation that was able to very quickly segment the stakeholders into a smaller information space, rather than a global menu accommodating all.We move everything else beyond this into a secondary navigation that covered operational and technical details (eg. Publications, annual reports, about, etc). Visualised explanation of Safe FoodOne of the problems identified in exploration was the issue of people not understanding what Safe Food did. So, we created an interactive visual "wheel" which provided an attention-grabbing means of explaining what they do. Each of the key areas in the wheel is interactive and will show more information when hovered, or a full article on that responsibility if clicked.Module systemSafe Food didn't want to get back to being stuck in a situation where they were unable to update their website. As part of our WordPress solution, we integrated a dynamic module system that allows all pages to be built up as a series of content blocks (like lego). A modularised design and administration allows for more freedom with content by using neatly arranged blocks of content that can be rearranged easily.We also reworked content structures to support best practice and to accommodate different devices.Modular site benefits:

• Greater reconfigurability
• Simple granular extension
• Increased website life-span
• Unlimited page configuration (dependent on modules available)

Talk to us if you'd like to understand how flexible content systems can work for you.

The results

The client was exceedingly happy with their new website. It drastically simplified the user interface and provided Safe Food with a platform that would allow them to quickly and easily update.The difference before and after is staggering.

• The website now presents Safe Food as a sophisticated government agency
• Information is easily accessible on a range of consumer, and industry topics
• The website now portrays a clear sense of who Safe Food is and what they do

As a result of these changes, safe food found a 400% increase in engagement through their website.

Lessons Learned

#1 - Creating a benchmarkThis project was super smooth sailing. In retrospect, however, (in writing this case study) it was unfortunate that Safe Food did not have Google Analytics installed. This prevented a clear metric to benchmark performance against, it could have helped to identify any content that users were flocking, and the organisation was not aware of.While this is increasingly rare, if there is no analytics, it is definitely worth installing on an old website as this provides a way to benchmark the site. Nearing completion of the new site analytics from the old site could be audited for any surprises and to establish a baseline and an argument for improvement.#2 - Producing contentThere was a lot of content that was needed for this site. And this is commonly an area that is overlooked. In government, the content, (especially if it is informed by legislation) needs to be correct and can't just be done by any old copywriter.For this project having subject experts write the content was a key area that kept the project on ice for a little while.