ONTARIO LOTTERY & GAMING (OLG)

What's New Feature

ROLE

Product Designer

DURATION

3 Months

TOOLS

Figma & usertesting.com

TEAM

Optimized Digital Channels Team

ONTARIO LOTTERY & GAMING (OLG)

What's New Feature

ROLE

Product Designer

DURATION

4 MONTHS

TOOL

Figma

TEAM

Optimized Digital Channels Team

Ontario Lottery & Gaming Corporation

ROLE

Product Designer

DURATION

2 Weeks

TOOLS

Figma

TEAM

Sports Acquisition & Retention Lab

What's New Feature

MY ROLE

As lead designer for OLG What's New modal, I designed a non-intrusive modal for desktop and mobile websites through an iterative process. Conducted design research, created wireframes and mockups, and collaborated with the research team to develop user-testing questions. Analyzed interview insights to synthesize findings, informing final designs and prototypes ready for development.

OVERVIEW

To improve user awareness and engagement, OLG implemented a “What’s New” modal for desktop and mobile platforms. The goal was to create a non-intrusive yet impactful communication tool that informs users about new features, products, and updates. This initiative addressed challenges with low engagement from traditional channels like email and inbox messaging, ensuring users stay informed while enhancing transparency and satisfaction.

By aligning the modal with monthly web releases, the solution delivers timely, visually engaging updates while maintaining user control through simple dismissal options. The project sets OLG apart by fostering a consistent communication method, infusing “delight and wonder” into the user experience, and reducing repetitive customer support inquiries.

STAKEHOLDERS

Director Digital UX design Andrew Succi, Sr Manager Digital Business Analyst Kyle Miller, Product Owner Nineesha Nigli, Front End Developer 2 Brando Lounds, CX Researcher Iris Shao, Accessibility Technology Advisor Duane Killer, Sr Scrum Master Brent Seaton, Sr Manager Customer Research & Insights Joanna Chan, Sr Copywriter Specialist Fiorella Fuenmayor Sanchez, and Content Author Chintan Gohil.

Problem

THE CHALLENGE

How can we effectively communicate a strategy to keep users informed and engaged with OLG’s latest offerings?

Design Process

DESIGING A NON-INTRUSIVE MODAL

The design process began with exploratory research to identify best practices for creating a modal notification. The primary objective was to convey information effectively while minimizing disruption to the user's flow. Understanding the importance of a well-designed notification, the focus was on crafting a solution that adds value to the user experience rather than being perceived as an interruption.

EXPLORATORY RESEARCH

To broaden perspectives, I analyzed how other companies approached similar challenges, gathering inspiration and exploring alternatives beyond the traditional modal solution. While aligning with the existing app experience, I proposed a range of options, including innovative approaches and traditional modals, for the team to evaluate collaboratively.

This groundwork ensured that the design was not only user-focused but also well-informed by industry standards and creative possibilities.

MOCKUPS & FLOWS

To effectively communicate the idea, I created mockups showcasing several scenarios on both desktop and mobile web, understanding the team's other priorities.

CONCEPT 1

This concept involved a notification badge in the user profile. When selected, the user would see an alert in a dropdown menu under a new section titled "What’s New." This would direct users to a dedicated OLG page, designed similarly to the existing FAQ page, to communicate new features.

The key advantage of this design is that it gives users control over when they interact with the notification and access the new content. It also offers easy navigation back to the FAQ page for continued exploration, aligning with familiar design patterns used by other organizations.

However, the main drawbacks were the inconsistency with the existing OLG app design and the additional development work needed for the new page. Due to these challenges, this concept was not selected but may be considered for a future MVP2 initiative.

CONCEPT 2

The second concept I presented to the team was a contextual tour, an option further removed from the existing app experience but worth exploring, especially for communicating complex features. I used Group Play as an example, as the experience differs between in-person and online play. This design would guide users through the new rules, enhancing onboarding and understanding.

CONCEPT 2

