American Dairy needed a modern, forward-thinking visual aesthetic that best exemplified the combination of traditional farming values and the future health and wellness of Americans. To engage a savvy, increasingly mobile audience, American Dairy also required a fully responsive website design, capable of delivering both dynamic and engaging multimedia content to its viewers on any device.
Role: UI/UX, Strategy Category: Agriculture
Timeframe: 2017 - 2018 Tools used: Adobe Illustrator, Photoshop, Invision
Information architecture
Built the information architecture for the site as it is an important piece in the discovery phase of the project.
Kept a clean visual representation of the product’s infrastructure, features, and hierarchy.
Defined every avenue and path that users can take through the site.
Low-fi wireframes
Low-fidelity wireframes were roughed out using pencil and paper. The paper wireframes are concept sketches, a set of rough drawings representing the skeleton of the interface. There is little detail at this point. It is the bare essentials for where content would live on the page.
High-fi wireframes
High-fidelity wireframes were drafted from the lo-fi wireframe sketches for both desktop and mobile screens to eliminate possible doubts at an early stage and to refine areas that had functionality that needed to be crystal clear to the client and to the development team.
Designs
After making final tweaks to the wireframes the design comps were crafted.
Invision was used for sharing & collaborating design comps and for creating the mood board.
Using a board simplify's the management of design assets, color, typography, imagery
and texture.
The designs are assembled and put in place using a 12 column grid.
Micro-interactions
Micro-interactions were created so that the client and the developer could get a sense
on how the content was going to transition in on the food & recipes main page. It was also
important for the developer to go through the process so it was clear on what the functionality
goal was and so we could ensure it was going to work.
Micro-interactions were created so that the client and the developer could get a sense
on how the content was going to transition in on the food & recipes main page. It was also
important for the developer to go through the process so it was clear on what the functionality
goal was and so we could ensure it was going to work.
UI Style Guide
A web style guide was created to set the stage for the color palette, typography, image treatment,
icon treatment, button styles and other ui components.
A web style guide was created to set the stage for the color palette, typography, image treatment,
icon treatment, button styles and other ui components.
