Path of the Oracle

Dynamic UI for a mobile role-playing game

For mobile role-playing game Path of the Oracle, the objective was to create a party selection interface optimized for touch input and considerate of the player's desire for information as they assemble characters into a team.

Jump to Section

Research

Experience Design

Interface Design

Deliverables

Research

Use of character art is consistent across every design, with most displaying key stats; however, few games grant direct access to full character status. Also missing is the ability to directly view quest details, which could influence decision-making.

Reference points included Super Mario Party, Dune: Spice Wars, Agents of Mayhem, Final Fantasy XII, Dragon Age: The Veilguard, Final Fantasy XIII

Reference points included Super Mario Party, Dune: Spice Wars, Agents of Mayhem, Final Fantasy XII, Dragon Age: The Veilguard, Final Fantasy XIII

Experience Design

Initial exploration is done via structural wireframes focused on visual hierarchy and layout. Two different layouts were created—horizontal and vertical—of which the former was developed as it offers a better experience given the content and aspect ratio of the game.

With an understanding of existing character selection solutions, the next step was to explore general layouts and information hierarchy. This is achieved using structural wireframes to literally block out areas of the screen, which provides a good sense of the core experience being designed.

Structural wireframes literally blocking out party selection screen and modals

Structural wireframes literally blocking out party selection screen and modals

With a horizontal layout locked in, more detailed wireframes were made to articulate typography and image affordances. To better align the design with the expected color palette, these wireframes use a lighter scheme so as to begin working out value relationships before styling.

Detailed wireframes for party select screen and character details modal

Detailed wireframes for party select screen and character details modal

Interface Design

The visual elements were inspired by small oil flasks called lekythoi. The use of classic patterns, watercolors, and weathering speak to our modern understanding of ancient Greek art, whereas the use of anime-style character illustrations creates a fresh look.

weathering

unfinished pottery

watercolor

#111111

#777777

#FFFFFF

#589FAA

Dynamic character panels

Enlarged view of character panels used in the design showcase how various states of interaction are communicated to the player. From left to the right: default panel > how the panel appears when selected > character thumbnail appearing in party display.

Enlarged view of character panels used in the design showcase how various states of interaction are communicated to the player. From left to the right: default panel, how the panel appears when selected, character thumbnail appearing in party display.

Easy access to character status

The ability to quickly assess a character's stats is critical to an optimal party selection experience, which is why tapping on a character panel brings up a modal with details on key stats and equipment.

Deliverables

While most transitions and animations are intentionally kept simple to preserve focus on the content displayed, the god rays on the primary call-to-action button succeeds in directing the player to their next step: tackle the quest with their assembled crew.