Design Brief & Design Description

8/3/2019 Design Brief & Design Description

1/3

DESIGN BRIEF: CUCKOO COFFEE ORDERING SYSTEM

Cuckoo Coffee is a fictitious coffeehouse near a large suburban tech park. Their customers are mostly folks who

work at the tech companies nearby, so Cuckoo Coffee's owners have tried to cater the business towards this

audience.

One frustration their customers currently have is with ordering specialty drinks for large meetings. Customershave requested the ability to place large orders for meetings for pickup or delivery. Inevitably, with tailored drinks

for a dozen workers or more, the order is either miscommunicated by the person ordering the drinks, the order is

goofed by the barista, folks can't find their custom drink during the meeting and end up drinking someone else's

latte, or all of the above.

Cuckoo Coffee would like a software application design to make ordering specialty drinks for large meetings a

delightful rather than a harrowing experience for their customers and baristas.

YOUR TASK

You will have a week to come up with design concepts for two software applications:

A web application that customers can log into and place their orders through.

A desktop application that baristas will interact with in order to process received orders.

DELIVERABLES

You do not have to create a complete design for the applications, but you should be able to tell a story as to how

the system would work. Think through the workflows for both the customer ordering the drinks and the barista

receiving and packing up their order, considering any issues each might run into, and have at least one sample

wireframe for each of the applications to help demonstrate how the system would work.

The deliverables we would specifically like to see are as follows:

A one-to-two page writeup of your design concept that walks through the system you've designed, providesrationale for key design decisions, and summarizes your design process.

A diagram showing the workflow of the customer ordering the drinks, from the point in time they schedule the

meeting to the day of the meeting.

A diagram showing the workflow of the barista who processes the order, from the point in time the customer

submits the order to the barista packing up the order.

