CoffeeBoy Skeleton: Mock-ups, Part VIII

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 Maitenance page and the pages in the hierarchy below of it (see extract of the site map above).

CoffeeBoy Series Schedule

Maintenance page

Maintenance Page (XS And SM)
Maintenance page (XS and SM)
  1. Maintenance Status Text Label: Displays the maintenance status (which can be either clean or dirty). A short text below the maintenance status informs the user what she may do.
  2. Open Side Nav Icon Button
  3. Page Title
  4. Maintenance Process Icon Button: Click starts the maintenance process on the Maintenance Process page.

Maintenance Process page

The interaction concept of this page corresponds with the one of the Brewing Process page.

Maintenance Process Page (XS And SM)
Maintenance Process page (XS and SM)
  1. Maintenance Process Progress: Displays the progress of the maintenance process.
  2. Navigate Back Icon Button: Click pauses the maintenance process and opens the Cancel Or Continue Dialog (see Brewing Process page).
  3. Cancel Maintenance Process Icon Button: Click cancels the maintenance process and opens the Maintenance page.

Up next

Et voila! We’ve finished our design work on the skeleton plane. Before we’ll continue on the surface plane and then start with the construction phase, broodlab takes a summer break. Have a nice summer 🙂