Connect
To Top

Apple Watch App Design Primer

A crash course in the design basics of of Apple’s newest device

AppleWatch

If you saw any of my social media channels earlier this week then you know that I was extremely honored and humbled to have one of an incredible small number of designers who was asked by Apple to work to bringing their iOS app to the new Apple Watch.  I also loved it because it was an incredible opportunity to highlight the incredible work that the amazing digital team at Starwood has been doing on a truly global stage.

As expected with any new Apple product or form factor, within hours of the keynote I started seeing designs from people who wanted to bring their app to Apple Watch. The problem is that they really didn’t pay attention to the screens that were shown to really understand how to design for Apple Watch so they were designing notifications thinking they were apps and all sorts of other problems. So I wanted to create a quick primer to distill what was shown in the keynote (and only what was shown in the keynote – don’t even waste your time asking me about anything else) for everyone who wants to start exploring how they would bring their app to this new platform.

 

basics

The Basics

The first thing any really astute designers or anyone who reads Fast Company will notice is that Apple Watch is using a new type face for this new smaller screen size. As Fast Company pointed out “What makes yesterday’s unveiling of the custom Apple Watch typeface so significant is that it’s the first system font Apple has designed for scratch in over twenty years.” As you would imagine and Apple has said that it was created “to maximize legibility”.

When it comes to design I’ve now been lucky enough to design apps for Apple Watch and Google Glass so I can tell you that the real key to being able to design for wearable devices is that you have to understand that this is a new form factor so users will want to use it differently from how they have used mobile apps.  You CAN NOT just take your app and shrink it down, edit out some content and think it is going to be successful. Wearables are about helping the user with that they are doing in that moment with small amounts of relevant information. The best experiences proactively give the user information using triggers like time of day, physical location or a new piece of information becoming available that the user would want to know about. It is this type of micro interaction and content curation duration that will make your app successful on Apple Watch and any wearable platform.

Apple Watch user experiences is made up of three parts – a glance, actionable notifications and the your WatchKit app. If you have designed for iOS before then you will quickly be able to understand each of these but here is a quick overview of each of them.

glance

Apple Watch Glances

Glances are one of the new things that were introduced for Apple Watch and I would say to this about them like cross between the notifications you get on your iPhone now and a today widget you have used in OS X. As you can see from the screenshots that were shown for our SPG app and the American Airlines App you can control the design and content of the glance to make them fit your brand and your content. But as the name implies, they are meant to give the user simple but relevant information at a glance. If you put in too much information or make them too complicated then the user either won’t find it useful or you will make your content so small that it won’t be readable.

notifications

Apple Watch Notifications

Apple showed off the notification system for Apple Watch as well using an example from Twitter. The key thing to notice about this is that there is a short initial notification followed by a longer notification that contains the content of the notification. In this case the short notification shows the app icon, the notification title of ‘new tweet’ and the app name. That short notification then gives way to the full notification which shows the contents of the tweet, image, authors photos, name and Twitter handle. Like with notifications in iOS 8 they are actionable so there are customizable buttons to give the user options for how to action on the notification. In this case you can either favorite the tweet or retweet it just from the notification without having to launch the app.  All notification also have a dismiss button so the user can easily dismiss the notification when they are done with it.

apps

Apple Watch Apps

If you watched the keynote then you know that as a designer, just like on other iOS devices, designing apps is where you really get have fun. It was fantastic to see what brands like Nike, Pinterest, BMW and MLB were able to do on the device. There really anything more I can add to designing apps until we all know more when the SDK is released.

Final Thought

While Apple Watch is a new platform that comes with new challenges it also shares the same challenge as designing for any mobile device where you have to make sure that the information you are presenting the experience you are creating has real value for the user. If you don’t then no matter how cool or how new the platform is, you will fall into the trap that has plagued so many digital designers where your app feels like spam or a gimmick and your app will be deleted in no time. Just like the rest of you I can’t wait till 2015 when I am able to get my hands on my own Apple Watch.