At least one wireframe and one visual mockup. (If you'd like to create more wireframes and visual mockups to

help illustrate your concept, no problem, but it's not required.) Between these two, make sure you depict both:

A screen in the web application the customer will use to place their order, as needed to help illustrate the

design

A screen in the desktop application the barista will work with to process orders, as needed to help

illustrate the design

A summary of the software tools you used in creating each artifact submitted.


2/3

Cuckoo Coffee Ordering System

My design is centered on what I see as the needs of the stakeholders. Since the business is fictitious, I couldnt actually

interview the people involved, so I designed a system based on five hypothetical stakeholders.

On the coffee shop side, there are the Coffee Shop Owners, who want an attractive interface that flattering for

their products and brings in as much business as possible. Then there are the Baristas, who view the order, prepare

the drinks, and pack them for delivery to the customer. (The drinks have to be hot, so the order must be prepared

just in time.) And the Delivery Persons, who deliver the drinks to the customer facility and/or meeting room.

On the customer side there are the Account Holders, who place the coffee orders. They probably get orders from a

variety of sources, such as slips of paper, emails, and word of mouth. Hence, a lot of mistakes are made. Account

Holders are also in charge of paying for the orders. Then there are the Meeting Participants, who communicate

their drink orders and later find them among the other drinks at the meeting.

My design process involves taking in all these needs/requirements and then brainstorming solutions that would

solve as many problems as possible, as simply and as cleanly as possible. I discard a lot of ideas, as they

sometimes introduce their own problems. You have to troubleshoot each idea and brainstorm other ideas asneeded. In the early stages, I sketch my ideas out on paper, then I create Visio prototypes once theyre ready for

prime time. In general, I try to use familiar metaphors, with the focus on keeping the user undistracted while

performing a task. (As the usability book says, Dont make me think!)

Here are the ideas I came up with for solving the above problems:

A Drink Label Printing SystemThe Baristas order system directly prints drink labels with theparticipants names, drinks, drink sizes, drink options, etc. These are then placed on the right sized cup.

This allows the drinks to be prepared with a minimal chance for error. And it means each drink arrives

unambiguously labeled for the appropriate Meeting Participant.

An Email Order Invitation SystemThis solves a lot of issues with minimal complexity. Each MeetingParticipant directly orders their drink via a link in an email. The link allows them to order one and only onedrink. No slips of paper, no word of mouthmost participants will place their own orders directly from the

emails. Once emails are replied to, the Account Holder will be able to verify the order and tell how many

invitations remain unanswered before they submit the order.

Intuitive Drink Order EntryChances are, not all orders will be placed using the email system, fornumerous reasons. So there will be a workflow for the Account Holder to enter drinks themselves (part of

the same workflow will also be used by the Meeting Participants). The workflow I came up with gives the

Account Holder useful feedback, telling them what drinks have been entered so far (in the Add Drinks

screen). The workflow for Participants and Account Holders is intuitive, with the details about their order

presented to each user at a comfortable pace.

Flexible Order Verification and ModificationInternet users are familiar with the shopping cartmetaphor. I use something close to this metaphor in the Verify Order page and let Account Holders add to

or modify orders prior to submission. (I considered giving Account Holders a modify-and-resubmit

option, but this introduced too much complexity, especially considering credit cards were involved.)

Use of CCS3 Media Queries for compatibility with Smartphones and TabletsSince the customer base is atech park, lots of customers will have smartphones and tablets. Using media queries with alternate layouts allows

for compatibility with these smaller devices. (I included one sample wireframe showing this).


3/3

A Barista Order Alert SystemBaristas are busy people and its a burden to remember when eachorder needs to be prepared, especially when all the drinks need to arrive hot. Therefore, the Baristas

desktop system alerts them when its time to prepare an order.

Heres the workflow for the Web System (see slide 2):

1. The Account Holder logs into the system or creates a new account with a new address. Then they eitherselect an existing order (which sends them to the Verify Order page), or they create a new order.

2. For new orders, the New Order page asks for an order name, delivery date and time, email addresses to send

invitations to, a street address (if necessary), and a room to deliver to.

3. If an Account Holder creates a new order, or a Meeting Participant clicks on a link in an invitation, the Select

Drinks page appears. As they mouse over each selection, they get a rollover effect which acts as an affordance

telling users they can click the drink to add it to the order. Choosing a particular drink from this page sends you

to that drinks options page.

4. The Drink Options page allows Account Holders and Meeting Participants to specify drink size, hot or iced

(if applicable), sweetener (if applicable), type of milk, whipped cream, etc.

a. After a Meeting Participant is finished, they click the Add to Order button and are sent to a

confirmation page.

b. After the Account Holder clicks Add to Order, they are sent back to the Select Drinks page, with their

selection updated on the Add Drinks page (this way they can easily keep track of what theyve entered).

5. The Account Holder clicks the View and Verify Order button, bringing them to the Verify Order page. They

use this page to verify that all emails have been answered and the order is correct. Account Holders will not be

able to submit an order on too short notice (a setting controlled by the Baristas decides on how short a notice is

possible). If an unsubmitted order gets too close to the short notice limit, the Account Holder gets an email

warning them of the limit, and that they need to submit the order before the deadline.

6. Account Holders can delete and modify particular drinks on the Verify Order page, if necessary.

7. After verifying the order and clicking Continue on the Verify Order page, the Account Holder enters their

payment information. Next, theyll be able to print their order from a confirmation screen.

Heres the workflow for the Barista System, including drink preparation, and delivery (slide 9):

1. In the morning (or any time during the day) the Barista can launch the desktop application and get the Day

View, which lists all of the days orders. They can also view orders by week and month. (This is useful for

managers when considering how many Baristas should be working on a given day.)

2. A certain amount of time prior to delivery time (this amount of time is configurable on the settings page), an

alert will pop up on the Baristas system notifying them of an upcoming order.

3. If the Barista clicks on this alert, or if they click on a particular order on the Day View, the order summary

appears. The Barista then clicks Print to print labels for the cups and also prints a paper invoice (which contains

delivery information for the Delivery Person).

4. The Barista affixes labels to the correct sized cups, then prepares the drinks.

5. The Barista packs the drinks in drink trays and gives them with the invoice to the Delivery Person.

6. The Delivery Person uses the invoice info to deliver the drinks to the right address (and the right roomor

someone at the customer site brings them to the right room).

7. The Account Holder and Participants use the labels (with their displayed names, drinks, etc.) to find their drinks.

Documents

Design Brief & Design Description