1. Introduction. Value Proposition and Problem/Solution Overview

Medium-fi

Prototype

1.

Introduction

Value Proposition and

Problem/Solution Overview

Value

Proposition

Slide into your

perfect ambience

Problem/Solution Overview

A lot of people nowadays rely on different

environments in order to work. People go to cafes

not just to work efficiently, but also to get

inspired. We know, however, that the social

environment of a place may not be suited to

everyone’s needs. Jukebox aims to solve this

problem by not only finding the perfect

environment for people, but also give them the

power to influence their environment. With this

tool, we hope to empower people to find an

environment perfect to them.

2.

Task Flows

Three Tasks

Simple

Find a

place that

falls under

your

conditions

Medium

Report the

current

environment

in the area

Complex

Suggest a

change in the

current

environment

Changes to Tasks

7

This was done

because we

thought it was best

to separate the

manager’s side to a

different app to

avoid confusion

between parties.

For the purposes of

this project, we will

only build the

consumer side of

the product.

1.

Removed previous complex task

of suggesting a change from

manager’s POV

2.

Made medium task reporting the

current environment

3.

Made complex task suggesting a

change in the current

3.

Design

Changes

Updated sketches and

rationale

9

Design Change 1

11

12

Rationale

Firstly, we do not have a before sketch in our previous prototype because we did not have this. We decided to do an onboarding not only so that we can make sure they know how to use the app, but also, to make it simpler for users to pick their settings. The onboard phase would happen in the beginning of the app and thus, would not have to change their settings every time they try to look for a place. We believe this change would create a simpler and more straightforward experience for the user.

Also, we organized which categories should come first based on our testing. We added new filters such as wi-fi, outlets, food, and dog friendly. We also believe that distance is the most important aspect to people looking for a place.

Design Change 2

14

15

16

Rationale

We decided to remove sliders for some categories because although intuitive in our testing, it made more sense in terms of measurement. For some things like distance, it makes sense as people want to know the exact mile range of where things are. However, for others such as temperature or crowdedness, we believe people would have an easier time picking between three groups. To accomplish this, we decided to use icons. We think that people would have an easier time picking between icons that display “hot”, “warm”, and “cold” vs exact temperatures of 28 C, 23 C, and 18 C. Exact measurements also wouldn’t make sense for things such as crowdedness because if we were to use number of people as a measurement, it wouldn’t necessarily always tell how crowded there is as it depends on the size of the place and how many available seats they have.

Design Change 3

18

19

20

Rationale

We wanted to bridge our three tasks together as it made more sense as a whole. We also thought our original main menu idea of having three separate buttons felt outdated. One feedback we got from testing was that the app should be able to initiate more rather than the customer initiating. This was because after

completing one task, that would be it and there would be no flow, especially in our task of finding a place. With our new integration of the three tasks, we believe we are able to solve this problem as after the user finds a place, they would then be able to check-in to the place where they can report the environment and also suggest a change. We think that this is a much more logical flow for our tasks. This also eliminates the hassle for users of having to back out of all pages to get to the main menu in order to do a different task.

4.

Medium-fi

Prototype

Task Flow 1

Find a place that falls under

your condition

Onboarding

Phase

24

Start

User can pick their settings then swipe

End of Onboarding

Next page when users pick more settings

After selecting all categories, they can swipe to last screen and press “Finish”

Start of

onboarding, users swipe to next screens

25

Main Menu Google _Maps

Shows a list of places based on your settings If “Directions” is pressed, prompts Google Maps Way #1

26

Main Menu Google Maps

Shows a list of places based on your settings If “Directions” is pressed, prompts Google Maps Way #2

Map and more information are shown

Task Flow 2

Report the current

environment in the area

28 Main Menu “Directions” button will change to “Check In” if distance to a place is 0 mi If the x button is selected then press “Finish,” it will complete and send the report

Report Page

Screen to show that the settings have been recorded

Back to main-menu

Success _{Main Menu}

29 Main Menu “Directions” button will change to “Check In” if distance to a place is 0 mi If the x button is selected then press “Finish,” it will complete and send the report

Report Page

Screen to show that the settings have been recorded

Back to main-menu

Success Main Menu

Way #2 Detailed View Place is selected to get more information about it

Task Flow 3

Suggest a change in the

current environment

31

Report Page

If the check button is selected then press “Finish,” it will bring to Suggest page

Users can slide the volume or

brightness or make a specific request

Suggest

Page Main Menu

“Suggest” button is pressed to submit the request

When “Done” is pressed, brings user back to main menu

4.

Prototype

Overview

33

Prototyping Tools

We used:

●

Figma

How the tools helped:

●

Create clearer visual design with general screen transitions

●

Simulated user experience with the interactive icons and sliders

How the tools did not help:

●

Couldn’t add user input for text and icons

34

Limitations and Tradeoffs

●

All interactions were done with click

interactions to simplify the prototype

●

Changes, such as, onboarding preferences

were not saved because no type of data

structure was used

Why were these

required?

Our main focus right now is more on the visual design and user

experience of the app. The usability and

implementation will be fixed at a later time.

35

Wizard of Oz/Hard-coding

Wizard of Oz:

●

Did not actually have Google Maps integration

and just displayed a pop-up window

Hard-coded Techniques:

●

User input, including selection of icons and

custom requests were hard-coded

●

Specific places including their address,

images, and icons were also hard-coded

Why were these

required?

Wizard of Oz:

No way to integrate Google Maps into this prototype. If there is, it is something we don’t want to be testing as it would be too complicated and not our main focus

Hard-coded Techniques: It is not possible to allow for user-input in Figma. It would also be too difficult to get all possible places in the area, so we