The main advantages of this design are that it offers an optional, step-by-step tutorial to help users understand new features, potentially reducing customer support inquiries. It could also drive higher user engagement and revenue by reducing confusion, particularly with products like Group Play, where user hesitation is often linked to a lack of understanding of how to play. User testing from other initiatives has shown that users are more likely to avoid products they don't understand, which could affect overall sales.

However, the primary disadvantage is the heavy development workload, as it would require customization for each new release. This made it impractical for the current initiative, as it would be time-consuming and resource-intensive, so it was deemed out of scope for now.

CONCEPT 3

The third design closely aligned with the existing OLG app experience, but with a key focus on making the modal non-intrusive, particularly for mobile, where full-screen pop-ups are undesirable. Additionally, I wanted to avoid using a carousel, unlike the app, to reduce friction and create a smoother user experience. To address this, I experimented with a call-to-action (CTA) trigger for the modal.

Concept 3

The advantages of this design are that it mirrors the app’s user experience, which users are familiar with, and it minimizes development time and effort. The use of a CTA trigger also ensures that the modal is non-intrusive, allowing users to engage with feature updates on their own terms. This design effectively meets the goal of providing a seamless experience, so it was selected for further refinement and review.

User Research

GURILLA TEST

For the user research portion, I conducted a simple guerrilla test to validate the hypothesis that the "What's New" icon was not clearly conveying the intended message to users. I surveyed 12 non-designers in the office to gather insights. The results were unanimous: participants felt the icon did not effectively communicate the content, confirming the need for a redesign or alternative approach.

ORIGINAL ICON

When asked what the icon represented, some participants answered:

"Something alarming or a warning message?"

"A chat box, or something trying to sell you something, maybe a pop-up for converting for sale?"

RESULT

I researched alternative icons to better communicate the "What's New" message, experimenting with various animations for each design. After presenting the options to stakeholders, we decided on an animated CTA instead of an icon to maintain consistency with other UI elements across the website.

CONCEPT A

The design for this concept was refined to align seamlessly with the OLG website’s visual identity and adhere to standard modal conventions. Drawing inspiration from my initial research, I crafted the design for the "What’s New" modal to ensure consistency and user-centricity.

CONCET B

Additionally, I was tasked with drafting a scenario for testing a snackbar/banner against the "What's New" modal in A/B testing. The banner would feature the same copy as the modal but without an image of the promoted feature. Once both designs were finalized and approved, I collaborated with the research department to set up the A/B testing for both options.

CONCEPT B

A/B TESTING

After drafting the initial research questions, I collaborated with the research team to refine both the questions and objectives. Our primary goals were to:

Evaluate user perceptions of both designs in terms of visibility, clarity, and usefulness.
Identify pain points when interacting with the new elements.
Understand what users liked and disliked about each design.
Gather design suggestions or potential enhancements.
Determine which design to iterate on and move forward with for the homepage.

The user testing involved 14 participants, divided into two groups of 7. Group A interacted with Design A first, followed by Design B, while Group B did the reverse. The research team set up the test on UserTesting.com, and the sessions were opened to the public. All testing sessions were recorded and later reviewed by both myself and the research team to analyze key insights and findings from the A/B testing.

CONCEPT A & B

KEY INSIGHTS

Visibility, Clarity, and Usefulness:

50% of participants found Design A less noticeable than Design B.
79% found Design B more attention-grabbing and easy to notice.

User Pain Points:

Some users disliked the overlay screen takeover in Design A, while others appreciated the image inclusion.
Design B was seen as more inviting, but it did block content on the homepage, making interaction feel more forced.

Likes and Dislikes:

86% liked the color contrast and animation in Design A.
Many liked the freedom to scroll in Design B, though some felt it previewed content before navigating to a new screen.

Design Suggestions and Enhancements:

2/3 of users thought Design B was more visible, usable, and inviting.
Design A's image incorporation was well-received, but some wanted less intrusive interactions.

STAKEHOLDER DESCISION

From the user research, it became clear that Design B was more easily noticeable than Design A. However, Design B was also considered more intrusive as it blocked content on the page, while Design A was harder to notice but was perceived as less intrusive. Users appreciated the animation and image within the modal in Design A.

