Designing a betting app that esports fans can trust

Dragoni is looking to break through into the esports betting market. As a new company, they reached out to me looking to simplify their product experience and design the UI for their web platform. With users’ money on the line, trust and first impressions are extremely important. Because of this, I encouraged them to also reconsider their branding to better reflect their values.

I began the project by adapting elements of the design sprint to learn how we might gain users’ trust, and keep it. The workshop aligned the team on where to focus their efforts and I left with a map of several user journeys and a ton of notes.

We made this map with sticky-notes and a whiteboard. It allows for the team to easily adapt and iterate over various ideas. I later recreated the map digitally for the team to reference back to.

We made this map with sticky-notes and a whiteboard. It allows for the team to easily adapt and iterate over various ideas. I later recreated the map digitally for the team to reference back to.

The Plan

Dragoni came to me with a functional prototype and a goal to launch a beta in time for the LCS and LEC leagues to start up again. This meant that time was the primary constraint of this project. First, we would rebrand Dragoni to a simpler more memorable logo to convey reliability. Then we would leverage match data and educational guides within the platform to better inform users. The hypothesis was that if Dragoni could empower its users to make their own informed decisions, more users would feel comfortable using the web app to place bets.

Other hypotheses revolved around gamification and community. Betting is already littered with cheap gamification elements and we didn’t want to prioritise features that could be seen as tricking or luring users into placing a bet. Community functionality was one of the most popular directions, but it also came with a lot more baggage than the team was ready for. A successful community would require a critical mass of users, moderation, management and new functionality.

The old logo for Dragoni. The only assets they had were low resolution raster files.

The old logo for Dragoni. The only assets they had were low resolution raster files.

Logo iteration

Initial sketches varied a lot, as I hoped to see what stuck with the team. My main takeaway was that the team wanted to have a dragon symbol in some form.

Initial sketches varied a lot, as I hoped to see what stuck with the team. My main takeaway was that the team wanted to have a dragon symbol in some form.

I first tried adapting their current logo to a more modern and simplistic style. Whilst I think it could have 'done the job' I had higher expectations of myself.

I first tried adapting their current logo to a more modern and simplistic style. Whilst I think it could have 'done the job' I had higher expectations of myself.

I'm a big fan of clean text logos and attempted to build a custom typeface for Dragoni. Unfortunately time was a constraint and I didn't think I could achieve the quality I was hoping for fast enough.

I'm a big fan of clean text logos and attempted to build a custom typeface for Dragoni. Unfortunately time was a constraint and I didn't think I could achieve the quality I was hoping for fast enough.

Taking a selection of sketches further in illustrator lead me to realising that the team were town between having a clear eye in the dragon, and having big wings.

Taking a selection of sketches further in illustrator lead me to realising that the team were town between having a clear eye in the dragon, and having big wings.

With minor adjustments, I presented two different types of dragon symbols to force the team to make a decision on wings or eyes. Wings won as we believed that they contributed more to making the icon look like a dragon.

With minor adjustments, I presented two different types of dragon symbols to force the team to make a decision on wings or eyes. Wings won as we believed that they contributed more to making the icon look like a dragon.

At this point, I had learnt a lot about what the team wanted to represent Dragoni.

  • They didn't like abstract symbols, instead they were confident in wanting a Dragon symbol. Particularly one with big, clear wings to make it easier to identify as a dragon at a glance.

  • They liked my use of bold symetrical shapes to convey a more reliable brand.

  • We liked the less common chapes used to contain the symbols.

I decided to take some of the more successful marks back to pencil and paper to combine what I had learnt...

The final design doubled down on the areas we had aligned on. Highly symmetrical, very bold, with uncommon shapes.

The final design doubled down on the areas we had aligned on. Highly symmetrical, very bold, with uncommon shapes.

Web App

Component Library

As an avid developer, I approach design projects from a more technical perspective. One manifestation of this is my component libraries. I find that designing in components makes handoff to developers much smoother. It also and allows them to make minor changes without being as dependant on a designer.

As an avid developer, I approach design projects from a more technical perspective. One manifestation of this is my component libraries. I find that designing in components makes handoff to developers much smoother. It also and allows them to make minor changes without being as dependant on a designer.

Surfacing data to users was an important goal for the team. For me, that meant leveraging context to assist users in taking the actions they want with less friction.

Surfacing data to users was an important goal for the team. For me, that meant leveraging context to assist users in taking the actions they want with less friction.

Dragoni will need to scale to support more games in the future. This is why I started building the interface for data types before focusing on the nuance of each game currently supported.

Dragoni will need to scale to support more games in the future. This is why I started building the interface for data types before focusing on the nuance of each game currently supported.

Screens

Dragoni are still testing their product. As requested, I've limited the page designs until a public beta is launched.

Each game has a dashboard with an overview of recent updates. From here users can explore deeper into the games events and matches.

Each game has a dashboard with an overview of recent updates. From here users can explore deeper into the games events and matches.

Event and match pages share a similar structure, each allowing the user to browse while keeping the livestream for a game open.

Event and match pages share a similar structure, each allowing the user to browse while keeping the livestream for a game open.

I plan to share more screens as soon as the new Dragoni site is live.

Outcome

I’m very happy with the work done on the visual identity. I believe the logo now appropriately represents the company as a more secure and responsible entity.

At this time, I’m happy with the web design, though I’m sure I’ll notice more room for improvement as time goes on. As with all new products without data and UX studies, a lot of the decisions we make are based on our logical assumptions and personal experience. I believe that making improvements to this project would require some quantitative data to inform our decisions.

Dragoni Logo

Dragoni Logo