Contact us.

Let's talk about...

Projects contact Careers contact General contact
Projects contact New project

P.S.   I'll bring cookies to the kickoff meeting.

Careers contact Careers

P.S.   I'll bring chips and guac to the interview.

General contact Something Else

Scroll to see more.
Kelloggs Experience Guidelines

Kellogg’s is a global, Fortune 500, cereal and convenience food company. Kellogg's user experience for it's many brand sites has been suffering from inconsistency and unreliable quality due to the sheer number of design agencies working on different sites. Kellogg's brought us on to create a set of best practices, principles, and guidelines for all agencies to follow when working on a Kellogg's brand site.

Klg Elements Desktop

We started with lots and lots of research, copywriting, content structuring, and strategy. We categorized the main areas of usability for web and tested existing Kellogg's sites against them, documented our findings, and set out to create guidelines to fix the issues we found.

Categories for the guidelines

We tied specific examples from Kellogg's brand websites to the guideline topics to make sure the content would be useful and appropriate

Examples from current Kelloggs sites

Once we had everything planned out and organized we focused on copy and content.

It ended up being a 20+ page document for the text alone.

Our raw content from early in the project

Time for wireframes.

Once the copy and content was finished we created wireframes for the site, making sure navigation was intuitive and information was easy to find

Klg Wire

Finally, design time.

We designed according to the rules we just made, and kept everything as simple and basic as possible. The designs were meant to be an example of the guidelines themselves - a framework that doesn't stifle creativity and leaves plenty of room for a unique design.

Case Klg D Mobile 1@2X Case Klg D Mobile 2@2X Case Klg D Mobile 3@2X

The guidelines host videos and assets for agencies

We included design principles / fundamentals and tagged each rule throughout the guidelines with the design principle(s) it relates to.

This helps give context, and helps with adoption since people will be more likely to take something seriously if they know the reasoning behind it.

Case Klg Principles Mobile@2X

Next Up

Stitch & Tie e-Commerce

Up next.