A couple of weeks ago we received a challenge to design an app for the Apple Watch, a device that we didn’t have, knew too little about, had no guidelines, didn’t even know when the launch date was, and of course our answer was…
Here’s a list of 10 things we’ve learned when making an app for the apple watch.
1. Know limitations
When working on a new platform, it’s always critical to learn what the limitations of the device are. In the case of the Apple Watch, I think its potential lies in its limitations, and we wanted to explore its limitations in our favor.
You always start by assuming things and creating hypotheses. The bad part is to start working without checking those hypotheses first. You need to read very carefully the limitations the watch has. Can this be done? How about this? You need to always test any idea you have. For example we always worked with three versions when we designed, the impossible version, the normal and the basic. So what is impossible, what’s normal and what’s basic? DUNNO, you’ll have to find out by your self. The only way was to always test alongside the dev to see what we could do. Some ideas were great but didn’t go with the guidelines, some were great but couldn’t be implemented, and others were awesome so we found a quick way to do it. Always having the idea of a MVP in front of us helped us a lot, working #lean was a must.
The limitations can be read, but you need to start coding the app to see what you can really do.
Where could we get truly, real information about the watch?
The thing here was simple: there was very little little information. There were a lot of demos, videos, posts on medium, but the truth was that they were all assumptions, hypotheses or just ideas. We read a lot, watched a lot of videos, but after seeing, reading and researching a lot, we found out that the only true information we could get was always from Apple. So we started working basing our work on the keynote presentation, the developer docs, the video from the WWDC, apples web section about the watch, etc That was the only thing we could truly look at.
In a nutshell, our recommendation is that if you’re designing for a product that isn’t out yet, use only reputable sources as the basis for your work (like the Apple keynote in this case, by the people who actually built the thing). Use the rest as reference to open your mind, but never use it as the basis.
3. What is an apple watch?
Apple describes Watch as Personal, Holistic, and Lightweight.
- Personal means worn, as in “the wearer wears the watch”, DUH! but a new concept comes to mind: Apple says the “wearer” instead of the “user”. No other apple device has been worn, so the term “wearer” is what really changes this device, which enables new types of communication.
- Holistic means a deeper connection, the convergence of physical and digital. No more than that!
- Lightweight means simple, quick, easy and minimal. Save time, save battery, save life :)
Watches have been used for centuries to simply keep time. It’s something that you don’t constantly look at and the Apple Watch is meant to keep it that way.
It’s not a substitute for your smartphone, it’s small companion to enhance your experience and keep you from pulling out your phone all the time. A companion instead of a replacement.
4. What’s New?
Being a user experience designer, and used to working with devices, you normally start laying out similarities with other things. This is great, but if you really want to get to know the device you need to read the guidelines. So what’s new you ask?
Here’s the list:
- Glances are collection of relevant app information from the wearers favorite app. A glance is a quick view of your app’s most important moment with a page based navigation, and that’s the only action you can do.
- Layout is new because we have a very small screen. There’s just two watch sizes with a resolution of 312x390 on the 42mm version and 272x340 on the 38mm version. There isn’t much space to play around with.
- Contextual menu is a menu made to give you secondary actions.
- Color & Typography is also new, with a new typeface called “San Francisco”, which is specially designed for small devices and color is the meant to be used very little. Black has been selected for two reasons: one is battery saving and the other is so the outside bezel doesn’t look weird.
- Animations are meant to be sparse and there few things we can do on the watch, so be careful here.
- App Icons are now rounded, and you have to export them in different sizes.
- Only swipes, presses and force tap. No pinching allowed, and your fingers wouldn’t fit anyway. Force tap is the new key experience used for secondary actions. This is a pressure sensitive action, very simple but useful.
This are the main new features to have in mind, and there probably will be a lot more by the time I’ve finished writing this article :P
Check the User Documentation over here.
5. User stories
This is something we do with a normal apps. We set out to learn how people interact with an app by interviewing people and learning how and when they use the app. This is always extremely helpful for discovering new features, fixing complex UX problems and really understanding the users. OK, GOT IT! But what happens with the watch? How is it going to be used, who can you interview? DUNNO
This is where you’re going to have to base yourself in assumptions and hypotheses, look what we did very shortly:
Use it if there is time, if not, move on in the MVP stage
It seems silly for me to mention this, but… always have a plan. Know what to do first, what to do next and what the MVP of the app needs to do and what it does not. Keep your creativity from exploding, and stick to the roadmap!
7. Storyboard - Prototyping
Normally we use a lot of applications for creating prototypes, like flinto, invision, marvel and sometimes more complex ones like framer, origami, etc.
What to do, what to do? Simple, for quick mockups use flinto, invision or marvel, use the center of the screen, since that’s all you got to test in a quick prototype. Since there isn’t a lot of animation just linking the screens is fine.
But a quick reminder here: since there there were very few screens in our app, it wasn’t even necessary. So we hopped on to making UX prototypes in after effects, to see how they would interact, and how the small animations that could be made. We later exported some of the assets directly from there. Here’s an example of what we mean:
8. Remember it's beta
Remember to Iterate, iterate, iterate, and iterate. I’ll never get tired of saying this. Never fall in love with anything, everything is disposable, working lean is a must. This is just a simple reminder, but new things will appear constantly. Apple updates the SDKs and the guidelines all the time so keep in mind that you need to read everything they say and keep updated with the SDK and any information new information Apple can give you. Things can be changed in seconds, and designs & code can be thrown away constantly. Keep your chin up!
9. Know the dates
This is also a simple reminder, but the dates are sometimes postponed. Sometimes it’s a mystery when the actual launch date is. For example, the watch was set for March, and then they postponed it to April. But the devs needed to have the app finished a few weeks before the launch so it could be reviewed by the app store.
So we knew at the time we had to have 10 days before the launch date thanks to http://appreviewtimes.com/. If anything is postponed, it’s a gift. Stay with the first dates you set. The gift is you have more time to work on the app, review things, fix things, check if things are working but do not extend the milestones you already set.
10. Share it with the community
Last but not least, since back in the first point of this post I said there is very little information from the source.Share all the experience you had in the progress of building the app. The only hope for building better apps is by sharing our knowledge and experience with the community.
This is just something I would like to happen, but all knowledge would have to come through experience. Hypotheses, assumptions or predictions aren’t facts. They might be right, but there’s always a chance that they’re not. It’s a risk I rather not live with. Use facts from your experience, good sources and your head. That would be the perfect formula :)
After having this experience, designing blindly and all, I think you should really give a try. It’s an awesome experience that the whole team enjoyed. Special thanks to the team behind this experience: @heyimjuani, our awesome Lead UX Designer and @sof_andrade, our magical designer & mascot.