Background
Charles Schwab had recently launched a new platform with several apps within it, with the main purpose being to enable Schwab's corporate clients to manage and oversee the regulatory trading compliance of their employees on their own. The goal being to reduce the risk of illegal trading activity as well as reduce Schwab's risk of being responsible if any illegal trading did take place by one of Schwab's clients.
Challenge
Canada has stricter gambling laws than the U.S that impacts the user flow.
Canada has stricter accessibility laws than the U.S.
Short project timeframe.
Results
I had a very limited amount of analytics or research to make design decisions due to the amount of red tape. This was also a brand new platform and team supporting it, and I was the first UX designer to ever be on the team.
13%
5%
The Problem
Many people don’t believe that people actually win prizes playing McDonald’s Monopoly.
Initial Stakeholder Kickoff
Understanding Game Mechanics
The McDonald’s Monopoly game is a complex experience that encompasses the physical restaurants and game stamps, a variety of ways to get game stamps and win prizes (instant win, collect to win, bonus chests), varying levels (value) of prizes and odds of winning them, winner verification, different processes for claiming prizes depending on the prize, privacy, security, legal requirements.
Business Goals
Refresh look and feel
Increase both excitement of winning and winner believability
Increase re-marketing on weekends to drive people back to restaurants
Business Goals
WCAG 2.1 AA Compliant
Must be designed for iPhone 6 size.
Design must account for two different header sizes (microsite and Global McDonald’s App (GMA) web view.
Design must include screens for different program phases.
Gathering Data from Previous Year
Data from UK Monopoly
Should we have a Winner Page?
These charts, which came from the United Kingdom’s Monopoly website, helped us make the decision to not design a Winners Page because it had a low number of views and user engagement.
Instead we decided to focus more on increasing engagement and winner believability through the Prize page and Bonus Chest page. Ultimately, the Prize Page would become a combination of the Prize and Winners page by showcasing prizes people had won.
Synthesizing Data and Strategizing with Stakeholders
After reviewing the data and discussing it with business stakeholders, it was decided that the strategy at a high level should be to focus on the following.
Improve upon the Prize Page and Claim Prize Page.
Incorporate Bonus Chests as an additional reward and incentive to play.
Make the Home Page and Prize Confirmation Page more engaging and exciting.
Find ways to make it more user-friendly / easier to enter codes.
Further Brainstorming with Creative Team
I collaborated with graphic designers and the creative director to come up with ideas on building trust with customers, increase winner believability and get drive people to get more codes to enter.
Incorporate animation into hero sections to increase excitement and engagement.
Use social media influencers on YouTube, Instagram, etc. to show prizes they’ve won at McDonald’s to help increase winner believability.
Create cheeky video “Do people really win?” for website.
Show feed of recently won prizes that constantly updates every few seconds or minutes.
Encourage restraint in entering too many game codes (purchasing too much food). This could reduce return customers, but improve brand perspective, trustworthiness, and potentially increase the number of different people that play McDonald’s Monopoly.
Five Why's
Why don’t people believe people win prizes? Because they don’t see or know anyone who has won any prizes.
Why? Because almost nobody clicks on the “share” button no matter how big and prominent the button is.
Why? Because people are afraid
Why? Because fast-food is generally considered to be less healthy so they are afraid of what people will think or say about them. They might also be afraid for their personal safety and that someone might try to find them and steal their prize.
Why? Because historically McDonald’s and other fast food chains used to not offer healthy options which has created cliches about fast food. Many people have lost trust in companies for the way companies collect and share people’s personal data, and people might not understand how McDonald’s is using and protecting people’s data.
Narrowing Down and Sketching Best and Most Plausible Ideas
I collaborated with graphic designers and the creative director to come up with ideas on building trust with customers, increase winner believability and get drive people to get more codes to enter.
Incorporate animations into home page and when user’s won a prize or bonus chest.
Show how many prizes have been won and/or the people who have won prizes on the Prize Page.
Add “Enter Mode Codes” re-marketing sections on the Prize Page.
I also began sketching out ideas for how to design the Bonus Chest cards, as well as ideas for redesigning the home page and other pages.
Creating and Presenting Initial Concepts to Stakeholders
For the Home Page, I laid out an idea for using animation in which the initial image would game stamp codes and then three images for claiming prizes, tracking properties, and bonus chests with arrows pointing to them. The idea was to not only add excitement, but to help visually teach the user how all their codes can be used to win prizes and rewards.
The business stakeholders loved this idea, but unfortunately we didn’t have the time or resources to make animations this time around, but the stakeholders were interested in using this idea for the next year. These early wireframes included other important screens such as how the prize confirmation page would look if the user won just a prize or if they won both a prize and a bonus chest.
Conceptualizing a New Prize Page to Build Trust
I designed and presented several wireframe concepts based on the ideas we generated during brainstorming sessions. The business liked the ideas, especially the idea of using a collage grid of prizes won, but because of accessibility and back-end technical restraints it was decided to do a more simple design as shown below.
Design Decision for Prize Page
To the left is the high fidelity wireframe of the final Prize Page design, which showcases recent prizes that have been won with the first name only of the person who won it and what province they’re in.
Potential winners have the option to give their approval for this by checking a box when they claim a prize.
Privacy concerns were a major consideration for how this would be designed. Potential winners have the option to give their approval for this by checking a box when they claim a prize.
Increasing Awareness and Engagement for Bonus Chest Page
Add buttons to add another code and to view all 8 Bonus Chests to help increase user engagement and awareness.
Make it easy for people to see what the next Bonus Chest (reward for entering codes) and track their progress towards unlocking it.
Show the number “2/5” next to the progress bar and using other visual indicators like the arrow symbol.
Using descriptive language for buttons and copy.
Avoiding the use of things like carousels, which are not accessibility friendly.
Updating the Information Architecture
Laying Out the Board
Collaborating with Graphic Designers to Bring the Game to Life
I collaborated closely with graphic designers to create the visual design. The visual design went through five iterations in which I also consulted on the style, sizing and placement of graphics.
I played a large role in by reviewing each screen in-depth and providing feedback for improving usability, accessibility, and technical feasibility, as well as the look and feel. Here is some of the changes made based on my feedback:
Too many different styles. There should only be two button colors and they should all be the same shape. Adjacent buttons should not have the same color.
Add drop shadows to buttons.
Remove/shrink any graphics or illustrations that are overlapping a button.
Will the “Claim Prize” button on the home page always show up? Most of the time users won’t have a prize waiting to be claimed?
Bottom Nav Bar:
Should have a singular color scheme.
“Add Code” feels disabled.
Add divider lines between nav bar buttons
Most if not all the graphics are very large and take up a ton of space and push up against or cover copy and buttons.
“How to Claim” link is indented, unlike the “View Collections” link
Outcome
2.6 million
Visitors
13% YoY
Visitor Growth
11 million
Code Entries
5% YoY
Code Entry Growth