CoffeeBoy Skeleton: Mock-ups, Part II

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 Single Cup Of Coffee Order page as well as pages in the hierarchy below of it (see extract of the site map above).

CoffeeBoy Series Schedule

If not yet done, please first read the CoffeeBoy Skeleton: Mock-ups, Part I post in order to get an introduction to the skeleton plane and learn to know the mock-ups of the CoffeeBoy UI layout. That post also describes elements and components which appear on most of CoffeeBoy UI’s pages, as for example the Open Side Nav Icon Button or the Page Title which are also contained on the upcoming pages.

Single Cup Of Coffee Order page

Single Cup Of Coffee Order Page (XS And SM)
Single Cup Of Coffee Order page (XS and SM)
Single Cup Of Coffee Order Page With Empty List (XS And SM)
Empty Coffee Recipes List (XS and SM)
  1. Coffee Recipes List: Contains the order-able coffee recipes.
  2. Open Side Nav Icon Button
  3. Page Title
  4. On-The-Fly Coffee Recipe Icon Button: Click opens the On-The-Fly Coffee Recipe page.
  5. Coffee Recipes List Item:
    • Displays the coffee recipe’s name and the amount of ingredients.
    • Click opens the Coffee Recipe page.
  6. Order Icon Button: Click starts the brewing process on the Brewing Process page.
  7. On-The-Fly Coffee Recipe Icon Button: Disabled if the Coffee Recipes List is empty.
  8. Empty Coffee Recipes List Text Label: Displayed if the Coffee Recipes List is empty.

Coffee Recipe page

Coffee Recipe Page (XS And SM)
Coffee Recipe page (XS and SM)
  1. Ingredient Icon and Ingredient Label: Indicate the ingredient type whose amount can be specified by the Ingredient Slider (to the right).
  2. Ingredients Form Group Title
  3. Navigate Back Icon Button: Click opens the Single Cup Of Coffee Order page.
  4. Page Title: Displays the chosen coffee recipe’s name.
  5. Order Icon Button: Click starts the brewing process on the Brewing Process page.
  6. Ingredient Slider: Allows the user to specify the amount of milligrams per ingredient, either via a slider or a text input field. The text input field only allows numbers between zero and the capacity of a cup (tbd.). When the user moves the slider then the value of the text input field gets updated, and vice verse. Also the increase or decrease of an ingredient amount influences the specify-able amount of the other ingredients. For example, if the capacity of a cup is 250 ml and the user specified 200 ml for water, then she can maximally specify 50 ml for all other ingredients. If she’d again decrease the amount of water to 150 ml, then she could distribute 100 ml among the other ingredients. Recall Use Case #02 regarding this interaction concept.
  7. Total Label: Displays the total amount (in milligrams) of the coffee recipe’s ingredients.

On-The-Fly Coffee Recipe page

On-The-Fly Coffee Recipe Page (XS And SM)
On-The-Fly Coffee Recipe page (XS and SM)
  1. Page Title: This page only differs from the Coffee Recipe page in that the Page Title does not display the name of a coffee recipe, but a generic text label.

Brewing Process page

Brewing Process Page (XS And SM)
Brewing Process page (XS and SM)
Brewing Process Page With On-The-Fly Coffee Recipe (XS And SM)
Brewing of an on-the-fly coffee recipe (XS and SM)
Brewing Process Page With Cancel Or Continue Dialog (XS And SM)
Cancel Or Continue Dialog (XS and SM)
Brewing Process Page With End Info Toast (XS And SM)
Brewing Process End Info Toast (XS and SM)
  1. Brewing Process List: Contains the order item (with the coffee recipe) to brew.
  2. Navigate Back Icon Button: Click pauses the brewing process and opens the Cancel Or Continue Dialog (see below).
  3. Page Title
  4. Cancel Brewing Process Icon Button: Click cancels the brewing process and opens the Single Cup Of Coffee Order page.
  5. Brewing Process List Item: Displays the coffee recipe’s name, the Tray Fragment Color Icon, the amount of ingredients as well as the Brewing Process Progress.
  6. Tray Fragment Color Icon: Displays the color of the tray fragment which houses the cup.
  7. Brewing Process Progress: Displays the progress of the order item’s brewing process.
  8. Brewing Process List Item: In case of an on-the-fly created or modified coffee recipe, a generic text label gets displayed instead of the coffee recipe’s name.
  9. Cancel Or Continue Dialog: Opens the Single Cup Of Coffee Order page when the user decides to cancel the brewing process.
  10. Brewing Process End Info Toast: Gets displayed for a few seconds after the brewing process has ended (A similar info toast gets displayed when the user cancels the brewing process).

Up next

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