The UI & UX of Sonic Racing

Sonic Racing is an Apple Arcade iOS exclusive title. The game went through different phases during development. It started as a Free to Play title which eventually shifted into a Premium experience.

The game supports both phone orientations: landscape and portrait. It includes console-like features such as Bluetooth controller support and on-screen button prompts, and is fully functional on all Apple devices (iPhone, iPad, TV and Macbook).

The full game experience has been adapted for all the different aspect ratios and controls schemes (Touch, controllers, TV remote, keyboard and mouse).

Credits

Raffaele Lattanzio
Tyler Trevell
Nathan Russell
Joshua Payne

Special Thanks:
Joseph Stone
Simon Dew
Rick Nath
Tomomi Namiki
Jacob Jensen
Shaun Lawrence

And everyone at HARDlight and SEGA.

Wireframes and UX

Early ideas and wireframes were first explored on paper and then turned into Adobe XD click-through prototypes. Those prototypes were helpful during the game development as they were frequently used to showcase features to the team and used as a tool to scope the work involved on each feature.

Examples of some of the early wireframes

Developing the Style

The UI style and language was developed around the Sonic brand.

We wanted it to be modern, bold, sleek, playful, and convey a sense of speed and the excitement of the race competition. We kept tweaking and evolving the designs until we were happy with the look and feel.

Early ideas/explorations which evolved into the final UI style.

High-level UI style guide document that was shared with the team.

The Free to Play Phase

The Free to Play game UI included features such as ads support, banners support, and few extra features such as clans, leaderboards, currencies store and more (which, unfortunately, were not included in the final game as those features were not in line to the general guidelines of the new Apple Arcade service).

Icons and UI elements

Some UI elements and icon samples created for the game.

Adapting the experience

For Phase 2, the goal was to adapt the experience to the new Apple Arcade platform and launch the game on day-one. To do so we had to review and polish a few aspects of the game such as:

• Review the main screens designs so that they work and look good on both landscape and portrait.
• Support for both landscape and portrait orientations including different aspect ratios and devices (eg. iPad, TV, Laptop)
• Support for bluetooth controllers.
• On screen button prompts.
• Menus navigation using controllers and support for the Apple TV remote.

The deadline was tight, and to achieve all of the above we had to make some compromises. For instance the navigation through the menus by controllers was done using a cursor instead of a classic grid based navigation. This solution was not ideal but we knew that we would have the budget to enhance the navigation on a later release.

Multiple ways to play the game using different devices and control methods.

We made it to the deadline and we continued to support the game and started working on a bigger and final update which would introduce new features and improve the overall game experience.

The Final Update

For the final update, our focus was to add new content and new game modes while improving and reviewing important aspects of the game UI and game experience.

The action plan for the final update was:

• Improve the overall UI and User Experience based on users’ feedback.
• Improve the menus navigation by replacing the cursor with a classic grid based navigation.
• Play with friends in the new 2 and 4 Players Modes.
• Add the final tracks and new environments.
• General bug fixing and game improvements.

We built the new revised interface prototype on Adobe XD with the aim of improving all the points listed above. This work had to be done on both screen orientations.

The click-through prototype was built collaboratively with the team and it was used on multiple occasions to visually communicate the intentions of the changes and to discuss the scope of the work involved.

Wireframes

We kept most of the existing art assets but repurposed them based on the new design and prototype we built in Adobe XD.

The result was a useful, sleek, clean and functional prototype which, after the team sign-off, was adopted as a base to build the final UI mockups in Photoshop.

Improved Experience

The main focus for this new redesign was to step back from the Free to Play experience and tune into a Premium console like experience in line with Apple Arcade service requirements and expectations.

We looked at improving various aspects such as general decluttering, simplifying journeys, improving the information hierarchy, and optimizing the navigation experience on both touch and non touch etc.

We also took the opportunity to review and tweak the style by tuning colours, sizes and shapes.

Additional Features

One of the features we wanted in the last update was the ability to import and play video clips on the menus. This new feature was implemented throughout the menus to improve game understanding and polish the overall experience.

An example is the looping action sequence video on the Main Menu / Race Button which really helps to draw the eye and guide the player to jump straight into the race.

Staged in-game videos were set up and recorded to explain, in an easy to digest video format, how all the different wisps and drivers abilities works.

And finally we took the chance to enhance the end race result sequence. This new version aims to improve the overall experience by making it more dynamic, appealing and rewarding by keeping the pace of the information flow easy, smooth and nice to the end user.

Win Sequence Mockup / Storyboard

Win Sequence In-Game Implementation

Final Notes

This document takes a chance to summarize 2+ years of work that has been completed during my time as Lead UI UX Artist at SEGA HARDlight. The whole team did a great job. We had to work closely together and in synergy, reacting fast by quickly adapting the experience to big changes.

I am quite happy with what has been achieved and I hope that anyone that views this information finds it insightful.

Thanks

© SEGA. SEGA, the SEGA logo and SONIC THE HEDGEHOG are either registered trademarks or trademarks of SEGA Holdings Co., Ltd. or its affiliates. All rights reserved. SEGA is registered in the U.S. Patent and Trademark Office. All other trademarks, logos and copyrights are property of their respective owners