Redesigning Dave’s Cosmic Sub’s Website | CS485 Designing for Dimensions
Suvra Majumder
Introduction
For my Human-Computer Interaction course’s very first design sprint, Designing for Dimensions, my group — Bella, Haider, Seong, Steve, Yulin, and myself — was tasked with redesigning one of three web pages:
- Dave’s Cosmic Subs
- Atlanta FOX Theatre
- Emory University Computer Science Department
Good design is not static — it is not a one-size-fits-all and there is no formula that will grant success with every design. With technology continuously evolving, multi-touch displays with different dimensions, resolutions, and uses are becoming increasingly popular amongst everyday users. Because of this, a good design will look different depending on the device, user, and purpose. For this reason, we were instructed to design for three different screen types: a smartwatch, a laptop, and a multi-modal large display.
Dave’s Flawed Website Design
If you live in the Emory area, there’s no doubt you’ve heard about Dave’s Cosmic Subs. Known for its classic rock atmosphere and creative sandwiches, Dave’s is a hotspot for university students looking for a quick bite to eat. But its influence doesn’t stop there — if you live in the greater Atlanta area there’s a good chance you know about Dave’s as that one cozy hole-in-the-wall shop. Located smack-dab in the middle of Emory Village, Dave’s is a convenient spot for students to stop by, but what about other patrons? As the only location in all of Georgia, many patrons prefer to order Dave’s delivery. And what better first step in doing that than going to the Dave’s Cosmic Subs website?
As soon as my group saw the poor state Dave’s website was in, we knew we had to redesign it for this project and give those who order Dave’s delivery (our self-imposed target audience) a little saving grace.
Well, it certainly does leave much to be desired. Right off the bat, there are a few bad UX/UI elements we noticed.
1) Accessibility
The most obvious is the glaringly red text at the top of the screen. Coupled with the busy background of the shop, the text is incredibly difficult to read and is inaccessible to those with visual impairments.
2) Navigation
At first glance, there is no obvious navigation bar. They do have a hamburger menu off to the side, but hamburger menus are typically found on mobile or coupled with a traditional navbar on desktop.
3) Empty Space
Lastly, we noticed an abundance of empty space on the site. White space can be a good thing when the goal is to emphasize something. But in the case of Dave’s, it doesn’t serve any purpose and this amount of white space seems almost wasteful.
Time to draw!
Step 1 in our process was to sketch 10 mockups for every single screen (so, 20 sketches per device) we wanted to implement. Each team member was tasked with sketching at least 2 sets of 2 screens for each device, for a total of 12 sketches per person.
Here are some sketches that stood out during our process and what they eventually turned into:
Smartwatch
The first few sketches for the smartwatch design were based on compacting a full-sized website into a tiny display with full order-creation capabilities — but this was simply unfeasible.
As the token Apple-Watch-haver in my team, I made sure to inform the rest of the members of the uses and annoyances of using smartwatch apps. Apple Watch apps love to be minimalistic and utilize tabs. I realized that no one is going to make a long sandwich order on their smartwatch — it’s simply inconvenient when your phone is right there.
So, I thought about why I would gravitate toward my watch specifically and realized that I used my watch very fleetingly — only to check my notifications or quickly browse my texts. Because of this, we understood fairly quickly that we did not want a scroll, nor did we want to overload the user with information.
Instead, we decided on expanding on Sketch #3 and making our app redesign have one-step functions — check order details and check order status.
Finally, we ended up with the above paper prototype. Fit with three screens, the design is simple and basic — a characteristic of many watch apps. The first page is the homepage, complete with two buttons to check one’s order status and order details. Upon clicking either button, the user will be redirected to a page that states their current order status (processing, preparing, ready for pickup/on the way) or current order details.
Laptop
Contrary to a smartwatch, a laptop is perfect for scrolling and creating orders! So that’s what we really wanted to focus on as we were sketching up mockups. Dave’s original website is, honestly, uninviting at first glance, so we really liked the idea of a large hero image on the homepage, along with a call-to-action button that makes ordering online seamless and easy.
We also loved the idea of having a pull-out cart, similar to Amazon’s shopping cart, to easily check your current order details as you create it.
Eventually, after refining our designs, we ended up with the above final paper prototype. We added a top navigation bar — something the original website was lacking — with simplified tabs. We added a large hero image to grab the user’s attention at first glance and a “Start Order” button right in the center. For the menu/ordering screen, we utilized scrolls and side navigation bars to separate the menu into subcategories so that the user could easily navigate the menu. Lastly, we added a shopping cart icon to the top right so that the user can easily check their order details.
Multi-modal Large Display
When thinking g about our target user audience (those who want to order Dave’s) we thought about when they would ever come in contact with a large multi-modal display. We concluded that a company could have multi displays in their building and would use it to make large group orders for the office.
Aspects of the multi-modal large display that we really wanted to take advantage of were the ability to split screens, display a lot of information at once, and interact with the user through the touch display. For the large display, we didn’t want to take any shortcuts or liberties like we may have done for the watch or laptop (i.e., switching tabs or limiting functions.) So, we decided that a user should be able to create their order, edit their order, view their order, and enter delivery details all at the same time.
We played around with the different ways we could achieve this without cluttering the screen, and this is what we ended up with:
Our home screen utilizes bubbles — an idea we all loved at first glance (thanks, Bella!) — that dynamically change size. Upon tapping the Menu bubble, the user is redirected to the ordering screen where they can scroll the menu, add items to their cart, edit their cart, and fill out delivery details simultaneously. The ability to split screen was brought up later while creating our final design. The original plan was to allow the user to tap “split screen” on the homepage (not drawn on the paper prototype), and have the screen divide into two to allow two users to simultaneously create orders and browse Dave’s. However, with our current design, we concluded that splitting the screen would crowd a single display too much.
Moodboard and Style Guide
Before moving on to Figma, we first created a moldboard and style guide to keep everything consistent and generate UI inspiration and color schemes!
We wanted to keep the same close-knit vibe of the original website, along with the same color scheme and ideas. With that in mind, we chose colors derived directly from the original website (#BF1E2D) and chose complimentary colors we found around their shop in the mood board (#FFDE16).
Additionally, we chose a font that was similar in vibe to the original, with Anton as the main heading font and Bebas Neue as the subheading font, as well as SF Pro which is the standard Apple Watch font.
Let’s get prototyping!
We used Figma, a powerful design tool, to bring our paper prototypes to life.
Smartwatch
Here is our final Figma prototype for the smartwatch!
Sticking with the classic Apple Watch design, we opted for a simple black background with red accents for the back tab and buttons. True to our original design, the final prototype features two features — checking one’s order status and order details. To keep the interface clean, we opted for no pictures and stuck with simple text.
Laptop
And here is our laptop prototype! With a large hero image showcasing Dave’s signature sub, the user’s attention is captured immediately. We used a deep red color to pay homage to the original site and used white and yellow as accents to keep the user interested.
We created components to create seamless animations between text and menu items. We create a menu card to contain each menu item as well as animated the add-to-cart button on the corner. We also created a simple button that highlighted the hover state to indicate clickability. Lastly, we created text components for our top and side navigation bars to once again highlight clickability.
Multi-modal Large Display
And lastly, here is our multi-modal large display prototype! Like stated earlier, we wanted every order function to be accessible from one single page. To achieve this, we have a simple homepage with animated bubbles. Upon clicking “Start Order” the user is redirected to the menu screen where they can order subs to their heart's content!
Our components for the large multi-modal display are very similar to the laptop components, with the addition of a shopping cart item and the home screen bubbles.
To showcase the interactive aspect of the multi-modal display, we created a very simple frame animation prototyping the add-to-cart and delete-from-cart functions with updated tax calculations and cart totals!
Let’s listen to some feedback
In class, we presented our prototypes for all three screens along with our ideas and motivations.
Overall, the response was very positive! However, there is always room for improvement! There were a couple of main pieces of criticism we received:
- The laptop screen has too much red — though we wanted to keep the color scheme similar to the original website, we played it too safe and got feedback that the amount of red was too blinding. To combat this, we could easily add a contrasting color, such as a deep blue.
- The menu cards should be clickable — in the interest of time, we didn’t animate the menu cards aside from a simple button animation. In the future, should we continue this project, it would be helpful if the menu cards were clickable so that they expand and contain information about menu items such as a description and allergy details!
- The hub display may have keyboard issues — in our need to have everything on one page for the multi-modal display, we failed to take into account a pop-up keyboard that would inevitably be necessary to input delivery information. To combat this, upon tapping it, we could have the delivery box pop to the center of the screen and blur the background to allow the user a clear view of what they’re typing.
Concluding thoughts
First, I wanted to give a huge shout-out to my teammates! Everyone worked super hard with the limited time we had for this debatably large-scale project!
As someone who already had Figma knowledge before starting the project, I loved being able to teach others about the different uses Figma has, especially with components (components aren’t used just for buttons — they can be used for everything!) However, I had no knowledge about multi-modal displays and learned a lot about the different ways they could be utilized!
Working in a team always poses certain challenges — there are lots of ideas floating around which can be both a great thing and overwhelming. I learned a lot about working with a large(ish) group and working together to create something everyone agrees with and is proud of. We worked around everyone’s busy schedules to meet in person, sketch together, ideate together, and even Figma together and I’m so proud of what we accomplished together!
