UX Design for Stawars Attack Squadrons
UI Design
Monetizing a game in a web browser
Star Wars: Attack Squadrons was a 16-player match dogfighter that could be downloaded and played in a web browser and was built in Unity. The game was developed and designed by Area 52 games, published by Disney, and licensed by LucasArts. It featured modifiable ships and a variety of maps. The game was announced in December 2013 with a trailer and a closed beta in January 2014.
My Role
I was brought on when the UI was in its infancy. I needed to design solutions for the information architecture, monetization, ship customization, and the UX surrounding the experience for the main menus.
Problems and Solutions
The Product Problems:
When I came on, the gameplay, 3D assets, and in-game UI were getting closer to completion. With only a handful of UI screens and ideas for customizing and piloting users' ships, the game needed a complete UX design for the main menus.
The Product Solutions:
Design elaborate UI/UX to customize ships, create information architecture from the loading screen through the gameplay loop, and redline all UI screens in the main menus.
UI for customizing and piloting ships
Hide the main UI to view the currently selected ship, which included X-Wings, TIE fighters, and the Millennium Falcon
Inventory and Workshop loot management
Store
Mission Brief
Match summary
The UX Process
Understanding the user:
We focused on several types of users: casual players, competitive players, and collectors.
Design tools I used:
I was the UX/UI designer using Unity, Sketch, Illustrator, and Photoshop.
Information Architecture and Screen Flows
Like most projects, one of the beginning stages is creating IA and screen flows. After sketching out ideas and formulating them, I move to the computer, start the IA and present those designs to the team and stakeholders.
IA for Stars Attack Squardrons
Wireframes
After the Information Architecture and Screen Flow stage, I usually move on to designing wireframing. This provides me with a tool to understand and think through a functional design feature thoroughly. These wireframes inform other team members, stakeholders, and UI artists.
Wireframes for Ship Management
UI for Ship Management
Wireframes for Mission Select
A Wireframe for Mission Select
Wireframe for Mission Brief
UI for Mission Brief
UI
Below are a couple more designs I created that only needed UI without using wireframes.
UI Design for the Loading Screen
UI Design for the Coin Pop Up
Testing
We test a couple of different ways. We had over 100,000 players who downloaded the beta. We continually rolled out main UI features with questionaries. We also conducted usability testing where we could observe users playing the game.
Design Validation
One feature I wanted to test during the A/B tests was to remove the play button on the ship customization screen. The ship screen was very complex, allowing the user to manage multiple options. I wanted to remove the button to use the pixel real estate to make room for features. We learned the users got confused when the button was removed.
Conclusion
Being able to work on a Disney IP like Star Wars has always been a dream of mine. This experience allowed fans to fly around in their favorite ships, choose what map they wanted to battle in, and customize and mod their collection of ships to become the best dogfighter in a galaxy that’s far, far away!
Having a large hand in designing a product that combines, entertainment and business goals all wrapped into a famous IP like Star Wars is something I want to continue doing for the rest of my career.