Building Echo: How We Approached Apple TV App Design
If you have been following along with our blog post series on Apple TV development, you know a little bit about the inspiration behind our new game Echo.
Now it’s time to take a dive in the deep end to learn how we approached Apple TV app design with Echo, and why we did what we did. This design story started when our team was challenged with this requirement: create a brand new app, on a brand new platform, in three weeks. AND, the app not only had to be completed, but submitted, approved, and live in the App Store the first day the new Apple TV hit store shelves.
BUILDING ECHO: A blog series on developing for the Apple TV
Introducing Echo: A First Foray into Apple TV App Development- How We Approached Design on the Apple TV
- From iOS to tvOS: The Key Differences
- The New Siri Remote: What Developers Need to Know
- How to Succeed (or Fail) with Your Apple TV App Release Process
These past few weeks have been fun, exciting, and a tiny bit stressful. But at the end of it, we shipped a game that we are all excited to play — and proud to put the ArcTouch name on. The process was agile and iterative, through and through, as our design team worked side by side with development and was part of every daily stand-up meeting.
The three app design principles for Echo
At the beginning, our designers aligned the team on these three principles for the game, which we held steadfastly to throughout our design process:
- Simple — Does the user know how to play? If no, can they easily learn? Is navigation clear and intuitive? Can the user start the game or instructions in less than two clicks, swipes, or taps?
- United — Does the experience offer the same connectedness you feel when playing some of the classic memory and party games many of us grew up with in the 90s? What does the game look like, sound like, feel like? Are all of the elements cohesive?
- Enjoyable — Do I want to keep playing? Is it challenging enough to motivate me to do better? Can the game be enjoyed by yourself or with a group of people. Could there be any additional party/social element (eg. a drinking game) to this? (Isn’t this a question you always ask when you design a game?)
Keeping it simple (stupid)
From the onset of the project, we knew the game would have to reflect the same amount of thoughtfulness and simplicity of the classic games that inspired us. We decided to use a basic paradigm of outputs/inputs in which the user would see and hear a command, then have to repeat back by performing actions with the Siri Remote. The sequence of commands would increase speed and randomness as the user advanced through the game.
The three primary inputs for this game were designed heavily around the new Siri remote. Click and Swipe take advantage of the new touch surface, while Shaking the remote would be enabled by the accelerometer and gyroscope. Shake definitely brings the most personality when actually played — and it also gave us the most headaches from a development standpoint. You can read more on this later in a post we’re working on about developing with the Siri remote.
With inputs defined, we still needed to define what the television would display to prompt the user to perform the action. Going back to keeping things simple, we decided on these three outputs; a color, a shape and a sound (eg. Red + Circle + Sound = Click). Here’s the simple user flow we defined:
Simple user flow representing Echo navigation, game play, and game over
United: Putting it all together cohesively
After game controls and user flows were defined, our expert developers built the rest of the app and fine tuned the code, squashing any bugs that came into their path. Our design team was then focused on the logo, visuals, and sound effects of the game.
The name Echo was born from a Google doc where anyone in the company could share their ideas and suggestions. Echo was the perfect name because it supported the feeling and experience of the game when played. We iterated fast and came up with a ton of directions for what the logo would look like.
Early sketches of some of the logo and icons
We knew the logo would be the first step to shape the visual language, so we came together and all decided to move forward with the minimal, negative space concept (shown below at left).
Four sample logo treatments for Echo
It felt very intergalactic — and somewhat retro — so we knew we could take it further.
Final logo treatment for Echo
Echo also happened to be the name of a communications balloon satellite launched by NASA in the 1960s; so, the space theme just seemed to make sense.
Project Echo. (Photo: NASA)
Staying true to our principle of keeping it simple, we decided to keep the game screen very minimal, only showing what was necessary for the player to play. We decided to show only the three icons, and the score. We treated the icons with a similar look and feel to the logo for consistency. We played around with a lot of colors and ended up sticking with a warmer palette that felt both retro and outerspace-like.
Main game screen – Echo Memory Game
Having the logo and main game play screen designed made the rest of the process for laying out the visuals much more smooth. We ended up having 18 total screens in the app and added a second game mode. We differentiated the two game modes by calling one Memory and the other Speed.
App screens from the Echo game
At this point in the project, we had only three days left to submit the application and the game was still lacking one of the most crucial elements in any game: the sound. The soundtrack and the sound effects are key components to set the emotional impact of the game, so we wanted a creative and technical expert in sound design.
Luckily, we knew a guy. His name is Eugene Albert, better known as Yooj (listen to Yooj here). A Berlin-based producer and DJ (who was born and raised in the San Francisco Bay Area), Yooj wasted no time helping us create the sounds for the game and delivered us music within hours of our first call.
With almost all of the creative and technical near complete, it was time to create the app icon and Top Shelf artwork that Apple TV would display on screens everywhere. The app icon is not just your regular flat image you are used to when submitting your phone app. This icon must have between two and five layers to support the parallax feature of the new Apple TV. We only used three to keep things simple (as shown below), but the more you use, the more dramatic perspective of depth your icon will have.
Echo app icon and Top Shelf image, for display on Apple TV.
Apple does a great job documenting the requirements for the app icon here. They also provide a Parallax Previewer app for OS X and a Photoshop plugin that allows you to preview your layers in their focused state, so you can see how the animations are working with your design before sending it off to Xcode.
The TopShelf image (which must be 1920px by 720px in .png file format) is a new piece of artwork required for every Apple TV app submitted. It is bundled inside the app, and it gets displayed when the user places your app in the top row of the Apple TV Home screen. This image should be something that draws the user in, and ties back to the brand of your app. Your app will be rejected if it has alpha layers, so I recommend using this Alpha Channel Remover before submitting your build.
Enjoyable: How do you make “fun”?
Going back to the third of our three design principles, we wanted to craft an experience that was enjoyable. But there’s no proven process to achieve “joy” when it comes to app design. It’s really all about building a concept, watching people play, then iterating based on verbal and nonverbal feedback. Throughout our three-week Echo project, we pulled in different people from around the office to play as we watched. Where they struggled to understand the game, we made changes to the UI to help further simplify it. And we found that once our users got into the game, they experienced a range of healthy emotions — from satisfaction to frustration (at themselves). And even more encouraging, when our testers would fail and the game ended, they were quick to want to try again. And again. And, just one more time. This stickiness was the validation we wanted that maybe, just maybe we’d come up with something “enjoyable.”
Echo is available now and free in the Apple TV App Store. Ultimately, it’s now up to you to decide whether Echo is enjoyable. So, we challenge you to give it a shot and let us know what you think of it. You can comment below or use #EchoGame on Twitter to give us any feedback.
Apple TV app design — additional resources
If you’re getting started on your first Apple TV app design project, here are some resources we think will help you during the process: