Brainstation UX design challenge

This menu is designed for a mobile webpage for a hypothetical restaurant called Brainfood. For this project, I was given a raw text file, and was tasked to organize the information to be displayed in preliminary prototype. To optimize usability and ease of navigation, this early mockup is designed with careful attention to content hierarchy, placement, and visual design. As the aim of this project is to design a menu, only the web pages pertaining to the menu section of the website are depicted.

First, the contents of the raw text file were examined and divided accordingly into different menu items. To maintain consistency, each menu item would follow the same name, description, and price format. The name and price were bolded to show the visual hierarchy, as it is useful for the user’s eye to be drawn to those items first, and description second. White space was the then added between menu items to show differentiation. The text is left-justified to allow the user to read and scroll through the content easily.

This menu follows standard naming conventions to meet user expectations and thereby facilitate their information intake. Each menu item was categorized into one of the following course types: appetizers, mains, salads, desserts, drinks, or specials (figures 4-9). This system was selected to determine an item’s placement in the menu as users commonly seek out food options through this categorization method. All other information is secondary, and was not used to determine item placement on the menu.

The scroll bar at the top of the screen allows the user to click between different course types, and gives the user a visual indication of where they are on the menu. Users can also use this menu to navigate between different course types using this feature.

Vegetarian symbols were incorporated into the menu to accommodate a wider range of users, including vegetarians and users seeking to pursue the Monday weekday special (figure 9). Instructions were also listed in the description of the Monday special to increase clarity. The particular symbol was chosen to be recognizable for most users, however user testing would be valuable to test this hypothesis.

The menu page is one continuous scroll so as to reduce page loading time, increase user retention and to flatten the content hierarchy. There are two features that signify to the user where they are on the page. The “course type” scroll bar at the top and the dots on the right side of the page help the user keep track of where they are. A navigation symbol was added to the top right to allow the user easy access to other parts of the website, as depicted in Figure 3. Additionally, a shopping cart shortcut was added to the bottom right for quick navigation to the “Order” page for efficient checkout.

‍