Tricks, Flips, and Touchscreens: How Tony Hawk’s Skate Jam Crafted its Mobile UX

Tony Hawk is many things: pro-skateboarder, entrepreneur, and long-time console video game hero. His titles defined a generation of skateboard video games, and now he is tackling the mobile games world. Tony Hawk’s Skate Jam, out now on iOS and Android, aims to take the smooth skateboarding gameplay of Tony’s console titles and translate that into an effective mobile experience. That brings a whole host of major UX challenges not present in the console video games world: how do you best design for dozens of screen sizes, countless different devices, two dominant operating systems, and an iterative development process where content will continue to be added and updated, long after the game is released.

“It’s the one ‘console’ almost everyone owns,” Tony Hawk said when asked why he is taking his video game franchise into the mobile world. “The technology has come far enough to create a skateboarding game reminiscent of my previous series. Players can look forward to short bursts of action-packed gameplay that instills a desire to return and finish new challenges with bigger scores.”

Tony entrusted Maple Media with the design of his mobile game. The company is known for creating mobile properties and has designed a mobile skateboarding game before, but even chief operating officer David Bos admits the caliber and scale of the Tony Hawk game franchise presented a unique challenge for the company. To create a mobile experience that would meet Tony’s high bar, Maple Media adopted Adobe XD into its workflows. Watch the video below to see their story (and hear more from Tony himself), and read on to learn more about the UX process that went into designing Tony Hawk’s Skate Jam.

Creating an awesome and authentic skateboarding experience on mobile

While creating a mobile game opens up a world of opportunities (more than 2/3 of the world’s population now uses a mobile device), doing so effectively means creating a smooth, consistent, and connected gameplay experience for a potentially massive user base. For Maple Media, nothing was more important than nailing the controls and UI, something that was especially challenging when designing for Android devices.

“Skateboarding and Tony Hawk are super popular in Brazil. Brazil is largely an Android market. On Android, there’s no consistent device size whatsoever, so we have players there who are playing on the latest and greatest devices that are streaming faster than the average computer, to devices that are four or five years old and have a screen size half the size or smaller than some of the large devices,” said David, adding that accessible and authentic customizable controls were also a priority for Tony, to make the game both easy to pick up and play, and true to real skateboarding techniques.

“We had to build for and account for all those things in the game and in the user interface. Part of that is designing with intention, and getting ahead of the different aspect ratios and screen sizes that we know we needed to have coverage of.”

UX designer Xiaoxuan (Sally) Liu was tasked with designing the game’s UI at scale. With so many UI elements on each screen, and so many different devices to serve, managing buttons and icons and keeping them consistent across multiple layouts and aspect ratios was her greatest challenge. She used Adobe XD’s Linked Symbols feature to maintain her design system; while she laid out user flows across artboards for the various device sizes, she was able to change aspects of individual symbols and apply those changes across all iterations of the game (or not, in cases where she needed to alter a symbol for a specific screen size).

“I first focused on iPhones, but after designing the whole flow, I began incorporating those designs into iPad and various Android phone sizes. I learned quickly that not all of those elements worked on all aspect ratios, so I had to adjust a lot of UI elements, their sizes, and where on the screen they should be placed,” she said.

The push-and-pull of multi-device design

While designing for so many devices and screens is a UX challenge, UX designers are not the only ones who need to be worried about it. While the team at Maple Media thoroughly understands the importance of an intuitive user interface to creating a fun user experience, they also faced the pressure of deadlines and delivery. This resulted in a lot of conversations about how much each aspect of Tony Hawk’s Skate Jam should be refined and retooled, with the knowledge it would have to scale across many different devices and device sizes.

“It’s a constant push and pull for every screen; do we go deeper to refine the design for a certain aspect of the game or a certain player flow, or have we hit a point where it’s strong enough to scale across different screen sizes without introducing new issues,” said David. For him, the ease-of-use of Adobe XD meant he and his team could quickly explore tweaks and iterations of their designs; meaning the collaborative process between production and design was just ‘push-and-pull,’ rather than a full-on tug-of-war.

Xiaoxuan says, since many of the individual elements are designed in Adobe Illustrator, she was able to iterate on them and simply copy and paste them into XD whenever tweaks needed to be made. This made the collaborative process with her production partners easier to manage. When she was finished with a design, and everyone had signed off, she was able to publish the design specs and deliver to developers without delay.

Collaborating one-on-one with Tony Hawk in the design process

With more than a dozen games under his belt, Tony Hawk is far from a newcomer in the video game world. He’s also much more than a figurehead for his games, taking a hands-on approach to ensuring the games he puts his name on deliver authentic skateboarding experiences. To collaborate with Tony in real-time and gather his feedback at multiple stages of design, Xiaoxuan published her Adobe XD prototypes to the web, creating a private link to a webpage Tony could access. Tony would then interact with the prototype and make comments right in the browser, which Xiaoxuan could see and react to instantly. This grew increasingly important as release got closer.

“It allowed for me to make crucial changes from any location in real-time,” said Tony. “As our release deadline approached, Adobe XD was my lifeline to collaborating with Maple Media efficiently.”

This level of collaboration had powerful effects on the Maple Media team’s workflow, and David says it ultimately resulted in a much better game.

“I think it was surprising and exciting for us to see just how much Tony cares and how much he knows, about video games and skateboarding, and also about mobile apps. There were a lot of times in that collaborative process when we received highly relevant but unexpected feedback from him about the game we hadn’t considered,” he added.

This process will continue, too. Like in app design, many modern mobile game designs are never truly ‘done.’ Tony Hawk’s Skate Jam will continue to receive updates and new downloadable content. For Maple Media, this is a crucial differentiator between making a mobile game and making a console game: mobile game designers are consistently iterating, improving, and adding to the game at a much faster rate than in the console world. David says launch was really just ‘day one,’ and Xiaoxuan will continue to use Adobe XD to collaborate with Tony and others to make sure Skate Jam is “a living and breathing” product that evolves constantly.

“Don’t underestimate the power and impact of doing simple things really well”

Even with an extensive background in mobile game design, David says there is still a large temptation to add too much to their experiences. His mantra is all about focusing in on the core value of the game you want to create; while mobile allows an incredible breadth of ways players can interact with your game, his advice is to closely define your intended experience.

“It’s easy to be paralyzed by decisions and go down many different paths. Focus on what the core experience is, and what is really going to be unique, differentiating, and keep people coming back time and time again. Don’t get distracted from that, despite the ability to go in a lot of different directions,” he said.

That core experience, for both Maple Media and Tony Hawk, was that the game uses the unique characteristics of mobile controls and UI to capture the fun, joy, and creativity that the feeling of skateboarding brings. It is about giving people that feeling any time, anywhere they are, something that isn’t possible with most console experiences.

Putting those elements together and creating a cohesive experience may have been a challenge in a world where mobile device proliferation is a constant challenge for designers and developers, but XD’s intuitive design, prototyping, and collaboration features meant the team could focus in on creating the best game possible. “It just really elevated our whole design and development process,” said David.

Learn more about Tony Hawk’s Skate Jam on Maple Media’s website, and for and for UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.