You must be logged in to post a comment Login

More in Featured

Creative Director, Designer, Brand Builder, Speaker, Podcaster, Crazy One. As a designer, I have 20+ years experience creating the strategy, concepts, and designs for award-winning integrated global advertising campaigns, building multiple global Fortune 500 brands and creating innovative digital experiences. As a leader, I have 15+ years transforming agency and client-side teams using a mix of creativity, business strategy, process and political skill to create innovative, world-class work and cultures that change industries and companies. My clients have included American Airlines, W Hotels, Disney, Citi, ExxonMobil, Acura, Old Navy, Nationwide Insurance, Verizon, Subaru and many others. My work has received over 150 international awards, my app designs have been named as one of the World’s 100 Greatest Apps, Apple has featured my work in 9 keynotes, 4 TV commercials and more.

Follow Me On Instagram

 @baitme did an incredible job on the Mr Dob by @takashipom - details are fantastic. #takashimurakami #takashimurakamiart #mrdob #complexcon #bait #arttoy #designertoys #contemporaryart #popart #vinyltoys #urbanvinyl  Love coming home after a long week to find Mr Dob by @takashipom and @baitme waiting for me. #takashimurakami #takashimurakamiart #mrdob #complexcon #bait #arttoy #designertoys #contemporaryart #popart #vinyltoys #urbanvinyl  More in love with our @obeygiant from @galerie_itinerrance more every day. #streerart #shepardfairey #shepardfaireyart #shepardfaireyobey #streetartist #globe #earthcrisis  Feels a bit like Xmas today as our Earth Chrisis @obeygiant pieces and more showed up from @galerie_itinerrance in Paris. #obeygiant #obey #shepardfairey #streetartist #streetart #streetartparis #galerieitinerrance  Briefcase 2.0 thanks to @louisvuitton Avenue champ de Elysees #apolloalldaybag #louisvuitton #louisvuittonmonogram #monogrameclipse #lv #design #creativedirector
 Hello my name is Steve Gates and I have a Mr Dob by @takashipom problem. #takashimurakami #takashimurakamiart #mrdob #complexcon #bait #arttoy #designertoys #contemporaryart #popart #vinyltoys #urbanvinyl  Spending a lot of time away from home lately so looking forward to getting home tomorrow to see these two crazy ones. #NationalPuppyDay #pugs #pugsofinstagram #pug #puglife  Brunch with @thechiclibrary before I hit the road again #chic #tomford @blackscale #blackscale @tomford #brunch #fashion  I always love the unwritten rule in Barcelona where you can create street art on doors and shutters but not the actual buildings. #streetartbarcelona #barcelona #streetartofficial #streetart #streetartist  Another preview of our commission from @tristaneaton and based on the 'crazy' in letterpress type and archery target you should know this is my side of the piece. #tristaneaton #tristaneatonart #tristaneatonmural #streetart #streetartist #streetartofficial
 Everything is better on pairs so we got the crazy limited edition Gold Mr Dob by @takashipom and @baitme too. #takashimurakami #takashimurakamiart #mrdob #complexcon #bait #arttoy #designertoys #contemporaryart #popart #vinyltoys #urbanvinyl  Another preview of our @tristaneaton commission. Full photos coming soon #tristaneaton #tristaneatonart #tristaneatonmural #streetart #streetartist #streetartofficial  The @obeygiant globe is a limited edition replica of the one which hung from the Eiffel Tower last year and was made by the worlds oldest globe maker. #galerieitinerrance #streetartparis #streetart #streetartist #shepardfairey #obeygiant #obey @galerie_itinerrance  My kind of street art from the Gothic Quarter in Barcelona #streetart #streetartist #streetartofficial #barcelona #streetartbarcelona #hola #skull  Our abdominal snow Pug loves the weather and the 16" of snow at our house north of NYC which feels more like north of the wall today. #pug #pugs #pugsofinstagram #nyc #westchester #snow #northofthewall

Copyright © 2015 Stephen Gates