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).
- 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.
- Open Side Nav Icon Button
- Page Title
- Maintenance Process Icon Button:
Clickstarts 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 Progress: Displays the progress of the maintenance process.
- Navigate Back Icon Button:
Clickpauses the maintenance process and opens the Cancel Or Continue Dialog (see Brewing Process page).
- Cancel Maintenance Process Icon Button:
Clickcancels the maintenance process and opens the Maintenance page.
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 🙂