View all Projects

Nutrition tools for UON

The University of Newcastle engaged our team to redesign and replatform their two nutrition quiz applications, Australian Eating Survey and Healthy Eating Quiz, to improve their usability and effectiveness. Additionally, we designed and built a recipe website, No Money No Time, to help improve the eating habits of 18 – 24 year olds. Comprising two web apps and three websites, I contributed to the project in early-stage planning, interaction design, user testing and web development.

Roles:
Interaction Design
Technical Strategy
Web Development
Agency:
The Village of Useful (TVoU)
Heq results
Nmnt recommended recipes

Overview

Australian Eating Survey

A validated and cost-effective tool for clinicians and researchers that assesses an individual’s dietary intake, generally used for clients or research studies.

Healthy Eating Quiz

A questionnaire app that rates a user’s healthy eating habits, identifies areas for improvement in their diet and compares it with others of similar age.

No Money No Time

A recipe website to help 18 – 24 year olds make easy, healthy meals with limited kitchen equipment. It utilises a white-labelled version of the HEQ app to recommend recipes.

Project highlights

System planning

Helped plan the system architecture and designed and built the scoring engines for both quizzes.

Interaction Design

Designed two web apps – the questionnaires, reports, account and admin pages.

Full-stack development

Built three websites using Craft CMS, front and back, including an API and Vue.js app for the recipe website.

Frontend development

Built the frontend for the two Symfony web apps, working with an external development company.

Objectives

  1. Improve the usability of the Australian Eating Survey and the Healthy Eating Quiz.
  2. Improve the administrator experience for researchers using the Australian Eating Survey.
  3. Increase web traffic, first-time quiz submissions and follow-up quiz submissions for the Healthy Eating Quiz.
  4. Improve the healthy eating habits for respondents, shown through an improvement in follow-up quiz submissions.

Objective 1

Improving the usability of the survey platforms

Designing an adaptable and reusable set of components

Both the Australian Eating Survey and the Healthy Eating Quiz suffered from a number of usability issues, particularly in regards to their use on mobile devices, but also in their consistency across screens, the visibility of system status, and their efficiency of use.

I designed a set of components and layouts that could be used in both survey platforms to provide a consistent experience across the apps. The components adapt to a range of different screen sizes, ensuring that usability is always maintained.

Old Australian Eating Survey

Aes old p1
Aes old p2
Aes old p3
Aes old p6

New form controls

NMNT survey page 1 terms
AES survey
AES matrix mobile

Objective 2

Improving the AES administration experience

Designing the user flow

Clinicians and researchers can use the Australian Eating Survey to measure the nutrient intake and dietary habits of patients/​participants. Researchers purchase survey seats’ from The University of Newcastle’s website, which participants are then assigned to. The surveys are sent to participants using the platform’s built-in email system.

Flow cards

Adding new features for better control

The old version of AES was limited in its capabilities. Researcher accounts had to be set up manually and only provided three functions: adding participants, customising a welcome email, and sending the welcome email. Data export had to be requested manually and was sent to the researcher from the University’s IT team.

We added new features to the researcher admin experience such as participant groups, complete with their own settings and the ability to move participants between groups. Data exports were built into the app, we refined the participant management screens, provided a preview of their customised emails and gave them better control over sending emails.

AES manage participants select
AES edit participants
AES import participants confirm
AES send email

Objectives 3 & 4

Improving key metrics and helping change behaviour

Helping young people cook easy, healthy recipes

The University team wanted to enhance the Healthy Eating Quiz by providing better advice and recommendations to quiz respondents and were specifically required to show an improvement in the eating habits of 18 – 24 year old respondents.

Research by The Village of Useful showed young people living in shared and student accommodation were severely lacking essential kitchen equipment and pantry staples. We recommended building a recipe website, No Money No Time, to help users make quick, cheap and healthy recipes based on the equipment they have.

Development

We used Craft CMS to build the three marketing websites for the project and had two Symfony apps built by a partner agency. Craft provides the framework and building blocks to design the content modelling for the CMS and offers full control over the templating. I built the front and back ends for the three websites and built the frontends for the Symfony applications.

Vue.js + custom API

The most technically sophisticated part of the NMNT website is the recipes listing page. The page is initially rendered as static content from the CMS but once loaded is converted into a dynamic, client-side Vue.js application. To support the application I built an API and a custom plugin to fetch recipes based on the user’s applied filters.

Nmnt element api
Nmnt vue js

WesTrac

Caterpillar dealer WesTrac wanted a new online presence to reposition the company as a thought leader in the global construction and mining industries and to reduce the cost to serve new and existing customers.

Interaction Design, Usability Testing
View Case Study
2 min read