CoffeeBoy Surface, Part II

CoffeeBoy UI Side Nav

This is the second part in a series of posts presenting the visual design of the CoffeeBoy UI. In this post we’ll see all pages and some page states which can be found under the Single Coffee Order menu item in the Side Nav (see above picture). To learn more about the particular data and function elements on these pages, see this post from the skeleton plane.

CoffeeBoy Series Schedule

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)

Coffee Recipe page

Coffee Recipe Page (XS And SM)
Coffee Recipe page (XS and SM)

On-The-Fly Coffee Recipe page

On-The-Fly Coffee Recipe Page (XS And SM)
On-The-Fly Coffee Recipe page (XS and SM)

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)

Up next

Our visual design presentation tour will go on in the next post. Stay tuned!