My time at Circadence was to be the main artist on the flagship cyber security training tool called Project Ares. I started with doing a rework of the original artwork, bringing the project’s style into a newer decade while cleaning up features, flows, and adding new accessibility styles and features. Starting at the beginning of 2020, I pitched a new design (dubbed the “Refresh”) to bring a more modern style, layout, and clearer flow, as well as improving upon the accessibility issues and streamlining features.
The “Refresh” is a planned improvement to Project Ares that gave us the opportunity to re-visualize our product and streamline it’s features; this started with wireframes that I created and connected into a working flow using Adobe XD. The wireframes offered rapid layout prototyping and a better understanding of the new product flow, allowing us to make quick revisions where needed.
The Refresh brought a lot of opportunities for us to improve on past designs, layouts, and flows; as well as integrate new features that would help its users better understand their next step and the progress they’ve made in their cyber security training.
One of these features, for instance, is the Media Center. It was extracted from the (now removed) Battle School section and moved to the new Taskbar. This revised feature allows for users to reference any searchable learning material whenever they’d like while using the product.
The Project Ares Refresh designs were a team effort at Circadence. Ronaldo Pereira was a huge inspiration when it came to the high fidelity mockups with his amazingly sharp eye for details; and Terry Maranda led us both as Creative Director, page by page, feature by feature, until we had both cohesion and ease of use.
I was first tasked with updating the Project Ares style based off a couple of full screen mockups and the new globe asset when joining the project. I worked with Ronaldo Pereira in updating different panels and screens with the new styling in Photoshop as mockups, and then I worked with our Front End dev team to implement the styles in Unity. I converted the use of hundreds of single sprites into larger spritesheets instead; this allowed me to make sure the majority of the UI that’s used was loaded at the start, with any specialty sprites on separate spritesheets based on their frequency.
I helped create style guides for different components and assets, as well as panel sizes and positions on the screen to keep consistency. During the Rework production, Unity updated to allow for nested prefabs, which I dove into and created a UI template library to quickly build new UI panels with proper dimensions with prefabs. The beauty of using prefabs means that if we decided to change the font used for headers, or the background of the pop up panels, it could be done on just the one respective asset and all of them that reference it within the project get updated. This came in handy when we implemented our custom Font Scaling asset created by Jose Velazquez.
There were a lot of hands on the Project Ares Rework to help bring it together. Felix Monarca created some amazing mockups and icons for the Battle School landing screen that I implemented with animation hover effects, as well as the Player level helmet designs in the Player Profile Widget I designed. Ronaldo Pereira again helped bring a lot of creative styling and details to the Rework that I reused and built off of. Jose Velazquez helped with more technical issues with the Font Scaler asset idea I pitched to him to help with Unity’s fonts not scaling well within WebGL.
Apart from using manually maintained spritesheets and a nested prefab pipeline, I made sure to focus on other UI optimization improvements. I reduced the drawcalls of each screen and pop up panels, reduced font counts, reduced overdraw, and switched to a code based animation system instead of keyframed animation.
Cleaning out the project folder is often overlooked and can help spot legacy sprites that are applied to a gameobject but it’s not used anymore, just adding more to the size of the final build. So while doing the Rework updates, I made sure to continue to go through the project itself and clear out all old and unused sprites; and if they were still being used, figure out why and/or swap it out for another sprite on the new spritesheet to reduce memory cost.
Because I jump on the project well into its creation, and upgrading through multiple version of Unity as well as team members, the scene hierarchy was noticeably sloppy. With the blessing and support of the Front End devs, I was able to clean up each scene’s hierarchy which helped remove any legacy panels, scripts, and gameobjects from the builds; it also granted our team a clearer understanding of script, controller, static artwork, and functional ui component placement within the scene. This, along with the integration of nested prefabs from my template library made for quick updates and implementation of new panels and scene updates, with less merge conflicts.
The Circadence Front End dev team that I worked with were fantastic and were eager to work with new panels, screens, artwork, animations, and technical ideas I would through at them. Mike Everett, Matt Keele, and Francine Walker were instrumental in the Project Ares Rework, as well as Project Ares as a whole. With their support, I was able to drastically improve the visuals and reduce the performance cost of the project.
