Smarkets

Trading on Sports and Politics

Smarkets is one of the biggest events exchanges in the UK allowing people to trade on various kind of events from politics to sports and current affairs.

Problem

The Smarkets business goal was to acquire more casual traders meanwhile not alienating all other user groups. In order to do that it was required to do a visual update that would attract traders and also identify and provide extended tools required for successful trading.

Smarkets before redesign

Users

Based on betting and trading patterns we were able to identify certain Smarkets user types.

Punters
Punters +
Matched Bettors
Casual traders
Experienced Traders
Bots / Syndicates

All of user types required slighlty different set of tool to sucesfully use Smarkets. Companys business goal was to attract more traders not alientaing other customer types.

Visual facelift

Before opening Sketch and diving into UI a decided to clarify my knowledge on current Smarkets brand and get on the same page with product stakeholders. In order to do that I conducted a Brand Archetype workshop. The result of the study was that the Smarkets archetype lies somewhere between the Ruler and the Sage.

That helped to define visual style direction: UI should feel strong, confident and bossy but also be smart, allow people to use intelligence to discover and understand opportunities. The other things I consider is that the app is going to be data heavy so I wanted to get rid of “chrome” to make data pop.

Choosing the right font

Another issue in Smarkets current UI was the usage of Freight Sans and Rubik type combination, Both of them were not supporting tabular numbers by default which was making reading numbers extremely hard. To select which font would be best for Smarkets, I conducted basic legibility test by making people read text and numbers and tracking time and amount of mistakes they made which helped me to identify Source Sans type family as best suitable for Smarkets. (Details of the study on Medium)

Improving home and listing pages

Another big issue with Smarkets was boring not engaging home page. We were experiencing a really big turn over of first time visiting users.

On top of that, we wanted people to do more casual browsing and exploring events that they even where not aware of.

I decided to give a try to grid view, that will allow to use more interesting and engaging layout. I also created a couple of different designs for tiles, changing the size and using imagery or charts for top events that would help guide users attention by creating visual hierarchy.

Adding trading tools

Next step was to figure out what trading tools are mandatory to do successful trading. To do that I decided to run a questionnaire to get quantitative data.

The study showed that most people would like to see Charts, Orderbook and Recent trades. They also requested the possibility to place additional order types like “stop loss” and “take profit“. These tools are pretty common to trading apps but the trick question was to how to implement them in a proper way. To diverge and get more ideas I decided to involve other designers and run a design sprint.

The next step was to choose a preferred direction and create wireframes to cover user journey.

While we were planning to drasticly change main user journey it was essential to build hi-fidelity prototype to test main interactions.

The results of user testing sessions showed that "traders" where completely happy with the design but it was hard to understand it for "mathched bettors".

Since we were aiming for traders we decided to proceed with it, but in a smart way, implementing it step by step

Result

Choosing the right metrics is hard. You could not use Page views and Session Duration or time on page as usually people could wait for a long time to find a possibility to trade. So for the home page and listing pages we decided to use Traded Volume as the main indicator of increased user activities and first-time user homepage to sign up conversion rate as an indicator or good performance of homepage redesign. Both metrics where slightly increased and we also got nice feedbacks from our users.