Pick the Winner
Kevin McGowan
UX Designer

Pick the Winner

ux design | mobile app

        

        

An app for award show party contests!

I designed an app that let friends compete over who can predict the most winners at awards shows, like the academy awards. The primary goal of the project was to update a decade-old site into a modern, user-focused experience. 

This was a solo project. My responsibilities included:

  • User Researching
  • Wireframing and Prototyping
  • UI design
  • Usability Testing
The old site needed more than a fresh coat of paint. 

The old site needed more than a fresh coat of paint. 

Problem Statement

Remake Pick the Winner so its small base of users has a better experience. The new design should also help attract new users. 

User Surveys

I sent a survey to a small group of current and potential users asking them to rank the usefulness of features, as well as provide feedback on the experience of creating a new user account and making their picks.  

  • I created a short Survey Monkey survey.
  • The number of responses was modest, only 6, but provided useful insights.
  • User comments helped identify two major pain points: the mobile experience and the confusing account creation/login process.


Surveys showed users were frustrated on mobile devices.

User Journey

I designed a user flow based on the features that were priorities and the paths the users would need to make to complete these actions.

Multiple paths: Two different user flows had to be considered. The first for making picks before the show and another for viewing the results during and after the show. 

Key user actions:

  • Creating an account, signing in, and resetting passwords.
  • Connecting to or creating a contest and inviting friends to join.
  • Managing user's profile.
  • Viewing/Posting to message board.
  • Make/View picks.
  • View the scoreboard/results.

Pick the Winner user flow.

Pick the Winner user flow.

Pick the Winner

Sketches

My first designs were paper prototypes.

Sketching ideas on paper allowed me to easily make changes and rapidly test designed on users. This lets me quickly find out what doesn't work with only a minimum amount of time invested.

  • I tested eight different iterations with four people. 
  • The design needed more consistency - especially how the award categories and picks are displayed.

Pick the Winner

Wireframes

Using what I learned from user feedback on the paper sketches, I created wireframes.

Guiding Questions

  • I created low-fidelity wireframes.
  • I used Balsamiq, which creates mockups that are intentional simple.
  • The advantage of these rough designs is that users are more likely to give honest feedback to something when it doesn't appear to be finished.
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing? 
  • How many iterations did you have?

UI Design

Once I tested out all usability mistakes, I started designing the final screens in Adobe XD.

Process:

  • I chose a visual style and branding that was bright and fun.
  • The picks page feature a column of dots on the left side. These show the user's progress as well as allow them to quickly scroll through the list.
  • The new design reduces the amount of effort required by the user. In the older site, it took 55 clicks to make your picks (two for each category and a final submit button). In the new design, it only takes 26 (one for each category).