Motivation
Be the first in the world to provide an online contest of this type. Similar contests were in-person only, and we wanted to offer an online version. Our game masters saw huge potential in the global audience that we wanted to capture.
Goals
🎯   Create a mobile-first, fully digital experience with unambiguous and easy-to-use UX,
🎯   Allow users to pick their teams, and show their weekly picks, results, history, and leaderboards,
🎯   Allow users to easily purchase multiple entries into the contest
Roles & Responsibilities
◾   I designed the Product from scratch and led UX efforts during the entire Product lifecycle as a UX Designer.
◾   I held Discovery workshops, Stakeholder interviews, Stakeholder feedback, and Usability Testing sessions
◾   I collaborated with: 2 Game Masters, 1 Art Director, +3 C-level stakeholders
Product Design Process
🔍   Discover (Discovery workshops, Stakeholder interviews)
🛠️   Prototype (Low and high-fidelity mockups, defining information architecture, UX design)
🧪   Test (Usability testing)
📦   Deliver & QA test
Discovery & Prototyping
NFL consists of 272 games, with each of the NFL's 32 teams playing 17 games during an 18-week period. So, we wanted our users to be able to explore their weekly picks and follow along. Each week they had to pick 5 games and winning teams. If their guess was correct, they would earn points.
(Win = 3 points, draw = 1 point, loss = 0 points)

The guiding principle was mobile-first, as the majority of our users bet on their mobile phones. Early in the project, I started mocking up the information architecture and the way to show picks and game results.

The hardest part was defining the UI for the main interaction - picking the teams and showing the results. I opted for a header containing overall stats on the contest, a horizontal gallery of weeks with weekly point counts, and an always-visible footer containing current weeks' picks:
.
.
I've created a low-fidelity interactive prototype, so we could test the interaction and information architecture:
.
.
✔️   After a series of feedback sessions, we were happy with the flow and continued on.
Solution
To participate in the contest a user must purchase an entry (or multiple). Since we are dealing with existing users, their balance was known, and during the contest flow, managing finance is not an option. The flow is straightforward with no obstacles:
.
.
The main screen is a weekly picks/results page. Each week has its' own dedicated page, which can be accessed from the list (horizontal slider).
In the list, each week has a total of points as well as an alert indicator for unfinished picks. This shows the weekly results without the need to drill down into each week.
We're also reusing the pick interaction/UI to show the results, together with the bottom footer. This makes it recognizable for users and reusable for developers:
.
.
Lastly, the contest needs a scoreboard and the ability to search for other users. We made the search contextual, showing results from the contest first. The UI for picking weeks was minimized to the dropdown menu, as we no longer show the total points per week:
.

That's all for this project! 👇 Check some of my other work

Back to Top