A whimsical adventure game based on the bestselling Redwall books. The game is set in the winter shrouded wilderness between Lilygrove and Redwall Abbey, where players help Liam or Sophia race for aid against the raiding rats under Scumsnout's command.
UI Team: Raul Rivera (UI Artist), Carl Sommer (UI Designer/Developer), Peter Venoit Jr. (UI Lead/Designer/Artist)
1. Create animations for the main menu that give users a sense of "warm welcome" to the world of Redwall.
2. Create interactions that give users a sense of control over the main menu environment.
3. Ensure ease of navigation and awareness of current menu position.
Tools: Unity, C#, Illustrator, Photoshop, After Effects, Pencil.
Process: Information Architecture, Wireframe, Mockup, Prototype, Shipped Deliverable.
Goals:
- Create robust and lively primary animations that don't detract from user interactions.
- Create slower, more relaxed idle animations that don't detract from user interactions.
Constraints:
- The amount of available screen space for illustrative elements changes depending on what layer of the menu a user is on. This changes how much room is available for non-distracting animations.
The menu needed to be rich and active, yet subtle enough that the players are not distracted from their primary interaction goals.
After creating our initial wireframes and mockups we had space to determine how active/passive different UI elements could be without interfering with the users' ability to clearly distinguish what elements are available to interact with.
Goals:
- Every interaction should not only affect the UI element involved, but should also bring the full menu to life.
- Moving through the menu should also evoke a sense of exploration in a comfortable, friendly environment.
Constraints:
- The models and effects in the 3D space would often obstruct the menu UI depending on where the camera was and what the rendering layers were set to.
Each interaction in the main menu should complement the overall goals of the game and prepare players to enjoy the experience when they're ready to begin.
We chose to use a full 3D environment with a traveling camera in order to allow players to get the sense of physically moving through the environment as they choose to go to new major panels. Additionally, every panel change (major or minor) triggers an animation in the illustrative elements on that panel.
Modal pop-up animations were designed to distinguish the unique nature of their respective interactions. They appear quickly and dominate the screen, creating a thematically consistent feel, but still emphasize the contextual difference that comes with making a major change to the player's experience (i.e. applying or reverting settings changes or quitting the game).
Goals:
- Create a distinct feel for each layer of panels in the Main Menu.
Constraints:
- The use of breadcrumb trails needed to be fairly limited so as to avoid interfering with the rest of the UI elements and illustrations.
Player's need to feel like they can navigate a series of menu options without feeling lost, or burdened by the amount of clicking involved.
We chose to give the player multiple ways to identify their position within the menu's navigation.
1. Each of the five primary menu groups (main, settings, campaign, gallery and extras) is located on their own panel in 3D space. Each time the player changes a primary menu group, the camera physically moves through the environment to focus on that specific panel.
2. Once the player navigates within a primary menu group, the camera zooms in slightly each time the player chooses to interact with a sub-group.
3. When the player navigates between menu options that exist within a sub-group, a breadcrumb trail appears. This works because navigation within sub-groups is minimal enough that a breadcrumb trail doesn't interfere with the rest of the visuals.
4. Each of the five primary menu groups contains unique illustrations and animations. By zooming into each panel as players move deeper into that menu group, different aspects of the illustrations appeared more emphasized, giving the whole panel a unique feel.