interactive prototype Dian HartonoChris RovillosCatriona Scott Grace Jang

presenting today brian yin

problem & solution recap of lab usability test results revised ui designs demonstration of prototype tools used summary of talk

problem & solution recap of lab usability test results revised ui designs demonstration of prototype tools used summary of talk

problem

people work hard high 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 & solution recap of lab usability test results revised ui designs demonstration of prototype tools used summary of talk

problem & solution recap of lab usability test results revised ui designs demonstration of prototype tools used summary of talk

usability test results: problems solutions

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 & solution recap of lab usability test results revised ui designs demonstration of prototype tools used summary of talk

problem & solution recap of lab usability test results revised ui designs demonstration of prototype tools 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 distinguishable many 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 & solution recap of lab usability test results revised ui designs demonstration of prototype tools used summary of talk

problem & solution recap of lab usability test results revised ui designs demonstration of prototype tools used summary of talk

demonstration of prototype

problem & solution recap of lab usability test results revised ui designs demonstration of prototype tools used summary of talk

problem & solution recap of lab usability test results revised ui designs demonstration of prototype tools 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. lectures used xcode and the integrated cocoa frameworks to code storyboarding feature for ui

problem & solution recap of lab usability test results revised ui designs demonstration of prototype tools used summary of talk

problem & solution recap of lab usability test results revised ui designs demonstration of prototype tools 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