interactive prototype

interactive prototype

Dian Hartono Chris Rovillos Catriona Scott Grace Jang

presenting today

brian yin

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

problem

people work hardhigh expectations

competitive environment

long hours fatigue

lack of social time

burnout

overworked employees=

bad for employers

solution

balancer is a mobile app that helps workers

achieve a healthy work-life balance

encourages the creation of goals to

achieve balance

goals are achieved through suggested or

custom steps

integrates with company, friend and personal activities

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

usability test results:problemssolutions

problem 1:participants didn't know if

they are adding a goal or an activity.

solution:increase differentiation of

goals and activities

problem 2:participants weren't able to locate the invitations bar,

thus couldn’t complete the moderate task

solution:make the invitations bar

more apparent

problem 3:participants didn't

understand what each "+" sign meant throughout the

interface.

solution:have different wording,

symbol and color to help users differentiate between adding a goal and activities.

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

revised ui designs

activities as “steps” towards goals

rationale:previously called activities

People have preconceptions for “goals” and “activities”

activities <-> goals?Focus on goals, and view

activities as steps to achieve a goal

increase in “invitations” bar visibility

rationale:we believe having it the

same color as the top bar made it significantly less

distinguishablemany participants missed

the invitations bar.

differentiation between “steps” and “goals”

rationale:participants weren’t able to

differentiate between “goals” and “activities”

before vs. after

replaced multiple “+” signs with descriptive

buttons

rationale:in previous UIs the “+” sign

was used as buttons for multiple actions

participants were confused on what each “+” sign meant

goals page redesigned to emphasize “goals” <->

“steps “

rationale:to help users understand that “steps” are part of

“goals”this concept is reinforced by

the and text presentation

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

demonstration of prototype

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

we divided our team into two groups: ui design

and coding implementation

ui design:used photoshop to improve the app’s overall user experience

and graphic designs

coding implementation:watched the stanford IOS app

dev. lecturesused xcode and the integrated

cocoa frameworks to codestoryboarding feature for ui

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

problem & solutionrecap of lab usability test

resultsrevised ui designs

demonstration of prototypetools used

summary of talk

summary:1. activities -> steps

2. Several new ui design to improve user experience

-more descriptive button- color coding and text presentation- minor changes (invitations bar

goals)3. photoshop to improve user

experience 4. used xcode to make our prototype