Free Box – Now for Apple Watch!

A New Platform

For the next iteration of our final project, we were asked to reimagine functionality within our apps-in-progress for either an Apple Watch or AppleTV experience. Alternatively, we could explore accessibility functionality for the app on the phone (e.g. for those with vision or hearing impairment).

Given the purpose of FreeBox, to help students discover and share extra project materials on campus, we thought that the Apple TV experience would be irrelevant. Since the freeboxes themselves are located on campus, and half of the app’s core functionality is to show live streams of the different boxes, allowing people to see what is available and head over to check it out, we thought there would be no reason to be able to want to see it in your TV at home. Makes it kind of hard to get to the nearest box when something cool is added.

Given that this part of the apps functionality is both in the spirit of serendipitous discovery and that it has a certain immediacy and voyeurism about it – you are keeping an eye on the freebox and want to be the first to get there when something you want is added – we thought that it would fit nicely with Apple Watch.

Apple’s Human Interface Guidelines specify that Apple Watch app experiences should be lightweight interactions that support personal communication and maintain a holistic design (using both the watches hardware and touch interface as a seamless UI). After learning about these specifications – neither Sneha or I have ever used an Apple Watch – we both thought that it sounded like a perfect fit for Free Box, but also inspired us to make a couple of quick changes to the actual app to better support the watch experience – and app experience overall.

  1. Add a “Pin to Top” function for messages. This will allow you to tag a message to that appears with a pin badge and is sticky to the top of your inbox. This will allow you to quickly save messages for later with the watch app.
  2. Push Button Update Alerts: We had before discussed our idea to include one small on-site interactions near the actual freebox. We really want the whole act of leaving things at the Freebox to be as easy as possible, but we realized that people needed to see what the table looked like on the stream ( to arrange items in right way) and a way to update others that something was added.

Without this functionality, it might be a little too abstract for people to check a live stream of the Freebox, and a bit boring. With this solution, people can also subscribe to location alerts – something users rated highly desirable during our user testing surveys – and be updated when the freebox there has been updated. This also allows us to connect the Apple Watch to the app in a really concrete way.

The purpose of Freebox Apple Watch is to bring the immediacy of receiving important updates right to your wrist. Many apple watch apps use the watch interface to handle updates and quick interactions with content, and we think that this approach is best.

Core Apple Watch Functionality

Obviously, this means we need to cut down the functionality for the Apple Watch version of the app to only handle managing alerts and only really going one or two interactions deep into engaging with the content (e.g. reading and responding to a message)

With this in mind, we cut down the functionality for the watch to he following:

  • App Itself – Will show a stream of subscribed alerts for different types of app updates. Can scroll through and check.
  • Alerts – 3 Types
    • Freebox Location Updated – Activated when on-site push button hit and user is subscribed to receive location updates for that box
    • Message Replies – Activated when user receives a reply to a message board post, or to one of the messages they sent to another user
    • Tagged/Subscribed Material Updated – Activated when a post that has a certain material tagged (e.g. electronics, fabric, wood etc.) is added to the message board

Testing The App Out

After making a couple of screens with how we thought the alerts should look, we were lucky enough to have a friend who owned an Apple Watch take a look and let us video her getting different types of updates and responding to messages. We learned that updates have a really cool animation where the app logo pops up then fades back into the message detail view that comes up after. We also realized that you have to use the crown on the watch (the circle on the right side) to go back to the watch home screen, or to exit the app when finished. Finally, we learned that you can swipe on the screen to bring up contextual menus to quickly edit/dismiss messages.

With these insights in mind, we redesigned our screens and started the interactive prototype on InVision (wanted to mix it up for once).

Pictures From App

This slideshow requires JavaScript.

Feedback from Class & Changes

We presented our Apple Watch app to class last week and demoed how the app could be accessed from the home screen, as well as getting an alert come in. We had overall positive feedback however, we did make some mistakes with how apple watch apps can work in general and conventions/restrictions for in-app designs (logos, colors etc.)

  • Can’t Have Different Alert Colors – Must be App Icon
  • Video is Good to go! Can show the video on the watch, as well as opening up on the phone (will improve handoff to phone)
  • Contextual dismiss menu for messages is okay to have as back-up, but still need dismiss button to be there
  • Can fit lines of text in messages

After this feedback we fixed up the app and re-did the screens to incorporate the new changes.

Check out the new screens and our interactive prototype below.

New Pictures From App

This slideshow requires JavaScript.

Interactive Prototype (Invision) – Most Final Version

Here is the most up to date version of our interactive prototype on InVision. We will text this with one or two apple watch users to make sure the changes work with the platform, and demo next week as part of our connected experience for our final.

//invis.io/GD78L6FVF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s