Medium-fi Prototype 1. Introduction Value Proposition and - PowerPoint PPT Presentation

Medium-fi Prototype

1. Introduction Value Proposition and Problem/Solution Overview

Value Proposition 3 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 effjciently, but also to get 4 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 Simple, Medium, Complex

Three Tasks Simple Medium Complex Find a Report the Suggest a 6 place that current change in the falls under environment current your in the area environment conditions

This was done Changes to Tasks because we thought it was best to separate the 1. Removed previous complex task manager’s side to a different app to of suggesting a change from avoid confusion 7 manager’s POV between parties. 2. Made medium task reporting the For the purposes of this project, we will current environment only build the 3. Made complex task suggesting a consumer side of change in the current the product. environment

3. Design Changes Updated sketches and rationale

Full sketch of the new prototype 9

Design Change 1 Onboarding phase

After sketch of onboarding 11

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 12 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 Changing sliders to icons

Before 14

After 15

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. 16 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 Connecting the three tasks

Before 18

After 19

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 20 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 flows of the prototype

Task Flow 1 Find a place that falls under your condition (Two ways to do this will be shown)

Onboarding Phase

End of Start Onboarding Start of User can pick their Next page when After selecting all onboarding, users settings then users pick more categories, they swipe to next swipe settings can swipe to last screens screen and press “Finish” 24

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

Way #2 Google Maps Main Menu Detailed View Shows a list of Map and more If “Directions” is places based on information are pressed, prompts your settings Google Maps shown 26

Task Flow 2 Report the current environment in the area (Two ways to do this will be shown)

Report Main Menu Success Way #1 Main Menu Page “Directions” button Screen to show If the x button is Back to will change to that the settings selected then main-menu “Check In” if have been press “Finish,” it distance to a place recorded will complete and is 0 mi send the report 28

Way #2 Main Menu Detailed View Success Main Menu Report Page Screen to show Place is selected “Directions” button If the x button is Back to that the settings will change to selected then to get more main-menu have been “Check In” if press “Finish,” it information about recorded distance to a place will complete and it is 0 mi send the report 29

Task Flow 3 Suggest a change in the current environment

Report Suggest Main Menu Page Page If the check button Users can slide the “Suggest” button is When “Done” is is selected then volume or pressed to submit pressed, brings press “Finish,” it brightness or make the request user back to main will bring to a specific request menu Suggest page 31

4. Prototype Overview Figma Jukebox prototype

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 ● Buttons took forever to build as the whole screen had to be duplicated ● 33

Why were these Limitations and Tradeoffs required? Our main focus right now All interactions were done with click ● is more on the visual interactions to simplify the prototype design and user Changes, such as, onboarding preferences ● experience of the app. 34 The usability and were not saved because no type of data implementation will be structure was used fixed at a later time.

Why were these required? Wizard of Oz/Hard-coding Wizard of Oz: No way to integrate Google Maps into this Wizard of Oz: prototype. If there is, it is Did not actually have Google Maps integration ● something we don’t want to be testing as it would and just displayed a pop-up window 35 be too complicated and not our main focus Hard-coded Techniques: Hard-coded Techniques: User input, including selection of icons and ● It is not possible to allow custom requests were hard-coded for user-input in Figma. It would also be too diffjcult Specific places including their address, ● to get all possible places images, and icons were also hard-coded in the area, so we hard-coded a few.