A Users ability in making healthy food choices while shopping online can be
a battle between self control and misdirection. This was the challenge in creating the Nudgeworks Extender, this Chrome browser extension aims to help consumers to shop healthier by presenting information on the nutritional quality of food items and providing tailored feedback on diet quality of foods purchased.
Nudgeworks was the result of a hackathon aimed at pushing users to make healthier choices when choosing food online.

While the purpose of the extension is to add nutritional information, it should not take away from the design of the site or sites it would engage with.
After numerous concepts had been discussed with the development team.
It was felt that two elements should be displayed on the page. Additional elements would hidden in the task bar drop down.

The traffic lights color code indicators, and the key or legend displaying the nutritional value of the item selected.

The traffic light indicators had to convey three important elements of information, color code, type of excerise and time needed to burn off the item selected.

The key would sit on the right of the site and would be locked in place while users scan for items, it would display the users chosen excerise and allow for the user to select from a range of different sports. Below would be a thumbnail of the food selected and and finally. The nutrition facts and ingredients of each product.



With two new elements added to the site a high level of affordance needed to be looked at, as it was clear The properties of the objects on screen could have conflicting functions between themselves and the original element of the site.

When users have selected all the items they want and proceed to the check out items deemed bad for the users are highlighted, and the user is given a pop out window allowing them to Nudge up to a healthy choice. This change will also be reflected in the side panel as to the overall nutritional value of the overall shopping basket.

Roles

Web Design  Prototyping  Wireframes  A/B Testing  Mockups  Interaction Design

October 13, 2016