Table of Contents
- Previously on Dave’s
- Evaluate
- Redesign and Extend Goals
- Motivation
- Needfinding
- Brainstorm and Ideation
- Iterate and Sketch
- Extend and Implement
- Demo
- Re-evaluate
- Reflection
1. Previously on Dave’s
Dave’s Cosmic Subs is a popular sandwich shop that has been serving up delicious, unique subs for over two decades. Founded in Ohio in 1997, Dave’s Cosmic Subs has since expanded to multiple locations across the United States, earning a loyal following for its creative menu, friendly atmosphere, and commitment to quality ingredients.
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. Furthermore, 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 causes trouble navigating. In a previous design sprint, we created a new ordering website for Dave’s to make the user experience more dynamic, structural, and intuitive. Below are the selections for the laptop view in the last sprint.
2. Evaluate
- Design Feedback Summary
Laptop
Pros: homepage design with clear menu, well-sorted menus with categories
Cons: clicking the plus button to add menu to cart can be troublesome, unclear what the menu on homepage is
Hub
Pros: big buttons on first screen are catching eyes
Cons: distracting button animations, inconvenience of keyboard input for address, no local store
Watch
Pros: minimalistic design fitting to small screen, expected features present
Cons: lack of stylistic elements related to restaurant.
- Improvement directions for each view
Laptop
- Replace the plus button with a different method to add items to the cart that is more user-friendly
- Consider using an image of the menu on the homepage to make it more clear to users
- Provide a more local option for quick food access
Hub
- Simplify button animations to avoid distractions
- Find a more convenient input method for users to enter their address and other details
- Provide a local store option for quick access to food
Watch
- Add more stylistic elements that relate to the restaurant to make it more visually appealing
- Ensure that all expected features are present and easy to access on the small screen
3. Redesign and Extend Goals
Because Dave’s stores are rather local and not widely spread, we decided to develop better marketing and sales strategy to expand the market for the local sandwich store. In order to redesign the previous webpage and extend it to a physical prototype, we followed the standard procedure of evaluate — iterate — extend. Our goal is to focus on four major principles from 10 Usability Heuristics for User Interface Design to make our physical prototype accessible and easy to use:
(a) Match between the system and the real world
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
(b) User control and freedom
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
(c) Recognition rather than recall
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
(d) Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
4. Motivation
How can a local sandwich store expand its market?
Are there more convenient ways for customers to purchase delicious sandwiches?
Dave’s Cosmic Subs already has stores in multiple major cities in the US. In the previous design sprint, we improved Dave’s online ordering webpage for laptop, watch, and hub views. However, it is not easy for potential customers to notice a sandwich place that they have never tried before. Hence, we thought about transforming Dave’s sandwiches into a more merchandise product, exposing the brand to more population. Before realizing the strategy, we ought to explore when, where, and why the customers would want a sandwich at Dave’s and which form of purchasing would satisfy the customers.
5. Needfinding
We designed the interview questionnaire and asked 8 college students at Emory University.
- What are the sandwich places you have been to?
- In what circumstance would you buy/order a sandwich?
- Have you ever been to Dave’s?
- How was the ordering experience at your favorite sandwich place?
- What do you like and dislike about the ordering experience?
After integrating all the answers, we reached the conclusion below:
- People staying up late would love to have a sandwich at midnight.
- A restaurant’s operation hours are the main concern for ordering late-night snacks.
- Consumers love to customize their sandwiches and have a short delivery time.
- On-campus stores are preferred over stores that are distant.
- Sandwich stores at peak hours could have long waiting lines, which frustrates the customers from dining.
6. Brainstorm and Ideation
Based on the need-finding process, we concluded that the users want four features from a sandwich store:
(1) Close distance
(2) Short waiting time
(3) Smooth ordering
(4) Open at midnight
Through a brainstorming process, the ideas below have the highest votes in the group:
- A Sandwich Vending Machine
- A Sandwich Pipeline
- A Sandwich Wrapping Machine
We finalized the idea and settled on the sandwich vending machine because it solves all four needs raised by the consumers.
7. Iterate and Sketch
Considering that a sandwich vending machine requires both a touch screen for ordering and a container that stores and drops the sandwiches, our team split the task of building a physical prototype and a digital prototype.
Sketches
Reflecting on our previous user interface design, we interviewed more target users (mainly Emory students) in the format of “I like, I wish, and What if”. The feedback indicates that:
- The hue of the red is excessively prominent on the main page.
- Icons on the watch view should be included to indicate Dave’s Cosmic Subs.
- There should be increased contrast for a better visual experience.
- An ingredient list in the ordering menu for enhanced convenience will be appreciated.
Therefore, we would like to offer a side-by-side comparison of our old and new designs of Dave’s! (Left: Old Design; Right: New Design)
8. Extend and Implement
Based on the need-finding process, we want our vending machine to have the following features:
1. We designed the vending machine for the food fridge and purchase screen to be encapsulated in a whole, which adds to the security of the machine and makes the height comfortable for users.
2. The touch screen is of the size of an iPad and is implemented with our user interfaces.
3. There is a credit card reader in the middle of the machine to supplement the QR code payment method.
4. Food purchased will be dropped off and picked from the collapsible door at the bottom. The door gives the pick-up slot more protection from the outdoor environment.
The following steps were taken to construct the prototype:
- We measured the available cardboard lengths and cut them based on the lines we drew.
- We covered the surfaces of the boxes with color papers to enhance their visual appearance.
- We used a hot glue gun to connect the sandwich container and the pick-up slot.
- We taped the cardboard and paper sheets together.
- To create the card scanner and door knob, we used 3D printing. We prepared the .stl models using Thingiverse and Dremel Lab 3D slicer, and printed them using a Dremel Lab 3D printer and yellow PLA filament.
- By utilizing various materials, machines, and hand-held tools, we were able to complete each component of the prototype and assemble them into one final piece.
Digital Prototype
From iterating and reflecting on the previous web pages for Dave’s, we included the following features on the vending machine user interface:
1. We inherited the intuitiveness of our page designs from DS1. Clickable items are in obvious positions and follow the same logic as normal purchases.
2. Buttons and navigation bars are big and bold so users can click on the screen easily without mistouching.
3. Only a few elements are included in any pages so that users are not bombarded with all the clickable options.
4. We adjusted the layout to fit a smaller vending machine touchscreen and eliminated the search bar to avoid typing.
Design Overview:
Our design for Dave’s Classic Sandwiches is centered around a user-friendly and efficient process that allows customers to easily order and receive their desired sandwich. The design is broken down into four main parts: the main page, menu/shopping cart, checkout page, and QR code.
Main Page:
The main page serves as an overview of Dave’s classic sandwiches, providing customers with a glimpse of what they can expect from our vending machine. The page also features an option to start ordering, which takes customers to the menu/shopping cart.
Menu / Shopping Cart:
The menu/shopping cart is the heart of the ordering process. Customers can scroll through our menu of sandwiches or use the navigation bar to look up specific items. Once they have found their desired sandwich, customers simply tap on it to add it to their shopping cart.
Checkout Page:
The checkout page allows customers to review their order and make any necessary changes before finalizing their purchase. Customers can adjust the quantity of each item they want to order and choose their preferred payment method. Our vending machine accepts credit cards and online payments, which can be completed by tapping a card or scanning a QR code.
QR Code:
In addition to credit card checkout, we also included a QR code payment method for mobile apps. This feature allows quick, easy, and wallet-free checkout, which is preferable in the outdoor environment.
9. Demo
10. Re-evaluate
We conducted another round of interview process based on the prototype we built, and below are the main feedbacks for re-evaluation:
(a) We want to make it lightweight and movable so that it can travel around campus.
(b) We plan to include accessibility features such as audio and physical assistance to help those who have disabilities.
(c) We aim to make it customizable by allowing users to select their preferred sandwich ingredients and to view food choices that suit their dietary restrictions.
11. Reflection
As a designer, I have discovered that developing a low-fidelity prototype is a crucial approach to comprehend user requirements and enhance the design. The prototype construction is an essential part of the design process that offers a chance to experiment with diverse materials, techniques, and ideas before committing more time and resources to a more intricate design. As more tools and materials are exposed to us designers, our ideations are updated and more probabilities are discovered.
Within the design process, the first and most important thing is always stepping back and evaluating the user’s requirements instead of immediately diving into the technical aspects of the design. Understanding the user’s intrinsic needs is crucial, and creating an environment that facilitates those needs is vital. Starting with low-tech methods, such as cardboard and cutting knives, has enabled me to test the user interaction with the prototype and investigate the constraints and opportunities that contribute to a more refined design.
Through the Agile-like physical prototyping, I have come to appreciate the significance of embracing the concept of a minimum viable prototype, learning from failures, and revising to enhance the design’s viability. Working with limited space and materials has enabled me to identify the user’s fundamental needs and refine the initial design concept. In essence, prototyping is not only a design process but also a learning and understanding process.
Date: 4/24/2023
Author: Yulin Hu
Course Instructor: Dr. Emily Wall