Design

How designer-developer collaboration led to the AvivA app

4 min read
Christopher Gillespie
  •  Jul 25, 2017
Link copied to clipboard

What lies at the intersection of the weather, Mongolian contortion, and home movies?

Give up? It’s a quirky iOS app called AvivA. This app fills a gap in the burgeoning marketplace for looped videos, as it’s the only one that allows users to pull videos and live photos from their phones’ libraries and animate them in hypnotic fashion—forward and backward, forward and backward. (The name AvivA is a palindrome.) It was crafted by a team of 2 with rather eclectic interests.

AvivA’s Aryn Shelander and Matt Aronoff.

Aryn Shelander and Matt Aronoff, the creators, were variously described to me as “weird,” “app gurus,” and “puntastic” by friends who introduced us. They’ve recently formed their own company named Logical Animal on top of a long career designing apps for Weather Underground, The Weather Channel, and IBM.

In creating data-visualization-heavy weather apps, they pioneered an unusual app design method: Aryn, the designer, and Matt, the developer, both work on everything from start to finish. They call this “paired design and dev.”

Related: 6 tasty ways for designers and developers to collaborate better

“We realized we were doing something different when we started spending more and more time in the ideate and create phases of design than the other designers and developers. That’s how …” starts Aryn before Matt picks up, “we found that by working together in these phases we were able to build things faster and more effectively than we expected.” They have a habit of finishing each other’s sentences, I would find.

“When you design with a dev, you get to take advantage of system capabilities.”

Twitter Logo

“One of the things that’s cool about designing closely with a developer is that you get to take advantage of system capabilities where normally you have to play it safe,” continues Aryn, recalling a time that they pushed the iPhone’s processing speed limits using tools normally reserved for video games.

Although they both sit in on user interviews, they hear very different things. If a client says “we need a dashboard,” Aryn wonders why while Matt wonders how. “Honestly, to design any differently would feel like designing a building without inviting the engineers,” says Matt.

How AvivA was born

So, where did they get the idea for the video app AvivA? They came at the same problem from different angles.

By night Aryn is a Mongolian contortionist and circus acrobat. That’s not a typo. She trains 5 days a week, usually for 3 hours at a time, and performs at local venues and sometimes corporate events. To improve, she takes videos of herself, some of which she shares.

“I noticed myself and a lot of friends wanting to use Boomerang for an existing video. In Boomerang, you have to be in the app continually holding down the button at exactly the right time to capture the video. But I wanted to be in the video; it was impossible,” recalls Aryn.

She and her circus colleagues scoured the App Store. Then she saw her friends’ supremely dedicated boyfriend taking a video, putting it in iMovie, and editing it to achieve a Boomerang-like effect. She thought there had to be a better way.

Simultaneously, Matt, who is a father, was trying to wrangle his 3-year-old son and 7-year-old daughter together into a quick family video at the park. “It’s really, really difficult to get kids to do something on cue. Any parent will tell you that,” says Matt.

He too had been searching the App Store for something to loop existing videos. When Aryn brought this up with Matt, the lightbulb turned on.

Building AvivA with paired design and dev

This is the point in the interview where Aryn and Matt suddenly leaned in close like I was the one being interrogated. Bring up an app they’ve built and they grow animated—like they’re suddenly processing the world at a higher frame rate. Both quick-drew their phones to show me how AvivA was built, play-by-play, using paired design and dev.

Related: Designers with these 3 skills work better with developers

“Aryn and I sat down to make an essential features list: the app needs to loop smoothly, render quickly, and make sharing easy,” says Matt. “We wanted to see if it was technically feasible first,” adds Aryn. They didn’t get much further than that before Matt began prototyping from the development side. They built a bare-bones, interface-less version of the app which simply loaded a video and looped it from the 3-second point for 2 seconds. It worked.

It’s worth pausing here to elaborate on how much this diverges from the classic design and development method. It’s not uncommon for development teams to only receive designs after they’re fully finished—something Aryn and Matt call “just tossing it over the fence.” There’s a high premium placed on developers’ time and there’s often a great imbalance between designers and developers, with teams heavily weighted toward the latter because coding is typically so labor intensive. It’s easy to imagine that paired design and dev wouldn’t scale too well, but for a team of 2, it’s marvelously effective.

I paused the interview to take notes, but noticed them both holding their breath. I gave the signal to resume and they downshifted into rapid-fire:

Matt: “We were pretty quickly able to discover that some things we thought were important really weren’t.”

Aryn: “Animation curves. We thought it’d have to ease in and out near the edges. Slow down and speed up.”

Matt: “But after building it, it felt better without it.”

Aryn: “We also realized some things were important.”

Matt: “Cropping.”

Aryn: “Cropping was really important. People want to be able to crop their videos—they don’t necessarily want them to be square. That was a lot of math to figure out.”

My keyboard sounded like popcorn in a microwave and I was thankful no keys flew off. The transcript here skips around where I couldn’t keep up.

“Don’t leave a way for the user to get lost.”

Twitter Logo

After a few hours in the design phase with AvivA, Aryn and Matt mocked up the user interface using InVision to see if the navigation of the app made sense. They designed the golden path for their users: choose a video, loop, save, repeat. Simple.

They’d learned a lot from building big, weighty weather apps and for this one, their primary goal was restraint. “We sacrificed some options for simplicity,” said Aryn, “and left no way for the user to get lost.” Matt added, “There are only 2 reasons users get lost: either the app does something you didn’t expect, like the user’s network connection goes away, or the user does something that you didn’t expect. Both are the developer’s fault. Never blame the userTwitter Logo.”

With that parting advice, our time came to an end. AvivA is now live in the App Store and has been downloaded several thousand times.

What are people creating with AvivA? Tens of thousands of hypnotically appealing looped videos of dogs jumping, skaters falling, and of course, a good dose of Mongolian contortion and home movies of kids in the park.

Read more about building apps

Design Teardown: Paperless Post
Building an office lunch app
Taking SoulCycle mobile

Get designers and developers on the same page

When designers and devs work together, they build better products. Try out Inspect from InVision today.

Collaborate in real time on a digital whiteboard