Path of the Oracle

Tactile interface for assembling a party

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

Quick survey of party selection designs

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.

Key Observations
• Use of both large and thumbnail character art
• Few games offer direct access to character status
• Most games lack access to quest/mission details

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.

Key Observations
• Use of both large and thumbnail character art
• Few games offer direct access to character status
• Most games lack access to quest/mission details

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.

Key Observations
• Use of both large and thumbnail character art
• Few games offer direct access to character status
• Most games lack access to quest/mission details

From top-left: (1) Super Mario Party, (2) Dune: Spice Wars, (3) Agents of Mayhem, (4) Final Fantasy XII, (5) Dragon Age: The Veilguard, (6) Final Fantasy XIII
From top-left: (1) Super Mario Party, (2) Dune: Spice Wars, (3) Agents of Mayhem, (4) Final Fantasy XII, (5) Dragon Age: The Veilguard, (6) Final Fantasy XIII

Experience Design

Structural wireframes to block out the foundation

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.

Key Considerations
• Blocking out content areas
• Overall layout and visual hierarchy
• Constructing interaction patterns ideal for touch

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.

Clockwise from top-left: (1) character selection screen, (2) active character selection, (3) character details modal, (4) quest details modal
Clockwise from top-left: (1) character selection screen, (2) active character selection, (3) character details modal, (4) quest details modal

Bringing in more information, details

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.

Key Considerations
• Refining typographic relationships, but not final style
• Dialing in value relationships ahead of applying color
• Modifying the design for improvements

(1) character selection screen, (2) character details modal
(1) character selection screen, (2) character details modal

Interface Design

Concept behind the visual style

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 tactile 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.

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

Pulling it together with animation

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.

Key Deliverables
• Novel styling blends ancient Greek visual motifs with manga and modern layouts
• Intuitive tactile design with tap-to-open modals and character panel slider
• Quick access to character status and quest details

Next UP

NExt Up

Linbit

Rebrand of a cloud storage company

Global Bytes

Reducing checkout time in an ordering app

Linbit

Rebrand of a cloud storage company

Tracy Alan

UX/UI Designer

E-mail

LinkedIn

Jump to Section

Research

Experience Design

Interface Design

Deliverables