BANNER ANIMATION

The stakeholders ultimately agreed that the modal was the best solution. However, they decided to remove the CTA trigger, keeping the animation and integrating it into a “What’s New” banner on the modal to preserve a non-intrusive experience. Although Design B was preferred by the majority, the goal is to ensure a non-intrusive user experience, which will be prioritized in the next iteration of the design.

The next steps were to refine and finalize the designs based on stakeholder feedback and key insights as well as updated user stories.

CONSIDERATIONS FOR MOBILE

Initially, the mobile and web versions were the same, with the trigger and modal combination. Removing the CTA trigger for mobile resulted in a full-screen takeover on page launch, which conflicted with our objective of maintaining a non-intrusive experience. With this in mind, we decided to pivot and rethink the approach for mobile to ensure consistency and a seamless user experience across both desktop and mobile platforms.

EXISITNG DESIGN

To address the challenge of maintaining a non-intrusive experience on mobile, I implemented a design already in use for the mobile web: a collapsible sheet positioned at the bottom of the user’s screen. This approach ensured consistency with the existing designs and behaviors of the OLG website while being adapted for cohesion with the desktop version. The expanded state of the sheet was designed to mirror the modal, creating a seamless and cohesive user experience across both platforms.

Web Design System

NEXT PROJECT

RESULT

Increased user engagement through direct, contextually relevant communication.
Enhanced marketing effectiveness by spotlighting new games, features, and events.
Streamlined operations with reusable templates and reduced coordination efforts.
A stronger competitive advantage through proactive, user-focused communicatio

The "What's New" feature successfully addressed the challenge of communicating new updates without disrupting the user experience. Through iterative design and A/B testing, we refined the modal to be both visible and non-intrusive, ensuring it enhanced user engagement without obstructing content. The decision to remove the CTA trigger and incorporate an animated banner at the top of the modal added an element of delight, capturing users' attention in a non-disruptive way. The mobile design, utilizing a collapsible sheet, mirrored the desktop version to maintain consistency across platforms. The feature was also designed with flexible user interactions, ensuring the modal would only reappear based on user engagement or the priority of new feature releases. The final design was well-received by both stakeholders and users, offering an effective solution for communicating new updates while respecting the user’s flow and experience.

This initiative drives user engagement, boosts customer satisfaction, and supports OLG’s broader business goals while establishing a scalable framework for consistent communication.

Final Designs

DESKTOP

The final design incorporated key insights from the A/B testing. A major finding was that most participants felt the animated trigger was not visible enough, making the "What's New" modal easy to miss. However, users enjoyed the animation itself.

DESKTOP MODAL

To optimize the design, the CTA trigger was removed, and the modal was set to appear on page launch instead. This approach maintains a non-intrusive experience, ensuring the modal doesn't obstruct content while still giving users the option to engage with it or dismiss it. To preserve the animation element and enhance visibility, a banner was added to the top of the modal. This banner grabs the user’s attention in a delightful way, effectively communicating new and exciting feature updates without being disruptive to the user’s flow.

MOBILE

For the mobile design, I aimed to maintain consistency with the desktop version while utilizing the existing collapsible sheet design. To achieve this, the contents of the sheet are identical to those in the web version of the design. The modal will only appear at the bottom of the homepage upon launch, ensuring that the experience remains non-intrusive and does not disrupt the user’s flow. This approach aligns with the goal of providing a seamless, consistent experience across both desktop and mobile platforms.

MOBILE SHEET

Through collaboration with stakeholders, we defined the behavior and conditions for the "What's New" feature across both web and mobile platforms. Key decisions were made regarding when and where the feature would appear, as well as how it would behave:

Engagement: Once a user interacts with the CTA or presses dismiss, the modal will close and will not reappear until the next feature launch.
Non-engagement: If the user does not engage with the modal, it will remain on the homepage and will reappear on the next launch for a set amount of time, based on the priority of the new feature initiative.

This ensures that the modal is non-intrusive while maintaining flexibility in how often users are reminded of new features, allowing for both engagement and non-intrusive visibility.