Co-design workshop

I was able to help facilitate a workshop with my team and people interested in sports betting. One activity was spent defining the user journey and the steps spent from. I helped two participants and write out what they believed the steps to be when it came to betting other friends. After that, we had participants write out their concerns or general feelings at each step we described. Finally, we had our users sketch out what they thought screens to each of these would be while talking over their sketches.

Some considerations I took into account based on the attitudes displayed within my participants and the others in the workshop, along with the product owner's business goals, were to:

1. Leverage social media design patterns, branding and familiarity for new bettors and to incite feelings of a social community for both types of bettors.
2. Keep in mind sportsbook conventions so as to not alienate experienced bettors

User types

From talking to the participants that I was moderating and hearing from the rest of the room, I perceived there to be two types of users. Based on their background and familiarity with sports betting, there was: 

• an experienced sports bettor who uses common sports conventions to navigate betting odds
• a newcomer who uses other social applications but needs help understanding how to read and feel confident in betting odds

Competitive Analysis

In order to better understand the commonalities between existing products and to assess their strengths and weaknesses, I conducted a competitive analysis.

Existing products seemed to have some form of table to display important figures (spread, moneyline/win, total (over/under). This format, however, did not seem to be learnable to newcomers in the workshop, so finding a way to make this more intuitive was one of the insights that guided my ideas.

Taken from the workshop:

• Making a bet: users mentioned wanting a “social media” feed, mentioned Twitter
• Betting a friend: thinking of friend’s or opponents stats, see if opponent is intimidating, banter

Users said they felt more comfortable in betting others and more trustworthy of overall app after seeing meta info on people’s profiles and amount of active people on bet/mutual information.

After some correspondence to my team lead and to engineering on what features were appropriate for the MVP, the designs should contain:

• Username
• Bets/money won
• Friends list
• Bet history

Bet history showing status was important for both a person visiting another user's page and for a user viewing their past bets.

And on the client side, making sure that these were answered:

• Did the bet fill?
• Who did I pick?
• How much was the bet?

I was also assigned to work on designs for the feed that contained the games users would be browsing. I consulted previous iterations my colleagues made and the feedback on those, taking into account:

• Visual feedback: white space preferred
• Team on top of game card was usually the home team for other sportsbooks

One thing I noticed was that the home team is usually displayed at the top. I considered this convention in my design to appeal those familiar with sportsbooks, along with other considerations, summarized as:

• Again from workshop data: Users felt more comfortable in betting others and more trustworthy of overall app after seeing meta info on people’s profiles and amount of active people on bet/mutual information
• My assigned use case: bet doesn’t fill, needs component to address bet status

I designed for different layouts and saw how many people preferred one layout over the other. Stacked teams were the norm visually amongst other sportsbooks and seeing my users' preference was important. In the end, I went with a side by side layout since both fractions of people from both user types favored it more than the vertical one.

Usability issues I found while getting feedback were: the money line highlighted green was originally supposed to signify positive betting odds, but most found it confusing without a label.

After my designs, my team made new iterations with new navigation and iconography. A new tab with icons for the bet status was added. The money line was also put into one number to get rid of repetitive elements and make more obvious who is winning. This new team iteration also contained games Wager would have available for launch, so NBA and NFL games only as reflected in the navigation.

Feedback showed that these changes helped with issues of my previous designs where users were unsure of: who was winning; if their bet filled, was pending, or did not go through; and what money lines meant.

For the landing page, I talked to the product owner who I considered a primary stakeholder along with anyone new to sports betting to get both potential user types.

I interviewed the product owner about how, as a frequent sports gambler, what would be things he would find important in partaking in a new sportsbook in general, and how Wager specifically feels to him.

One takeaway was that since Wager proposes betting without fees that go to the house, an experienced sports bettor may be doubtful. So making clear how this was possible was an important aspect to be conveyed. I also made sure to have inclusive language in the copy to make new users’ feel comfortable.

Taking into account minimal designs and preference for white space, I took visual inspiration from Robinhood, Twitch, Cash App, FanDuel, and social media applications. These were picked for their relevance to social communities and sports betting.

First landing page

Landing page with new visuals

I was able to make animations in After Effects to show off possible microinteractions the app could have with its newer screens. These were used in a marketing reel.