Class work, Low-fi prototypes, toast

Class work #2.1

I was sick for this lesson but that will not stop me from my quest of teaching folks how to make toast. Following the flowchart and storyboard, we then had to create a UI flow, a sitemap, and then quickly sketch out an interface design.

UI FLOWS

This shows the flow of the user interface. They’re important for visualizing an interactive and how well it flows. I simply implemented the steps from my storyboard into the UI flow. There are small arrows to indicate the next page a user clicks through.

img_0205.jpg

EXTENDING CONTENT

After making this quick sketch, you can see some possibilities of adding extra content. With extending the content we can add information and further educate the user on their toast choices. From the waiting card, there could be an extension about your toast not being cooked enough, with instructions on how to acquire your ideal crunch. When the user picks the amount of bread, there could be additional information on types of bread, what types toast the best, how long for each type, etc. In the final card, information about toppings could also be added.

IMG_0207

NAVIGATION AND SITEMAP

After this we had to take our maps, list any primary and secondary navigation elements and then produce a site map. Primary navigation elements follow the normal linear sequence of toast making, secondary elements are for branching out with the extended content options.

Primary Elements:

  • Start (first step)
  • Next
  • Back
  • Done (last step)

Secondary Elements:

  • Not toasty enough/adjust toastiness?
  • Type of bread?
  • Toppings?

These make up the interactive part of the site and provide users with control. The primary and secondary elements must now be implemented into a sitemap, shown below.

IMG_0208

INTERFACE DESIGN

Once a sitemap is created, it’s then time for the interface design. I made a rough sketch of my interface so I can see where to place the elements and to help me visualize the end product.

IMG_0209

In creating this I gained a broader view of the design and saw places where things could be improved onto a digital mock-up.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s