34
BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User Research

BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

BALANCEA TIME MANAGEMENT TOOL

Ryan Parsons – Project ManagerChad Price – UI DesignerJia Reese – UI IllustratorAlex Vassallo – User Research

Page 2: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

How do you spend your time?

● How long do you stay at school each week?

● How many hours do you sleep per day?

● How often do you hang out with friends?

Page 3: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Overall Problem

It’s hard to properly balance our time and achieve our goals.

Challenges:

● Knowing how much time you spend on activities● Planning what to do with free time● Sticking to your plans

Page 4: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Initial Paper Prototype

Page 5: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #1: Change the category of current activity

Initial lock screen

Step #1: Swipe right to unlock

Page 6: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #1: Change the category of current activity

Home screen

Step #2: Press “Change Category”

Note: Home and Menu buttons

Page 7: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #1: Change the category of current activity

Categories screen

Step #3: Select new category

Page 8: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #1: Change the category of current activity

Home screen

Finished: Category changed

Page 9: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #2: See the ideal balance and current balances

Menu screen

Step #1: Select “Ideal Balance”

Page 10: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #2: See the ideal balance and current balances

Ideal Balance screen

Step #2: View your ideal balance

Page 11: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #2: See the ideal balance and current balances

Menu screen

Step #3: Return to menu screen

Page 12: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #2: See the ideal balance and current balances

Menu screen

Step #4: Select “Report”

Page 13: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #2: See the ideal balance and current balances

Menu screen

Finished: View current balances

Note: Dropdown menus to change timeframe and display type

Page 14: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Testing: Heuristic Evaluations

● Problems with pie chart displays:○ They don’t show exact percentages.○ Labeling slices is difficult.

● No way to add new notifications.● No snooze option for alarms.● Missing “undo”:

○ To re-enable dismissed notifications.○ To cancel changing the category.

Page 15: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Testing: Usability Tests

Participants:

● Mary, College Student○ Balancing study and personal time.

● Jerry, Family Man○ Balancing work, family, and personal time.

● Ryan, Data Visualization Researcher○ Balancing study and research.

Page 16: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Testing: Results

● It was difficult to move between screens with buttons.○ We made swiping right go back to the menu.○ We made the menu contiguous.

Page 17: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Testing: Results

● Drop down menu targets were slow and imprecise.○ We replaced drop down menus with directional swipes.

Page 18: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Testing: Results

● Users expected more functionality from the schedule screen.○ We allowed users to change the categories of future activities.○ We added an alarm button to each menu item.

Page 19: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Final Paper Prototype

Page 20: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #1: Change the category of current activity

Initial lock screen

Step #1: Swipe right to unlock

Page 21: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #1: Change the category of current activity

Home screen

Step #2: Press category to change

Note: Dots for navigation - indicate swiping gesture

Page 22: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #1: Change the category of current activity

Categories screen

Step #3: Select new category

Note: Current category indicator

Page 23: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #1: Change the category of current activity

Home screen

Finished: Category changed

Page 24: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #2: See the ideal balance compare with current balance

Menu screen

Step #1: Select “Ideal Balance”

Page 25: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #2: See the ideal balance compare with current balance

Ideal Balance screen

Step #2: Swipe left to view to current balance

Page 26: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #2: See the ideal balance compare with current balance

Records screen

Step #3: Swipe right to return to ideal balance

Page 27: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Task #2: See the ideal balance compare with current balance

Ideal Balance screen

Finished: Can swipe back and forth to compare

Page 28: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Digital Mockup

Sony SmartWatch 3 SWR50

Page 29: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Change the Category of Your Current Activity

Categories Screen:Select a different category.

Home Screen:Tap the category to change it.

Home Screen:New category is displayed.

Page 30: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Compare Current Records With Your Ideal Balance

Ideal Balance Screen:Swipe left to compare

with records.

Home Screen:Tap ideal balance button.

Records Screen:Swipe right to go back to ideal

balance.

Page 31: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Set Reminders to Change Tasks

Schedule Screen:Tap bell icons totoggle alarms.

Alarms Screen:Tap “x” to disable alarms,

“+” to re-enable.

Page 32: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Lessons to Remember and Share

● Be wary of feature creep. Ask yourself how each feature solves one of your user’s problems.

● Don’t assume that standard solutions from one design will work elsewhere.○ Drop down menus○ Pie charts

Page 33: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

Lessons to Remember and Share

● Pay attention to what your users are familiar with, and what functionality they expect.○ Swiping on smartphones○ Tapping on the schedule

Page 34: BALANCE - courses.cs.washington.edu...BALANCE A TIME MANAGEMENT TOOL Ryan Parsons – Project Manager Chad Price – UI Designer Jia Reese – UI Illustrator Alex Vassallo – User

BALANCE