Jasper.

Task 1: Selecting an Outfit Task 2: Locating an Outfit Miscellaneous Features

Person begins the outfit selection process by walking up to the mirror and saying “Hello, Jasper.” Person begins the outfit location process in one of two ways:
The mirror initiates the outfit selection process and presents recommended items based up the
weather, calendar, and ocassion. 1. Continuation of Task 1: the person notifies Jasper that they cannot find the recommended item;
Japser begins the location process.
Intelligent Wardrobe Assistant Start
2. Ad-hoc locating of an item; the person may be ready to head out the door and they need to find
7:45 AM

Welcome to
55° Onboarding Screen
Following usability tests, we found the need for an onboarding screen with
instructions on how to interact with Jasper.
7:45 AM 55° 2 7:45 AM 55° 2 7:45 AM 55° 2 one specific item (not included in recommended outfit) like a rain coat. The following mockups Jasper.
“Jasper, dress me up” “Jasper, dress me up” “Jasper, dress me up” demonstrate this task. The screen shows the two main tasks in which the person can use Jasper: outfit
selection and item location.

To begin, the person says “Jasper, locate my black shirt.

Assignment 3e: Digital Mockup Start To begin, try one of the following

CSE 440
commands:

“Dress me up”

“Locate an item”
7:45 AM 55° 7:45 AM 55°

Steven Austin, Dylan Babbs, Hao Liu, Tong Person switches to grey
shirt by swiping left
Person switches to pink
shirt by swiping right
Which black shirt are you
referring to?
Since the person has multiple black shirts
scanned in their inventory, Jasper must
Sounding shirt #4…

Shen with his hands with his hands.

1. 2.
clarify which black shirt he is talking about.
Jasper displays the inventory items that
1. 2.
In this scenario, there match the person’s voice query. The person
are only 3 shirts in the has six items.
J
inventory, and the

This document is split into three sections: task person can cycle
through them in a loop. 3. 4.
The person says “Shirt number four,” so
Jasper begins ringing the item using the 3. 4.
sounding tag attached to every clothing
1 overview, task 2 overview, and J J J item

miscellaneous features. At this point, the person has chosen their prefered shirt out of the recommended options,
and is ready to move to the bottom selection process. The person has alerted Jasper they
5. 6. I <3 DOGS 5. 6. I <3 DOGS

have selected their shirt with the phrase “Jasper, the bue shirt works.” In response, Jasper
fills in the top half of the silhoutte in the top left of the screen, signaling that the shirt is
Expanded Widget View
7:45 AM 55° 2
locked in.
Zoom in to explore; Speed Grader may not
55° 60° 63° 65° 64° 72°

The person has indicated they are moving to the bottoms (pant) selection process because Now 9 AM 10 AM 11 AM 12 PM 1 PM This view shows an expanded version of the top widget bar. The top bar is shown in

provide the necessary level of detail. they have swiped down with their hands, moving the selector to the bottoms. The icons
near the person have shifted from the top to the bottoms, indicating the selection area.
Now if the person swipes left or right, the bottoms will change, not the tops.
CSE 440 Group Meeting
12:30 PM
MGH 082
all states of the app, but the person has the ability to hide and expand the bar.
Dentist Appointment
3:45 PM There are three states:
701 Pike St #2000, Seattle WA

J J 1. Hidden
2. Minimized (only top bar)
3. Expanded (current view)
The shirt rings, and the person finds the
shirt. The task is now complete. The person can change these states using a pinched up and down swipe.
7:45 AM 55° 2 7:45 AM 55° 2 7:45 AM 55° 2
In the expanded view, an in-depth hourly forecast is show for the day, as well as
“Jasper, dress me up” “Jasper, the blue shirt works” “Jasper, dress me up” events in the person’s calendar.

Person switches to grey Person switches to light

pants by swiping left blue denim by swiping
with his hands right with his hands

J J J

The person has now selected the dark pants as their bottoms, and confirms with Jasper
they will be wearing those items. In response, Jasper fills in the bottom part of the
silhouette.

For the purpose of this mockup, the shoe selection process is not shown. The shoe
selection process is identical to the top and bottom selection process.