The Soundwave music discovery app has been live on both iOS and Android for almost 2 years. I recently had the opportunity to work on UI and Interaction Design for the Soundwave Apple Watch app. With the Watch set to be released on April 24th, Soundwave will be one of the first apps available on this platform. Having also been one of the first apps available on Android Wear, it’s exciting to finally have an Apple Watch app in the pipeline!
Naturally, tackling the design and build of an app on a new platform was going to be a learning experience for our design and development teams alike, and from this experience we learned a few key things I’d like to share.
1. Learn the Guidelines
The Human Interface Guidelines for Apple Watch are pretty strict. The same could be said for the iOS guidelines, but due to it’s maturity, designers have had years to explore these guidelines and push patterns further to create unique experiences with their app and brand. For now, you will save yourself a whole load of time by getting well acquainted with Apple’s guidelines for the Watch, or you’ll finding yourself making small and time consuming changes to UI elements later. The good news is Apple released a comprehensive set of PSD’s accompanying their guidelines that will aid in the design process, available from developer resources. They are incredible for giving detailed information about button and font sizes, spacing, tables and hierarchy, and should be studied meticulously.
2. Simplify Interactions
During 2013/14, visual design changed significantly. The overly skeuomorphic look of iOS apps was dropped for a clean, flat style using colour, typography and spacing to communicate and guide experiences. It wasn’t long before designers started using custom transitions and animations to improve experiences and guide navigation though apps. Apple Watch takes this move for simplicity to a new level, focusing mainly on high level, micro interactions to complete simple tasks that take no more then a few seconds. The Watch’s limitations mean that there isn’t much room for experimenting with custom transitions between screens and states. This will most likely change as the platform matures but for now it’s a good thing! It forces designers to focus on UX and getting the user from A to B with as little friction as possible. When designing interactions for our app, we made sure that any task could be completed in no more than two taps.
3. Use Animations Effectively
Often accompanying interactions with elements of a UI are animations. Used intelligently, these can increase understanding of a particular action, influence a user to complete a task or sometimes just create a more unique and engaging experience. Recently, I’ve found myself pressing the ‘favourite’ button on Twitter more often. I’m convinced that this began as a result of the redesigned animation. Instead of a simple change in state, a little animated star now bursts onto your screen. Animations like this don’t increase the value of an action but they solidify its meaning and on some level, trigger an emotional response much like popping a roll of bubble wrap does. If it’s there, you’ll definitely pop it!
Twitter animation for favouriting a Tweet
As far as animations go on the Apple Watch, it’s down to the designer to create them. Until Apple release CoreAnimation for the Watch, developers can only work with assets provided by designers to implement animations. In my case, I designed animations using the industry standard, Adobe After Effects, to create a sequence of PNG’s, at 30fps that are triggered upon tapping a button.
Here is a quick preview of how I went about exporting the assets.
Start by selecting Composition > Add to Render Queue
Bring up the ‘Output Module Settings’ by selecting ‘Lossless’
Change the format from ‘Quicktime’ to ‘PNG Sequence’
Change the Channel from ‘RGB’ to ‘RGB + Alpha’
Finally, make sure you deselect ‘Use Comp Frame Number’ so your PNGS are named in numeric order starting from 0, instead of by where they appear on your timeline. Your Files should be named like this (filename_0, filename_1, filename_2) and so on.
4. Content Is Key
This is a phrase that gets thrown around a lot in design but when it comes to designing for Apple Watch, treat it as gospel! Looking at any app that is being previewed for the Watch now, you will notice how only important information is shown, and is available at one glance. Even apps like Instagram and Twitter which feature a lot of content and CTA’s on iPhone have been stripped back to basic images and text placing a focus on function over form. We took a similar approach with our app by displaying album artwork, artist and song names only on the app’s Timeline. The primary CTA is to tap a song you like to view where it’s being played with options to play or like the song. Everything is just a couple of taps away!
5. Create a Seamless Experience
We know Watch apps are not standalone apps. Watchkit is an extension of iOS and a Watch app should be an extension of an iOS app. Basic tasks should be completable through the Watch, with more complex tasks requiring more attention being left for the iPhone. It was important our app adhered to these principles, complimenting and extending our iOS app without trying to replace any given feature.
Notifications are a good example of this. When a user receives a song from a friend, they will be notified through the Watch with options to reply using dictation, like the song or dismiss the message. Completing heavier tasks like replying or sharing a song back will be accessible via Handoff.
Swiping up on the Handoff icon on the phone’s lock screen pushes them directly into the last received message ensuring a seamless experience.
Overall, designing for the Watch was an interesting learning experience. As users get their hands on the app, we will surely learn more about what does and doesn’t work. This will lead to more iterations, testing and more iterations again, all of which we’re looking forward to as a company designing for this exciting platform.
PS. During the process I came across these useful resources which helped me along the way:
- Watch Human Interface Guidelines
- Graphic Burger
- Graphics Fuel
- This excellent blog post by Daniel Tavares
If you enjoyed reading this post, please recommend and share it! You can also check out what else I’m up to on Dribbble.com!