Super Sport: Mobile Web
Embracing simplicity and reshaping the mobile sports betting experience
Turning the complex desktop sports betting interface into a mobile-friendly version: a story of embracing 'less is more
The World Gone Mobile
In the wake of the success of SuperSport Live, we at minus5 found ourselves standing on the threshold of a new challenge - creating a mobile version of the full sports betting web for SuperSport.
It was a task as exciting as it was daunting. The goal was simple yet complex - to translate the full desktop web experience into the mobile realm and bring the intricacies of the desktop sports betting app to the restrained world of mobile while ensuring a top-notch experience for our players.
As the person entrusted with this task, I knew that this project was not merely about shrinking the interface to fit a smaller screen. It was about reimagining the experience, ensuring that it was easy, fast, fluent, and delightful to use.
I spent two to three weeks immersed in the design process, figuring out ways to simplify the interface without losing any of its functionality or charm.
Let's Dig In..
The Design
I have invested considerable time reflecting on and refining the strategy I want to implement and apply throughout the app. My focus has been on segmenting the sections and rearranging the views to ensure the app's speed, while also maintaining an elegant and user-friendly experience.
Some elements were relatively simple to adapt to the small screen, but others presented significant challenges in our unending pursuit of simplicity and an exceptional user experience.
In my experience, it's often simpler to identify the most frequent usage patterns and endeavor to standardize usability methodologies as much as possible.
This approach serves a dual purpose: it benefits your users by creating a familiar and consistent interface, and it benefits you both in the present and the future, by essentially establishing a standardized set of reusable and memorable UI use cases.
SuperSport Mobile Web - 2013 UI/UX Concepts
The Facelift
Several years after the initial launch, and following the creation of the SuperSport Sporti app, it was time for a swift UI update. My primary motive for this refresh was not to conform to contemporary aesthetic trends, but to align the brand experience with our other apps.
The aim was to offer our users the most cohesive experience available in the market, ensuring a seamless transition regardless of which SuperSport app they are currently using.
SuperSport Mobile Web - 2015 Refreshed UI/UX Concepts
SuperSport Mobile Web - 2013
SuperSport Mobile Web - 2015 Facelift
Boosting Up the Frontend
Once the initial designs were ready, I transitioned from the role of a designer to a frontend developer, eager to breathe life into the blueprints I had created. The development of this mobile web application was not just about codifying the design, but also a test run of a new technology that had recently surfaced - SCSS, a superset of CSS. This new technology was a game-changer, significantly enhancing the workflow of styling HTML.
While working on a frontend, I seized the opportunity to make the most of it. I used SCSS extensively, even going so far as to extend the SCSS compiler with new functionalities.
The compiler was written in Ruby, a language I was familiar with, making it relatively easy to write extensions (later, they moved to C++ due to the slowness of Ruby. Which, I you ask me, was a pretty good choice regarding developer experience).
The use of SCSS and the extensions I wrote revolutionized the frontend development experience for me. It streamlined our processes, enabling us to build the application faster and more efficiently.
With a new toolset under my belt, with variables, functions, mixins, lists, etc, the old CSS approach looked like a dead code compared to the dynamic nature of SCSS, where I could parameterize nearly everything.
A few years later, this parameterized approach proved invaluable again when we decided to refresh the UI with a modernistic facelift (modernistic at the time). Since everything was already set as variables (colors, typography, spacings, and so on), it was a matter of hours to tweak and polish the new look.
The Last Nail
Upon completion, the mobile web application was launched, and the reception it received was beyond our expectations. Our players embraced it wholeheartedly, appreciating its simplicity, speed, and user-friendly interface. Today, this application remains one of the dominant pillars in our offer across various platforms, mostly unchanged from how I had initially designed it. The experience, layout, UI/UX principles, and mechanics - all stand as proof of our commitment to user experience.
The success of the mobile web application spurred us to expand our horizons. A year later, I used it as a solid starting point to create an iOS and Android sports betting application called SuperSport Sporti.
Just like its predecessor, SuperSport Sporti became a hit among our players, further solidifying our place in the sports betting industry.
Less is More
Looking back, this journey is a story of simplicity, about the art of giving more with less, about understanding the needs of the users and delivering an experience that exceeds their expectations. It was an exercise in simplicity, a reminder that sometimes, less truly is more.
It is also about embracing new technologies and leveraging them to enhance day-to-day work processes to make them simpler, faster, and more efficient.
As I write this story, I am reminded once again of why I love what I do. The thrill of a new challenge, the joy of solving a complex problem, the satisfaction of seeing a product come to life, and the pride of witnessing its impact - these are the things that make my work so rewarding.
And in the heart of it all is a simple truth:
— the ultimate in sophistication is simplicity
