88 Fortunes LIVE EU-US UX / UI

Overview

With a robust Atomic Design System implemented in Figma, I have streamlined UI/UX workflows, enabling the development of scalable and visually cohesive interfaces across the company's product portfolio. My experience in managing high-impact multiplayer LIVE roulette games such as XL Roulette LIVE and working with iconic Light & Wonder IPs, including 7s on Fire LIVE and Rainbow Riches LIVE, has honed my ability to translate renowned brand aesthetics into engaging, interactive experiences. These efforts have significantly enhanced the speed and quality of product development, ensuring delivery aligns with the envisioned standards.

Challenges

IP Band Game Logic: Developing game logic and visual design that align seamlessly with the original game while enhancing user engagement.

Roulette Bet Table Optimization: Refactoring the existing bet table to support a more intuitive and visually optimized representation of lucky numbers and winning outcomes.

Spine Animation Integration: Establishing a scalable workflow for implementing Spine animations with Pixi.js, ensuring consistency and efficiency for future projects.

Game Velocity UX: Balancing game speed to accommodate diverse player preferences across various iGaming verticals while maintaining an engaging experience.

Game Timing Cohesion: Ensuring synchronized interactions between game elements—such as the Lucky Numbers Bar, Bet Table, Winning Animation, and Video Wall, creating a seamless user experience that aligns with player expectations.

The Process

As part of the 2024 roadmap, strategic planning for 88 Fortunes LIVE was guided by C-level leadership at Light & Wonder, prioritizing the development of a new iteration of this top-performing slot brand for Q3 and Q4. My role involved working closely with the Brand Director and the Head of Art Development, ensuring that brand-specific logic, player engagement insights, and key performance indicators (KPIs) were incorporated into the new game.

88 Fortunes is one of the most successful Chinese-themed slot games, designed for both online and land-based casinos in the U.S. market. Due to its immense popularity, multiple variants have been developed to expand the brand's reach.

This project exemplifies a data-driven approach to game development, aligning brand identity with gameplay mechanics to maximize player appeal and market performance.

Key Features of 88 Fortunes:

• High-volatility slot with a maximum win of 2,761x and an RTP of 96.00%
• 5 levels of play for gold symbols
• Fu Bat Jackpot System (4 levels: Grand, Major, Minor, Mini)
• Gong Free Spin Feature

Brand & Player Appeal:

• Jackpot Fu Babies: a beloved feature driving player engagement
• Filling up the Fu Bat bowl with golden coins: a signature element enhancing retention

Game Logic & UX Development

The product UI design process involved collaborating with the Chief Product Officer to develop a balanced between UX and game mechanics while combining 88 Fortunes RNG slot brand and symbol values. The user experience underwent heuristic iterations, ensuring gameplay features were optimized to resonate with the Brand.

UI/UX Design Process

The Figma files of a similar multiplier game served as a foundation, with CORE and MASTER libraries integrated to manage dependencies. High-fidelity prototypes were developed alongside structured mock-ups, game flows, and local unique game UI components. Comprehensive guidelines ensured clarity for developers and QA teams, facilitating a seamless design-to-delivery process. Automations and plugins where utilised in the most appropriate scenarios. Testing visual scenarios and user flows with high fidelity prototypes. I had bi-weekly one to one with the designers and weekly UI UX team meeting to report, work progress / updates, challenges / roadblocks within the team or with other teams, upcoming tasks and priorities, design quality / consistency, new technologies / UI patterns, Design system updates, collaboration between team members and members from other teams.

Product Specificaions

Onboarded the Adv. UI Designer and the Tech. UI designer about the 88 Fortune project and demonstrated the game with access to the original material. Composed detailed product UI / UX specifications of the Product on Confluence, created JIRA UI/UX tickets covering different parts of the EU and US products under the Product Epic. Delegate and given ownership to initiate tasks. Support and co-compose product ticket with Head of Product to define game functionals Front End specifications Confluence/JIRA according to functional specifications, cover corner cases, resolve bugs and link the UI/UX JIRA ticket to the relevant Product JRIA tickets.

Product Development

Throughout the project development, there was continuous collaboration between developers, Product Managers, and UI/UX Designers. This involved identifying corner cases in specifications, optimizing performance, refactoring, and resolving development blockers. The UI/UX team provided support through guidelines, prototypes, user flows, UI flows, and overall coding logic approaches.

UI Designers actively participated in daily standups within their respective development teams and attended refinement sessions for the projects they were working on. I joined these sessions whenever designers faced blockers they couldn't resolve. Additionally, I was involved in sprint releases and represented the team in Scrum of Scrums sessions.

Studio Design

Onboarded the Studio Delivery team on brand guidelines and served as a brand guardian to maintain design consistency across all visual studio elements. Participated in review sessions with the Head of Studio Delivery and the Studio Designer. Conducted camera framing tests using high-fidelity mock-ups to ensure optimal visibility of player-interactive UI game components and proper positioning of game-related studio elements for enhanced user visibility.

Videowall & Green Screen Design

As Head of UI/UX, I led the game-related video animations and green screen content development with an external studio. I prepared the game flow, prototypes, assets, and storyboards", setting the creative direction for animations.

