interactive prototype
description
Transcript of interactive prototype
![Page 1: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/1.jpg)
interactive prototype
Dian Hartono Chris Rovillos Catriona Scott Grace Jang
![Page 2: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/2.jpg)
presenting today
brian yin
![Page 3: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/3.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 4: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/4.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 5: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/5.jpg)
problem
![Page 6: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/6.jpg)
people work hardhigh expectations
competitive environment
![Page 7: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/7.jpg)
long hours fatigue
lack of social time
![Page 8: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/8.jpg)
burnout
![Page 9: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/9.jpg)
overworked employees=
bad for employers
![Page 10: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/10.jpg)
solution
![Page 11: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/11.jpg)
![Page 12: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/12.jpg)
balancer is a mobile app that helps workers
achieve a healthy work-life balance
![Page 13: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/13.jpg)
encourages the creation of goals to
achieve balance
![Page 14: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/14.jpg)
goals are achieved through suggested or
custom steps
![Page 15: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/15.jpg)
integrates with company, friend and personal activities
![Page 16: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/16.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 17: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/17.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 18: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/18.jpg)
usability test results:problemssolutions
![Page 19: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/19.jpg)
problem 1:participants didn't know if
they are adding a goal or an activity.
![Page 20: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/20.jpg)
solution:increase differentiation of
goals and activities
![Page 21: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/21.jpg)
problem 2:participants weren't able to locate the invitations bar,
thus couldn’t complete the moderate task
![Page 22: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/22.jpg)
solution:make the invitations bar
more apparent
![Page 23: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/23.jpg)
problem 3:participants didn't
understand what each "+" sign meant throughout the
interface.
![Page 24: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/24.jpg)
solution:have different wording,
symbol and color to help users differentiate between adding a goal and activities.
![Page 25: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/25.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 26: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/26.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 27: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/27.jpg)
revised ui designs
![Page 28: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/28.jpg)
activities as “steps” towards goals
![Page 29: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/29.jpg)
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
![Page 30: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/30.jpg)
increase in “invitations” bar visibility
![Page 31: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/31.jpg)
rationale:we believe having it the
same color as the top bar made it significantly less
distinguishablemany participants missed
the invitations bar.
![Page 32: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/32.jpg)
differentiation between “steps” and “goals”
![Page 33: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/33.jpg)
rationale:participants weren’t able to
differentiate between “goals” and “activities”
![Page 34: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/34.jpg)
before vs. after
![Page 35: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/35.jpg)
replaced multiple “+” signs with descriptive
buttons
![Page 36: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/36.jpg)
rationale:in previous UIs the “+” sign
was used as buttons for multiple actions
participants were confused on what each “+” sign meant
![Page 37: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/37.jpg)
goals page redesigned to emphasize “goals” <->
“steps “
![Page 38: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/38.jpg)
rationale:to help users understand that “steps” are part of
“goals”this concept is reinforced by
the and text presentation
![Page 39: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/39.jpg)
![Page 40: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/40.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 41: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/41.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 42: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/42.jpg)
demonstration of prototype
![Page 43: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/43.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 44: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/44.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 45: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/45.jpg)
we divided our team into two groups: ui design
and coding implementation
![Page 46: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/46.jpg)
ui design:used photoshop to improve the app’s overall user experience
and graphic designs
![Page 47: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/47.jpg)
coding implementation:watched the stanford IOS app
dev. lecturesused xcode and the integrated
cocoa frameworks to codestoryboarding feature for ui
![Page 48: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/48.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 49: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/49.jpg)
problem & solutionrecap of lab usability test
resultsrevised ui designs
demonstration of prototypetools used
summary of talk
![Page 50: interactive prototype](https://reader036.fdocuments.net/reader036/viewer/2022062301/56815f13550346895dcddac5/html5/thumbnails/50.jpg)
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