Introduction
In this project, we worked as a group of 6 to redesign a food website for three different screen views (laptop, smart
watch, and multi-touch displays). The original website is Dave’s Cosmic Sub (https://www.davescosmicsubs.com/). The team consists of 6 members: Suvra Majumder, Bella Li, Muhammad Haider Shahid, Seong Ug Kim, Steve Wang, and Yulin Hu.
Motivation
The original design of Dave’s website is rather static, simple, and unintuitive. There were no signs for navigation and online ordering functionalities. Visitors of the webpage click on a pdf menu to view the available items. What’s worse, there was too much information on the main page, including about, contact information, locations, social media, careers, and operating hours. The messy design confuses customers with irrelevant information and trouble navigating. Our goal was to make the website more dynamic, structural, and intuitive.
Sketches
To start with, each group member came up with 2 views for each screen type, i.e. laptop, smartwatch, and hub view. Below is my first batch of sketches.
For the laptop view, the idea was to provide as much information as possible but not to confuse users. For food ordering and delivery, the menu, the shopping cart, and the order information are clearly the three most important elements, which are hence included.
For the smartwatch design, the idea is much simpler — to provide as direct information as possible and to avoid what users can see on their phones/laptops. Therefore, I came up with the idea to present Order Progress, Order Status, and Order Details on the smartwatch, which is also consistent with the traditional apple watch app style.
For the hub view, we imagined a situation where in an enterprise meeting room, people are trying to order different food of their own tastes together. The media type should obviously be big-screen and touchable. Immediately, I related the idea to McDonald’s self-service machines. All-on-one kind of design would provide the maximum efficiency for customers in that circumstance.
Below are selected sketches provided by other team members, from which we could tell similar elements and relatable styles. We merged everyone’s design by voting for our favorites of each screen type.
Paper Prototyping
Knowing what we want initially for the pages, we started paper prototyping. Below are the images of the prototypes.
Mood Board
From basic sketches, we figured out the initial look of new Dave’s Design. We then proceeded to create a Mood Board to gather all the relevant elements. In creating the Mood Board, we integrated the most representative elements of Dave’s found in their original websites, including their logo, sub sandwiches, the front desk, and the stores. Based on the original website and the mood board, we settled the basic tones for the new design.
Figma Design
Knowing the main elements and layouts of the pages, we implemented the designs on Figma. Pictures below are our Figma designs.
Laptop View:
In designing the laptop view, we considered the most important elements and the most intuitive layout for the home page, because this is usually the first impression presented to the customers. On the top navigation bar, we included the logo, menu, story, catering, location, and the shopping cart. In the body, we put the special offers of Dave’s and the ordering button, so that these are the first things customers notice by differentiated sizes and positions.
For the shopping cart and the menu, we kept the food pictures on the main part and subcategories on the left.
Smartwatch View:
As previously discussed, users want to see the most conclusive but simple information on the smartwatch. Hence, order status and order details are the most effective information to put on a small screen.
By swiping to the left, users may see their order number, order progress, status, and waiting time.
Hub View:
For customers in a group, we want to present information in the most straight forward way. Therefore, we thought about floating bubbles with huge font sizes. These bubbles will be the first things and the only things users see on first sight, which facilitates their navigation process.
The menu page is designed to be similar to the laptop view. However, the shopping cart and delivery information are included on the same page, so that users in a group don’t need to scroll too much to go through the ordering process.
Sketches Link:
Mood Board Link:
Figma Link:
Date: 2/8/2023
Author: Yulin Hu
Course Instructor: Dr. Emily Wall