What is Smarkets?
Smarkets is one of the biggest events exchanges in the UK allowing people to trade on various kinds of events from politics to sports and current affairs. Commonly seen as one of the top betting exchanges in the industry, they only claim a 2% commission on winning wagers, which is lower than many of their competitors, such as Betfair. This sets them apart.
My Role
As the lead UX/UI designer, I led the full end-to-end process from problem definition and user research to prototyping, testing, and final delivery for the Smarkets betting exchange redesign with a team of 2 other designers.”
Understanding the Problem
The existing experience presented two main challenges. First, users often felt overwhelmed when they encountered the core concepts of an exchange. Many struggled to understand the difference between “back” and “lay,” and the betslip didn’t always make commission or outcomes clear. Support queries reflected this: customers were contacting the team with simple questions that should have been self-explanatory in the product.
Second, the platform looked dated. Typography and hierarchy were inconsistent, interactions felt heavy, and the overall look didn’t inspire the trust you’d expect from a financial product handling real money. Compared to more modern financial platforms or even rival exchanges, Smarkets felt a step behind visually.
The project goals were clear: simplify the experience of placing and managing bets, bring transparency to commissions and outcomes, and update the UI with a clean, modern design that could scale across devices.
The existing app
The old navigation of the Smarkets app was not intuitive with a left and right off-canvas menus with a poorly structured sub-navigation which was not ideal for users to navigate easily. Similar poor patterns existed on the web platform which also needed a complete overhaul re UX and UI.
Research & Discovery
To ground the redesign, I started by reviewing competitor products like Betfair and Matchbook. These exchanges showed how dense odds data could be presented more clearly, but also highlighted where Smarkets could differentiate itself — with simplicity rather than complexity.
I ran interviews with both new and experienced users. Newcomers often said they felt “intimidated” or “unsure what to click first.” Experienced traders, meanwhile, wanted speed and efficiency; they didn’t want onboarding tips, but they did want instant access to liquidity and accurate commission details. These opposing needs became a central design challenge.
I also worked closely with the customer support and trading teams. Their insights revealed the same friction: new users struggled to understand “lay” betting, and power users wanted faster access to advanced features. These conversations reinforced the need for a design that could flex between education and efficiency.
Understanding the user
I conducted on-site user interviews to get a deep understanding of the people we are designing for, contextual inquiries, focus groups, and surveys to understand actual users, along with their needs, expectations, and goals.
Through mapping the journeys of different types of users, it became clear that each group had distinct stumbling points. Newer users struggled most during onboarding, choosing their first market, and understanding how commission would affect their returns. More experienced users, on the other hand, were less concerned with guidance and more frustrated by slower workflows and cluttered navigation on mobile.
By laying these journeys side by side, I was able to identify where the redesign needed to flex — providing clarity and reassurance for newcomers without slowing down advanced users who valued speed and efficiency.
Designing Sitemaps & User Flows
Mapping user journeys to reveal decision points, reduced friction, and aligned interactions with real user goals. By anticipating cognitive patterns and behaviours, we created intuitive paths that keep users engaged and in a state of effortless flow.
Understanding how users trade
It was important to understand how users trade so we could provide the best experience. We broke down the different types of trades users would place to so we could design a visual hierarchy of data that made sense.
Design Process
How we solved problems and created a sustainable process. We created a solid design process, to make sure we delivered consistent well-executed experiences for our customers.
Prototyping
To validate the redesign, I created interactive prototypes in Figma and tested them with a mix of new and experienced users.
The results were encouraging. New users were able to place a back or lay bet without external help, and they reported feeling “more confident” about what would happen before confirming. Experienced users moved through workflows more quickly and appreciated seeing commission calculated instantly.
Feedback also highlighted areas for iteration. For example, users initially overlooked the new commission explanation, so I refined the wording and added subtle emphasis in the UI. On mobile, testers preferred a more compact betslip, which led to further adjustments before launch.
The Redesign
The design work began with a clear principle: make the complex feel simple. The first major change was to visually separate “back” and “lay” actions using consistent colours, icons, and micro-copy. Tooltips and onboarding overlays were introduced to explain these actions in plain language, giving novices a safety net without slowing down experienced users.
We created a fluid tile grid system that would work across all platforms, Tiles were weighted by event volume traded utilizing different sizes with imagery and infographics to guide user attention and point to more interesting events with a focus on establishing reusable patterns to be used across the front-end interface.
The betslip was reimagined to show commission, potential profit, and potential loss upfront, updating in real time as users adjusted stakes. This addressed one of the biggest pain points: not understanding why a payout didn’t match expectations.
Visually, the UI received a complete refresh. I introduced a cleaner grid system, simplified typography, and a more neutral palette that let the odds and key actions stand out. The result felt more like a modern financial product and less like a cluttered dashboard. Accessibility was also improved through better contrast and scalable type.
Mobile design received special attention. A sticky betslip bar gave users constant visibility of their bets, and bottom-sheet modals were introduced for easier interaction on small screens. The new design aimed to feel fast, tactile, and consistent with mobile-first financial apps.
Highlights of Final Screens:
Clean, intuitive layout with step-by-step guidance.
Betting tile with real-time liquidity and odds updates with smooth microanimations
Betslip concise but comprehensive: shows stake, commission, profit, loss estimate.
Info icons offering educational bite-size explanations on hover/tap.
Mobile First Adjustments:
Bottom sticky betslip for easy reach.
Collapsible educational tooltips to keep screens clean on smaller devices.
Designing Real-time trading charts
I designed advanced charts that allows users to track the historic price of the executions on any contract within any market and see a greater level of historic data for every market on the exchange. Users could also see the volume of bets executed on each contract over time.
On the chart we visualized in-game events to improve the users experience.
Web experience
The new homepage presents odds as implied probabilities and percentages in a way that we hope is easier to understand for people who aren’t necessarily familiar with betting or exchanges.
Post Event updates
Providing the user with a unique experience post event. Showing detailed race data to keep users engaged for longer.
App experience
The final solution combined simplicity with modernity. The interface was clearer, with strong hierarchy and a refreshed look that better represented the Smarkets brand. Educational moments were woven in without overwhelming advanced users, and the mobile experience became smoother and more accessible.
Results 3 months after launch
~32% increase active monthly users
Rating increased from 2.3 on Android to 3.7 and for 4.5 on iOS
60% increase in app install in 3 months
