interactive prototype

1. interactive prototype Dian Hartono Chris RovillosCatriona Scott Grace Jang

2. presenting today brian yin

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

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

5. problem

6. people work hard high expectations competitive environment

7. long hours fatigue lack of social time

8. burnout

9. overworked employees = bad for employers

10. solution

12. balancer is a mobile app that helps workers achieve a healthy work-life balance

13. encourages the creation of goals to achieve balance

14. goals are achieved through suggested or custom steps

15. integrates with company, friend and personal activities

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

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

18. usability test results: problems solutions

19. problem 1: participants didn't know if they are adding a goal or an activity.

20. solution: increase differentiation of goals and activities

21. problem 2: participants weren't able to locate the invitations bar, thus couldn’t complete the moderate task

22. solution: make the invitations bar more apparent

23. problem 3: participants didn't understand what each "+" sign meant throughout the interface.

24. solution: have different wording, symbol and color to help users differentiate between adding a goal and activities.

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

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

27. revised ui designs

28. activities as “steps” towards goals

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

30. increase in “invitations” bar visibility

31. rationale: we believe having it the same color as the top bar made it significantly less distinguishable many participants missed the invitations bar.

32. differentiation between “steps” and “goals”

33. rationale: participants weren’t able to differentiate between “goals” and “activities”

34. before vs. after

35. replaced multiple “+” signs with descriptive buttons

36. rationale: in previous UIs the “+” sign was used as buttons for multiple actions participants were confused on what each “+” sign meant

37. goals page redesigned to emphasize “goals” <-> “steps “

38. rationale: to help users understand that “steps” are part of “goals” this concept is reinforced by the and text presentation

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

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

42. demonstration of prototype

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

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

45. we divided our team into two groups: ui design and coding implementation

46. ui design: used photoshop to improve the app’s overall user experience and graphic designs

47. coding implementation: watched the stanfordIOS app dev. lectures used xcode and the integrated cocoa frameworks to code storyboarding feature for ui

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

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

50. summary: • activities -> steps • 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