Donut Bites with menu

This is a re-worked prototype that adopts a menu navigation. The initial project (Donut Bites) uses buttons to reveal donut tidbids. With the menu navigation, the user clicks on the desk bell to reveal the buttons. This approach is useful in freeing up screen real estate.


From a development perspective, it is a bit more complicated to build. It requires additional triggers, motion paths, various states, and looootttts of testing. However, the pay off of a tidier screen and streamline navigation is well worth it.

Below is a side by side look at the different navigation.

Navigating with a menu

In this menu, the user clicks on the bell to see the menu options (donuts). When the user clicks the bell again, the menu options are hidden, and keeps the tidy. This navigation is suitable if screen real estate is limited.


To view, click on Donut Bites with nav.

Navigating with buttons

In this menu, the options are always available on screen. The user can quickly click on the donuts to view information.  This type of navigation provides convenience for the users as it reduces the number of clicks to view information.


To view, click on Donut Bites.