I involved the Creative UI Designer in initial presentations, later delegating ownership to ensure animations aligned with game events, enhanced player experience, and upheld brand identity. When outsourced work fell short, we collaborated to refine solutions, maintaining high creative and technical standards.

This process strengthened UI/UX and animation synergy, ensuring a seamless, high-quality player experience.

Operations Support

Designed detailed game flows, event sequences, camera cuts, and scripted game round highlights and pauses to ensure a seamless player experience. Finalized scripts in collaboration with legal and brand directors to maintain compliance and brand consistency. Utilized AI tools to design dealer costumes, selecting colors that complemented the game theme while ensuring critical betting UI components remained clearly visible. Developed the multiplier roulette dealer UI/teleprompter to align with the game logic of 88 Fortunes, incorporating qualitative testing with presenters during game trials.

Design Quality Assurance

Design QA was conducted in two phases: on-stage during deployment and post-production, ensuring that UI design, UX, game logic, and flow aligned with the game design specifications outlined in Figma and UI/UX tickets. The process focused on maintaining UI/UX consistency by verifying that all components, animation timing, and interactions provided a seamless and intuitive experience.

Game logic and flow validation ensured that all mechanics, event sequences, and transitions functioned as intended, creating a coherent connection between UI elements and gameplay. Audio balancing was also a key aspect, where game sounds were adjusted in relation to ambient studio audio to enhance immersion without being disruptive. Additionally, dealer UI validation ensured that the interface matched design specifications while integrating qualitative feedback from operations to align with game events and support presenter behavior. Lastly, Design QA extended to the video wall, ensuring that it was visually synchronized with game events for a cohesive and engaging user experience.

Advancing UI Animations & Performance Optimization

To capture the richness of the original 88 Fortunes Slot, I advocated for a bold approach enhancing UI animations to elevate the product's visual appeal. Leveraging my experience in slot game development at Mutuelplay, I introduced SPINE animations into 88 Fortunes LIVE, making it the first Light & Wonder LIVE game to integrate this technology. This innovation significantly improved visual quality and user experience, setting a new benchmark for future LIVE products.

Additionally, I led the refactoring of the roulette bet table, optimizing it to support richer animations for lucky and winning numbers, further enhancing the immersive experience.

This initiative not only elevated the game's aesthetics but also optimized performance, reinforcing Light & Wonder's reputation for high-quality, innovative gaming experiences.

Internal and External Stakeholder Sign-Offs

After transforming the game concept to UI Design byt he CPO, I lead the communication with external shareholder throughout the progress of the project.

Sign-off 1: Light & Wonder Brand Manager and Band Director

Sign-off 2: Light & Wonder Senior Content Director and Proprietary Brand Manager

Sign-off 3: Exclusive US product iterations with Draft Kings US Product

Creative & Technical Support for Marketing Initiatives

Beyond UI development, my UI/UX design team thrived on creativity and attention to detail, consistently providing both creative and technical support to the Marketing department.

For 88 Fortunes LIVE, I delegated the marketing creative support to our creative UI designer, ensuring the production of high-quality sales presentations. Meanwhile, I collaborated directly with the Head of Marketing to conceptualize the G2E exhibition booth, aligning design strategy with brand objectives.

To enhance marketing materials, we leveraged FIGMA plugins to generate 3D mobile mockups, streamlining asset creation for promotional campaigns.

This cross-functional collaboration not only strengthened brand representation but also showcased our ability to merge design innovation with marketing strategy effectively.

UX Quantitative improvements

Following the game's launch with several operators, including AOL, DraftKings, Sisal, Expekt, and BetMGM, we gained significant player traction. This allowed us to assess the game's performance by analyzing player engagement, behavioral metrics, and wagering data.

After analyzing the data, the CPO implemented optimizations to enhance game speed, leading to a noticeable improvement in player engagement and overall performance.

Draft Kings Exclusive

As the US 88 Fortunes LIVE was a DraftKings exclusive product, I collaborated closely with the Account Manager and DraftKings team. Following a qualitative evaluation with their customers, DraftKings identified a lack of strong brand representation and requested a more prominent presence for the Fu Babies. In response, I created rich animations using Spine and presented them to DraftKings. The feedback was highly positive, and the Account Manager subsequently requested cost estimations to move the project forward.

Key Takeaways

Positive Takeaways: The Design System has proven its efficiency, accelerating UI delivery while maintaining high-quality standards and providing clarity on expectations. High-fidelity prototypes have offered a clear vision of the final product, ensuring alignment among teams. Previous experience with Light & Wonder IP projects has strengthened cross-departmental collaboration, streamlining workflows. Clear stakeholder presentations expedited sign-offs, improving project turnaround. Refactoring the roulette bet table enhanced product flexibility, delivering a superior UX. Introducing Spine animations marked a milestone in product quality. Delegating more responsibilities to UI designers empowered them, fostering stronger engagement and contributions.

Areas for Improvement: A bolder approach to leveraging Pixi.js capabilities beyond Spine animation exports could have further enhanced product flexibility, optimization, and developer expertise. Include in the prodject process Figma walkthroughs with developers before project handoffs would have improved alignment and execution.

End Product