online sport betting company
Enchancing user experience
to boost online betting activity
product
Mobile app, Landing Pages
role
Product designer
timeline
1.5 year
tools
Figma, Adobe Xd, Miro, Clarity, Amplitude
Intro
Welcome to BETFAN – the ultimate sports betting platform designed for fans who love to wager on their favorite games, whether on mobile or web. In my role as a product designer, I collaborated closely with graphic designers, developers, project managers, and stakeholders to elevate the user experience. My contributions included redesigning key interfaces, optimizing workflows, and developing new features that enhance both usability and user engagement.
My goal was to improve mobile user experience by implementing visual refreshes and refining operational processes within the app. Through research-driven design, I introduced new features that not only enhanced the app’s visual appeal but also improved its overall functionality. This project was key in delivering a more intuitive and engaging platform for our users.
Here’s a look at some of the projects my team and I collaborated on.
I’m incredibly proud of what we were able to achieve together!
Refreshing the Homepage
When we took a closer look at our homepage, it became clear that we needed to make some significant changes to improve the user experience. The old design struggled with messy navigation and visual clutter, so we focused on delivering a clearer, more user-friendly interface.
Simplifying the Navbar
The first thing we tackled was the cluttered navbar. We removed unnecessary items to create a cleaner, more intuitive navigation experience. By focusing only on essential icons and information, we made it easier for users to find what they need without getting overwhelmed.
Fixing Banner Blindness
Next, we noticed through Clarity tool that the bets displayed at the top of the screen were largely ignored due to banner blindness. User interviews confirmed this, so we decided to remove these bets entirely. This allowed us to focus on elements that users actually engage with, like a larger, more visible promotional banner that grabs attention right away.
Enhancing Navigation and Filtering
We also added a LIVE toggle, allowing users to switch between prematch and live events with ease. This small but impactful change makes accessing live events much quicker and we saw a noticeable increase in played LIVE events. Additionally, we revamped the tabs for filtering sports disciplines, introducing pill-shaped buttons for popular events like La Liga, Premier League, World Cup. This change makes it more convenient for users to navigate through key sports events.
Refreshing the Bet Cards
We gave the bet cards a visual refresh as well, adding more whitespace and making key text bolder for better readability. This not only improves the look of the cards but also makes them more user-friendly.
Optimizing the Bottom Navigation
Finally, we turned our attention to the bottom navigation panel. We updated the icons to align with our design system and swapped out low-click elements like ‘cards’ for promotions. After running A/B tests, we saw a noticeable increase in clicks, confirming that this change boosted user engagement.
Key takeaways
The homepage redesign was all about making the site more intuitive and engaging for our users. By simplifying navigation, enhancing visibility, and optimizing user pathways, we created a homepage that not only looks better but functions better too. This project underscores our commitment to user-centered design, ensuring that every change we make is backed by data and user feedback.
Improving the Payments Process
The payments interface in its older version was cluttered and overwhelming, often leading to user frustration and potential abandonment of the process. To address this, we made a redesign aimed at simplifying the user experience.
Simplifying the Interface
Our first step was to declutter the entire payments screen. By removing unnecessary distractions, we created a clean, straightforward interface that allows users to focus solely on completing their transactions without unnecessary confusion.
Prioritizing Key Actions
Data analysis revealed that users were mostly using money amount input instead of payment method. With this insight, we change position of these 2 sections to make the money amount input more prominent and easily accessible.
Enhancing Accessibility and Speed
To further improve the user experience, we made the last used payment method and last deposit amount the default settings for subsequent transactions. This not only speeds up the deposit process but also adds a layer of convenience, reducing the steps users need to take to complete their payments.
Key takeaways
The redesign of the payments interface was all about making the process more intuitive and user-friendly. By simplifying the layout, prioritizing key actions, and enhancing accessibility, we’ve created a payments experience that is quicker, easier, and more likely to keep users engaged. This project demonstrates our commitment to refining every aspect of our platform to meet user needs effectively.
Upgrading the Coupons History
The old Coupons History screen lacked the engagement and essential information that users needed. It was clear that a redesign was necessary to make this feature more useful and visually appealing.
Enhancing Visuals and Information
We started by completely overhauling the visuals. The new design now presents much more information at a glance, including at least one event from the coupon, the odds, details about any bet bonuses, and quick action buttons for user convenience. This makes the Coupons History screen far more informative and engaging.
Customization and User Feedback
Based on feedback from user interviews, we also added the option to rename coupons. This small but meaningful change gives users more control and personalization, making their experience more tailored to their needs.
Streamlining the Interface
To reduce clutter, we hid less important details—such as the default money factor, reference number, and the exact time of the bet—behind an info icon that triggers a modal. This keeps the screen clean and focused on what matters most while still allowing users to access detailed information when needed.
New Sharing Options
We also introduced two new ways for users to share their coupons. They can now share an image of the coupon or copy a link to the bet. These options make it easier for users to share their betting activities with friends or on social media.
Key takeaways
The redesign of the Coupons History screen was all about making the feature more engaging and user-friendly. By adding more relevant information, improving customization options, and streamlining the interface, we’ve transformed it into a tool that users will find both useful and enjoyable. This project highlights our commitment to listening to user feedback and continuously enhancing the user experience.
Registration Process Optimization
The old registration flow was packed with too many elements, making it overwhelming and cumbersome for users. To address this, we embarked on a redesign focused on simplifying and enhancing the user experience.
Simplified, Step-by-Step Process
We broke down the registration process into a series of single-action screens. Instead of overwhelming users with multiple fields at once, each screen now focuses on just one piece of information—name, surname, phone number, or email address. This step-by-step approach makes the process feel more manageable and less daunting for users.
Better Accessibility
To ensure that the registration process is accessible to all users, we updated the font sizes, colors, button sizes, and contrast. These changes not only improve readability but also ensure that users with varying needs can navigate the registration process with ease.
Key takeaways
The redesign of the registration flow was all about making the process easier and more accessible for users. In the weeks following the implementation of these changes, we saw a noticeable increase in registration conversions. This improvement confirms that our efforts to simplify and enhance the user experience were successful.
Event Page: A Fresh Take on Usability
When I joined the team, the event page of our sports betting platform needed a serious update. The previous design was cluttered and lacked the necessary whitespace, making it less user-friendly. It was clear that a redesign was in order to enhance both the look and functionality of the page.
Decluttering the Interface
Our first task was to declutter the interface by removing unused and low-click elements. This allowed us to make more whitespace, making the design cleaner and more accessible. We also reworked the logic behind displaying bets, grouping them in a way that made it easier for users to find what they were looking for quickly.
Modernizing the Interface
We updated the design to align with our design system, switching from traditional tabs to modern pill-shaped buttons. This not only improved the visual appeal but also enhanced the ease of navigation. A new search tool was also integrated, enabling users to find events and place bets even faster.
Key takeaways
This redesign wasn’t just about aesthetics; it was about creating a more intuitive and user-friendly experience. The result is an event page that’s not only more modern but also significantly easier to use, reflecting our commitment to continuous improvement and user satisfaction.
Optimizing Social Media Templates and HTML5 Animations
During my time at the company, I noticed that our graphic designers were spending a lot of time manually creating social media graphics. This process was not only time-consuming but also repetitive, especially when it came to design creations that wouldn’t change for months. Recognizing an opportunity for optimization, I decided to optimize this workflow.
Seamlessly Updating Data
on Social Graphics
Preparing Reusable HTML5 Animations
Marketing team needed HTML5 animations for their campaigns, and we were determined to find a solution that was both efficient and elegant. After some research, I discovered a Figma plugin called Bannerify, which allows users to create animated banners from static frames.
I learned how to use Bannerify and quickly realized that, similar to the social media graphics, this process could be automated. Given that social creations only require updates every few months, it was worth the effort to create reusable templates.
Now, the social media team can easily update the necessary data in the graphics, plug the updated content into the template, and run the Bannerify plugin. With just a few clicks, they can export the final HTML5 animation, saving significant time and effort.
Key takeaways
By automating repetitive tasks in both social media graphic creation and HTML5 animations, we’ve significantly streamlined our workflow. These optimizations not only save time but also allow our design and marketing teams to focus on more creative and strategic tasks.
Ready to turn your vision into a standout experience? Let’s collaborate to build something exceptional together.