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

▶
medium fi prototype 1 introduction
SMART_READER_LITE
LIVE PREVIEW

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

Nov 14, 2022 421 likes •790 views

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.

slide-1
SLIDE 1

Medium-fi Prototype

slide-2
SLIDE 2

1. Introduction

Value Proposition and Problem/Solution Overview

slide-3
SLIDE 3

Value Proposition

Slide into your perfect ambience

3

slide-4
SLIDE 4

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

  • 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.

4

slide-5
SLIDE 5

2. Task Flows

Simple, Medium, Complex

slide-6
SLIDE 6

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

6

slide-7
SLIDE 7

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

  • nly build the

consumer side of the product.

  • 1. Removed previous complex task
  • f 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 environment

slide-8
SLIDE 8

3. Design Changes

Updated sketches and rationale

slide-9
SLIDE 9

9

Full sketch of the new prototype

slide-10
SLIDE 10

Design Change 1

Onboarding phase

slide-11
SLIDE 11

11

After sketch of onboarding

slide-12
SLIDE 12

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

  • nboard 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

  • ur 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.

slide-13
SLIDE 13

Design Change 2

Changing sliders to icons

slide-14
SLIDE 14

14

Before

slide-15
SLIDE 15

15

After

slide-16
SLIDE 16

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.

slide-17
SLIDE 17

Design Change 3

Connecting the three tasks

slide-18
SLIDE 18

18

Before

slide-19
SLIDE 19

19

After

slide-20
SLIDE 20

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

  • f 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.

slide-21
SLIDE 21

4. Medium-fi Prototype

Task flows of the prototype

slide-22
SLIDE 22

Task Flow 1

Find a place that falls under your condition

(Two ways to do this will be shown)

slide-23
SLIDE 23

Onboarding Phase

slide-24
SLIDE 24

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

  • nboarding, users

swipe to next screens

slide-25
SLIDE 25

25

Main Menu Google Maps

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

Way #1

slide-26
SLIDE 26

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

Detailed View

slide-27
SLIDE 27

Task Flow 2

Report the current environment in the area

(Two ways to do this will be shown)

slide-28
SLIDE 28

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 Way #1

slide-29
SLIDE 29

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

slide-30
SLIDE 30

Task Flow 3

Suggest a change in the current environment

slide-31
SLIDE 31

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

slide-32
SLIDE 32

4. Prototype Overview

Figma Jukebox prototype

slide-33
SLIDE 33

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
  • Buttons took forever to build as the whole screen had to be duplicated
slide-34
SLIDE 34

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.

slide-35
SLIDE 35

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 diffjcult to get all possible places in the area, so we hard-coded a few.