Webclip - Jacob Webflow Template

Mobile Restaurant

UI/UX Design
July 28, 2021
Deliverables - Mobile App

Project Overview

Brainstation Design Challenge: Process

For this challenge, I went with designing a mobile webpage that showcases a restaurant menu. Using the text file that was received I simply organized all of the menu items into specific categories. After reviewing the text file that includes the menu item and understanding the task for this challenge, I did a little research to help me understand how to design this idea based on possible users who may want to attend this hypothetical restaurant and what it serves, what hours of the day. With some of these questions in mind, I wanted to go with designing a mobile menu website that is easy to navigate, allows easy decision-making on menu items and purchases. Using design elements to carefully and intentionally place each menu item and design asset was also key in my design thinking. After research, I decided to make rough wireframe sketches on a sketch pad to help me get an overview of my design. Using a minimal design approach with lots of white space and icons can help aid user visibility and scanning of the product.

After carefully identifying the user, I went with a minimal design using a lot of white space to help the user differentiate and find menu items easily. Each menu item was categorized into different categories that include Salads, Mains, Appetizers, Desserts, Drinks, and Weekend Specials. To create a visual hierarchy, I used bold fonts to identify each menu category, item title, and prices, I believe this will drive the users’ eyes to those main features to help decision making less painful. Since using white space was the main feature, I went with menu items texts aligned to the left and prices aligned to the right. I also incorporated the use of a specific icon to help users find vegetarian options that are available on the menu as well and a shop icon on the top right to help them easily access their selected items in the shopping basket. While scrolling down through the menu, the menu navigation moves left, until that menu title is out of sight, bringing in the next menu item, and vice versa while scrolling back up.


Mobile Screens