CoffeeBoy Surface, Part III

CoffeeBoy UI Side Nav

This is the third 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 Multi 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

Multiple Cups Of Coffee Order page

Multiple Cups Of Coffee Order Page (XS And SM)
Multiple Cups Of Coffee Order page (XS and SM)
Multiple Cups Of Coffee Order Page With Tray Fragment Color Info Toast (XS SM)
Tray Fragment Color Info Toast (XS and SM)

Coffee Recipe page

Coffee Recipe (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)

Tray page

Tray Page (XS And SM)
Tray page (XS and SM)
Tray Page With Opened Context Menu (XS And SM)
Opened context menu (XS and SM)

Brewing Process page

Brewing Process Page (XS And SM)
Brewing Process page (XS and SM)

Up next

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