CoffeeBoy Skeleton: Mock-ups, Part IV

Site Map Excerpt

In the current series of posts we create mock-ups for each CoffeeBoy UI page. These mock-ups show the building blocks (buttons, labels etc.) of each page, though without revealing the final visual appearance (colors, fonts etc.) of the UI, yet. This part focuses on the Orders page as well as pages in the hierarchy below of it (see extract of the site map above).

CoffeeBoy Series Schedule

Site map changes

One might have noticed in the above site map excerpt that we’ve made changes and introduced two new pages that weren’t covered on the structure plane: the Recent Order page and the Favorite Order page. The affected site map post and use case #08 have been already adapted. Now why have we done that?

During the creation of the upcoming mock-ups we’ve figured out that using the Tray page for both, retrieving an order’s details as well as adapting an order’s order items and initiating a new brewing process simply overloads the Tray page with too many use cases (namely viewing an order’s details and managing an order’s order items). Furthermore our goal was to make clear that a reuse of an order on the Orders page creates a copy of it, and does not modify it in any way. A Use as template labeled function1 on the Orders page should communicate that intention. Now if we wouldn’t introduce the new pages then we would force the user to go to the Tray page by means of the Use as template function in cases were she only wants view the details of an order. This would be somewhat confusing.

For that reason we’ve introduced the Recent Order page which provides details about an recently made order. Analogically the Favorite Order page informs about an order tagged by the user as favorite. As we’ll see in the below mock-ups, there are slightly differences between both pages.

Orders page

Orders Page (XS And SM)
Orders page (XS and SM)
Orders Page With Favorite Order Dialog (XS And SM)
Favorite Order Dialog (XS and SM)
Orders Page Afer Favorite Tagging (XS And SM)
Orders page after favorite tagging (XS and SM)
  1. Orders List:
    • Contains the history of the five recently made orders as well as favorite orders.
    • The list gets sorted in the following order (from top to bottom):
      • Recently made orders (recently made to oldest)
      • Favorite orders (recently tagged to oldest)
    • A “You have no orders.” text label gets displayed if the Orders List is empty.
  2. Open Side Nav Icon Button
  3. Page Title
  4. Orders List Item:
    • Displays the date and time (timestamp) of the order’s brewing process end or, in case of a favorite tagged and named order, the order’s favorite name.
    • Click opens the Recent Order page or, in case of a favorite tagged order, the Favorite Order page.
  5. Tag Order As Favorite Icon Button:
    • Indicates that an order is not tagged as favorite.
    • Click opens the Favorite Order Dialog.
  6. Use As Template Icon Button:
    • Click opens the Tray page with a copy of the chosen order.
    • Exhibits a Use as template tooltip.
  7. Untag Favorite Order Icon Button:
    • Indicates that an order is tagged as favorite.
    • Click opens the Favorite Order Dialog.
  8. Favorite Order Dialog
  9. Favorite Order Name Text Input Field:
    • Allows the specification of the favorite order’s name.
    • Allows only a certain amount and set of characters (tbd.). May be empty.
  10. Page Overlay: Click cancels (w/o saving) and closes the Favorite Order Dialog.
  11. Cancel Favorite Order Dialog Icon Button: Click cancels (w/o saving) and closes the Favorite Order Dialog.
  12. Untag Favorite Order Button: Click untags the favorite order (given it was tagged as favorite) and closes the Favorite Order Dialog.
  13. Tag Order As Favorite Icon Button: Click tags the order as favorite, saves the specified name and closes the Favorite Order Dialog. If the order was already tagged as favorite, then only the specified name gets saved (should it have been modified).
  14. Orders List Item: After an order has been tagged as favorite, then the respective order item does not get sorted until the user leaves and revisits the page.

Recent Order page

Recent Order Page (XS And SM)
Recent Order page (XS and SM)
  1. Order Items List: Contains the order’s order items.
  2. Navigate Back Icon Button: Click opens the Orders page.
  3. Page Title: Displays the end timestamp of the order’s brewing process.
  4. Use As Template Icon Button:
    • Click opens the Tray page with a copy of the chosen order.
    • Exhibits a Use as template tooltip.
  5. Order Items List Item: Displays the
    • coffee recipe’s name or, in case of an on-the-fly created or modified coffee recipe, a generic text label.
    • Tray Fragment Color Icon.
    • amount of ingredients.
    • order item’s cup amount.

Favorite Order page

Favorite Order Page (XS And SM)
Favorite Order page (XS and SM)
  1. Page Title: Displays the favorite order’s name or, if none was specified, the end timestamp of the order’s brewing process.
  2. Use As Template Icon Button
  3. Order Items List Item: Does not display the Tray Fragment Color Icon compared to the Recent Order page. That’s because the main use case of this page is not to inform about which tray fragment contains which cup of coffee, but to display which order items this order contains.

Tray page

This page differs from the Tray page which follows the Multiple Cups Of Coffee Order page only in that it has a different back navigation target.

Tray Page (XS And SM)
Tray page (XS and SM)
  1. Navigate Back Icon Button: Click opens the Orders page.

Brewing Process page

Also here only the back navigation target makes the difference between this page and the Brewing Process page in the Multiple Cups Of Coffee Order page’s hierarchy.

Brewing Process Page (XS And SM)
Brewing Process page (XS and SM)
  1. Navigate Back Icon Button: Click pauses the brewing process and opens the Cancel Or Continue Dialog (see here).
  2. Cancel Brewing Process Icon Button: Click cancels the brewing process and opens the Orders page.

Up next

In the next post we’ll go on with the creation of mock-ups. Stay tuned!

Footnotes

  1. This Use as template function was realized by means of the Use As Template Icon Button which has a Use as template tooltip.