Beyond An Apple Design Award

How Zova is using Framer to reimagine their Apple TV fitness app

Would you work out more if you could do it in the comfort of your own home? Through their immersive HD content and suite of connected apps, Zova, is proving just that. Fresh off winning a 2016 Apple Design Award, this six-person Aussie fitness startup is now going for gold with a complete redesign of their Apple TV app. We sat down with David Fumberger, the company’s sole designer, to chat about how Framer fits into his workflow.

Hi David! Thanks for talking to us all the way from Melbourne! Can you tell us a little bit about your journey as a designer and how you got to Zova?

Actually, I started my career in the early 2000s as a developer rather than a designer, working for a medium-sized corporation here in Australia. It was a great place to ground my technical skills, but over time I found myself becoming less interested in the details of the technical implementation and more intrigued by UI and product design. When the iPhone and the App Store were launched, I saw the platform as a great opportunity to build and design my own products. I took the leap, went out on my own and founded an app company called Collect3. There I worked as both developer and designer, and one of the more successful products that I designed during this period was a music app called Beatwave. In about 2014 I co-founded a company called Nesk, which lets people rent co-working spaces by the hour in Australia. Then in 2015 I started working with Zova as their lead designer, initially to develop Zova for Apple TV. A year later, we were lucky enough to win an Apple Design Award.

Congratulations! So, considering Zova was one of the pioneering Apple TV fitness apps, how does it maintain its edge?

Zova is a smart personal fitness app that recommends workouts, runs, walks and tracks your activity. We aim to make fitness simple by giving you smart recommendations based on your preferences and feedback. Design is a big part of this, letting you get to your workout as quick and easily as possible. We also want to make sure the design delivers an experience you want to come back to, as some days exercise can be hard enough without an app getting in the way.

Walk us through a a typical design workflow for you.

We’ve got a small team here at Zova. There’s two founders, a designer (me) and three developers. Typically the design process begins with a discussion between myself and the team on the goals and outcomes of a new feature. Then, I’ll start with a bunch of iterations and options within Sketch to try and pencil in an initial direction. Once we agree on where it’s headed, I move pretty quickly to Framer. In the early stage we typically use it for testing flow and possibly to gather early impressions from people outside of the team.

If the initial prototype receives strong feedback, we’ll move on to a more polished prototype. Depending on the feature, it could involve looking much closer at transitions, interactions or animations.

Throughout the process, Framer lets us easily create many variations and alternatives, whether it’s just duplicating the project and tweaking it, or using data in the code to drive different layouts and options.

I work remote from the rest of the team, so being able to share an idea, put in someone’s hand through Framer Cloud and receive immediate feedback over a FaceTime call has been vital to our process.

You also told us that the team recently used Framer to redesign the Apple TV app experience. Why the need for a makeover?

The primary goal for the redesign of the Apple TV app was to bring it to parity with Zova 2.0. The first TV app was designed around the early Zova experience of giving the user a large library of choices and letting them explore and choose what they considered was best for them. But Zova 2.0’s focus revolved around smart, guided choice for the user. So we needed to deliver an experience that, like the iOS version, gives you clear recommendations, but with the option to find alternatives if the suggestions weren’t quite right.

Framer was involved through the entire redesign process of the Apple TV product. Because we were moving to a very different type of experience from 1.0, we were essentially starting from scratch and needed to explore as many ideas as we could. I had initially designed a UI in Sketch that looked promising, carrying over some very similar concepts from the iOS version.

But it wasn’t until prototyping this in Framer that it the design was revealed to have a few issues when in the context of tvOS. Ultimately, it didn’t feel right.

Being able to cheaply explore this saved us from potentially heading in the wrong direction and only discovering the issues after they’d been implemented in the production code.

It was also used to design the transition animations between screens, as well as the parallax and blurring effects on the home screen. The background of the home screen is made up of multiple layers, and as the user scrolls through, these layers are shifted to create a parallax effect while the background layer is blurred to give a shifting sense of depth. This effect was actually very quick to do within Framer, but quite difficult to execute on in the final implementation, involving a custom Metal shader written by our developer (thanks Chris!).

Without being able to experiment in Framer, we would probably never have thought to go through with the effort to achieve such an effect. Having the new version of the TV app as a polished prototype also meant we could demo and solicit feedback from various other stakeholders even before the actual app was implemented, which was very valuable to the team.

As someone with a developer background, programming is second nature to you. Why do you think it’s equally as important for designers to learn code?

Even though I was a developer for many years, integrating code into my design workflow came at a much later stage. To a certain extent, I’ve used code to iterate on my own products, but it wasn’t until I was in a more distinct design role at Zova that I looked how it would benefit that process.

When we started Zova 2.0 , I was evaluating a number of prototyping / workflow tools to allow us to explore flows and interactions. These were all primarily UI / timeline based, which allowed quick exploration of ideas. But I found I’d quickly hit a wall if I wanted to try ideas that the tool didn’t support. I found the tools also struggled if you wanted to make larger changes, often involving a lot of dragging around or re-creation of large chunks of the prototype.

I tried Framer and found that because I was given the building blocks without constraints, it enabled a much quicker process of exploration.

Follow David Fumberger on Twitter or Medium where he talks about all things fitness and tech. Zova is available on the App Store and compatible with iPhone, iPod Touch, Apple Watch and Apple TV. If you or your company are doing innovative work with Framer, talk to us about getting featured on Medium!