The Voyant Game
A Financial Planning Game
UI Design | Iconography | Prototyping | Branding | UX Design | WebApp
The Voyant Game establishes the first touchpoint between a financial-services professional and a client. It is a B2B2C Financial Planning game and is available as both a physical board game and a companion web-based application that helps clients set their financial aspirations on an interactive and intuitive platform.
As one of two designers on the team, I led the concepting, branding, and design of both the UI and UX for the board game and digital app, overseeing their development from start to finish.
The Objective
To make financial planning less intimidating and more accessible by gamifying the experience. The physical board game acts as a collaborative tool where clients can engage with financial advisors or family members in relaxed settings, using interactive elements like goal cards and family pins to visualize their financial paths. This physical interaction sets the foundation for the digital game, which delves deeper into financial strategies using advanced algorithms.
My Role & Responsibilities
-
Collaboratively designed the physical board game, focusing on creating engaging, intuitive interactions.
-
Led the UI design for the digital game, translating the playful and educational essence of the board game into a sophisticated digital experience.
-
Conducted UX research in partnership with the CEO, financial advisors, and the senior designer to ensure the digital tool met real user needs and financial planning goals.
-
Developed a comprehensive design system and brand book to ensure consistency across all project components.
Research & Ideation
This phase involved extensive research to understand the complexities of financial planning and identify potential barriers for users. Brainstorming sessions helped develop innovative ways to gamify the financial planning process, making it accessible and engaging.
Design Development
-
High-Fidelity Prototyping: Detailed and interactive prototypes for the digital game were created to visualize and refine user interaction.
-
Board Game Development: Simultaneously, the layout and mechanics of the board game were designed, including the creation of game components and visual elements.
-
Icon Set Creation: A comprehensive icon set was crafted to visually represent various financial concepts, ensuring clarity and consistency across both the board and digital games.
-
Design System Development: Established a robust design system and style guide to guide all visual and interactive elements that would be consistent throughout both the physical and digital aspects of the game, ensuring a seamless user experience and strong brand identity across all platforms.
Collaboration and Feedback
The Process
Regular interactions with the CEO, financial advisors, and the senior designer were crucial. These collaborations ensured the designs were not only visually appealing but also financially accurate and relevant to the end-users.
Design System
Creation and Implementation
A comprehensive design system was established for The Voyant Game to ensure consistency across both the board game and digital application. This system included a cohesive color palette, clear typography, custom icons for financial concepts, and a unified component library for the digital UI. The design system played a crucial role in maintaining a consistent user experience and brand identity across all platforms. For a more detailed look, you can view the style guide below and download the brand guidelines.
Prototypes & Micro-Animations
Interested in exploring how we transformed a traditional financial process into an engaging, educational game? Below are some prototypes and animations of The Voyant Game that I made on the Principle for Mac app.
Execution
Manufacturing & Material Testing
-
Collaborated with the senior designer to source manufacturers for high-quality production of the board game components.
-
Experimented with in-house 3D printing and Cricut cutting for prototype development of goal cards and family member pins.
Package Design & Production
-
Design Development: Developed the packaging for the board game, focusing on aesthetic appeal and functional design to ensure safe and appealing storage.
-
Prototype Creation: Utilized in-house technology, including 3D printing and smart cutting tools, to create prototypes of the packaging, enabling rapid iteration and refinement.
Launch of Digital Game
-
Implementation: The finalized UI of the digital game was launched, incorporating feedback from testing phases to enhance user engagement and performance.
-
Developer Collaboration: Worked closely with developers to ensure the web application was built exactly as envisioned, achieving a seamless translation of design into functional execution and maintaining the integrity of the user experience.
Outcome & Impact
Results
-
Improved approachability and understanding of financial planning through gamified learning.
-
Enhanced user engagement across different platforms, leading to higher satisfaction and interaction.
Key Learnings
-
Gained insights into the challenges of integrating physical and digital design elements, emphasizing the importance of a unified design system to maintain brand consistency.
