Designing the UX and UI of Squeak was a really great experience, there were many challenges to tackle and fun things to do with it. I was given total creative freedom by Jeunessa, the developer of the app, to explore different interactions that were out of the box from the default ones that Xcode includes.
Jeunessa did a great job with her initial prototype, but she still gave me the chance to add features I wanted to include, and showed a lot of enthusiasm when I pitched different interactions to the ones she originally programmed.
Here are some of my favourite features, and a little of the process and reasons behind the decisions we made to make them happen.
The time dial
The coolest watch I've ever owned was a Minnie Mouse one that I bought during a trip to Disney World when I was 6 years old. I spent almost all my shopping money on it, which meant buying one big thing instead of a ton of tiny stuff. That was a very important commitment to make, but in my head it was all worth it.
My watch was never on time because I really enjoyed moving Minnie's arms by twisting the crown, it gave me minutes of precious entertainment and rejoice – If only I were able to actually move the arms with my finger! I used to think.
That's pretty much the inspiration behind the time dial in Squeak. It's my 6-year-old self wanting to manipulate a clock's hands.
Initially, the time was only displayed in the center of the dial, however I quickly noticed that the time was covered by my finger while sliding it to set it up. We solved this issue by allowing you to see the time at the top of the dial only while you're setting it up. Also, the time is initially defaulted to the current time when you open that screen, and the color of the hands changes for AM and PM. We also left a "ghost" hand in that initial position, this is particularly useful when you come back to that break to edit.
The early prototype included suggestions that were mostly physical activities, and even though Squeak's objective is to remind people to step away from their desks, I thought that including activities that weren't necessarily physical could still motivate someone to take a break.
That is why we included a bunch of other activities that cover things like food, drinks, entertainment, and social activities. And even though these activities are not labeled as physical, for some of them people would still have to step away from their desks and move to do them, like getting tea, taking a water cooler break, or calling mom.
Squeak is first and foremost about encouraging people to move their butts off their chairs. However, we also considered some activities that serve the purpose of clearing off your head, such as reading the newspaper, checking out twitter, texting a loved one, etc.
All the different types of breaks are divided in 4 general categories: energy is for physical breaks, mood is for "feel good" breaks, munch is for food breaks, and chill is for relaxation breaks.
By showing those categories in the stats section, people can keep track of the type of activities they are taking. If someone is just taking Chill breaks, that information might be useful to know, so next time they can choose going for a walk instead.
Points and Daily Goal
Once that we included different types of breaks, we decided we wanted to give each break a point value based on how physical they are or the amount of effort they take. Physical activities hold the greatest point values in the app, whereas entertainment activities that are almost effortless, like checking Twitter, are less valuable.
This way the points system also helps tracking the quality and not just the quantity of the breaks taken. If we had based the daily goal solely on the number of breaks, a person could take 5 Twitter breaks a day and still reach a goal. We really wanted to enable people to use the daily goal as a way to challenge themselves and earn more points by doing a variety of activities that are physical or require more effort.
You snooze, you lose!
So no snooze button? - nope, and this was on purpose. I didn't want to include a snooze button because that's just giving people the opportunity to postpone taking a break, which would eliminate the whole objective of Squeak. If, for some reason, you can't take a break right at the moment of the reminder, Squeak will continue to be active in your notification center and will show your missed breaks when you turn on the screen of your phone. You will be able to see stacked break notifications if you skipped more than one.
From the locked screen, all you need to do is slide your finger in Squeak's notification and it will take you directly to the break suggestions.
Designing the UX and UI for Squeak was so much fun, not only because of the challenge of making an existing prototype better, but also because I knew Jeunessa would go the extra mile to implement my ideas, and that was invaluable to me.
Thank you for reading this post, I hope you find Squeak easy and fun to use. If you have any feedback, please feel free to leave me a comment here or shoot me an email at anadaniela.pichardo[at]gmail.com