Purpose

The navigational map provides a high-level view of how multiple pages within a web site are interconnected. Furthermore, they provide structure for how a user may interact with these pages to access information by navigating through many of them.

Process

After we had created wireframes that organized our web site's information within individual pages, we created a navigational map to show how we expected our personas to access their desired information by following links through the pages.

Although both personas would have a common entry point into the web site, their paths would diverge from there. Margo would be more interested in searching for a cookbook that contained a desired recipe, while Josh would be more interested in searching for a recipe directly through the recipe search interface. Initially (as depicted below), Josh used the web site's meal builder functionality to create a meal from his initial recipe; however, upon reflecting on our design and reviewing our previous research, we decided that he wouldn't utilize the meal builder interface.

Final Wireframes

Since each page provides near-universal navigation through the top and left menus, we only showed the connections between individual pages that our personas would use. Also, we plan on using AJAX/javascript to enable users to constrain the recipe selection iteratively without having to refresh the page. This interaction is indicated on our navigational map below through two opposing arrows.