Over the past few weeks we have been expanding on our exercise of making toast – primarily in regards to setting up a mock user interface for the project. A part of this expansion has been creating a site map detailing user flow around the site.
Due to the minimal content we have – just the steps for making toast – it has been difficult to create a fully realised site map, as there isn’t a lot of room for complexity in whatever interface we design. However, there is a way to work around this by adding pages which detail topics such as the effects of each heat setting, different types of bread, etc.
For my own site-map (pictured below) I chose to include three main pages: The home page, the Process page (which details the process for making toast), and the Heat Slider page (which contains a slider demonstrating the effects of different heats on different breads).
The heat page and process page will both contain elements of static information alongside the interactive sections I will be including. They will also be including drop down navigation to allow the user to travel between pages easily.
I integrated elements of user flow into the site, the primary aspect of which is the choice to either learn more about toasting bread or learn HOW to toast bread. I have also included more user flow in red:
This site map is the basis for my wire-frame and screen design projects on the same topic, and will guide me in creating a site with optimal flow and function.
Design me a Design Blog 