Go back
Go back
#1 Betting Website of Turkey
Bilyoner.com is Turkey's first and most preferred online gambling platform. The company has a total number of members above +4 million as of 2020. They wanted to reinvent online betting and their online identity with a total remake of their website.
Bilyoner
15 weeks
Cross functional
Senior UI Designer
The stakeholders aimed to make Bilyoner's betting services as entertaining, innovative and reliable as possible for members at all times and any place through all possible channels.
Bilyoner's website holds an extensive amount of data presented to its users. The information presented for the users includes games' timelines, rates, players, etc. They needed a more usable, easier-to-understand information architecture. Plus, their visual world was extrelemly outdated and desperately needed a fresh look to support brand's viability.
Their navigation system was the first thing to change. We implemented a new navigation system to accommodate the complex variety of information presented. In this project, we prepared an end-to-end product starting from the very first step of the process with interviews till the end with testing and debugging.
Attractive things work better. Users often perceive aesthetically pleasing design as a more usable design. Researchers found that users are strongly influenced by the aesthetics of any given interface, even when they try to evaluate only the functionality of the product.
A regular user of Bilyoner faces so many choices and settings before they can make their bet. So much information has to be provided to the user in an easy-to-understand way, without further complicating it. The wireframe process required extensive UX benchmarking before we got to work.
Before we jump into concept design headfirst, we conduct a one-day workshop with our clients to have a deeper understanding of their vision for the new design. This workshop consists of 5 essential steps of the design process. With these steps, we wanted to create a short simulation of a designer’s creative process.
With the defining keywords the stakeholders produce, we shape the initial direction of the product's identity collaboratively.
Acquiring the keywords describing the product.
Matching abstract keywords with visual representations.
Understanding a designer’s way of thinking.
Discovering the tone of voice for the product.
After the UI Workshop, the visual world of the new Bilyoner was taking shape for us to follow. We were going to make it bright like the stars in the night sky, and we were going to make it bold like the night itself.
They wanted their users' excitement reflected and enriched by the website, when they're about to place their bets.
Before we jump into concept design headfirst, we conduct a one-day workshop with our clients to have a deeper understanding of their vision for the new design. This workshop consists of 5 essential steps of the design process. With these steps, we wanted to create a short simulation of a designer’s creative process.
With the defining keywords the stakeholders produce, we shape the initial direction of the product's identity collaboratively.
We put the search bar in a more visible place because, in the interviews, we observed the users going directly to the search icon to search for the specific games they have in mind.
We used a lot of icons throughout the website to support navigational items, different features, and the myriad of actions the users can take.
Since the topic was considerably niche, finding a ready-made icon set to cover all our needs was not an option for this project. So, we had to create dozens of icons from scratch and add their different usages to the design kit we created.
We created the pallet using the colours in the brand identity as our core, but we expanded the swatches to answer our needs. We added some dark greys and gradients to support our brand transformation into something more extraordinary and modernised.
The font used in this project is Inter, carefully selected from Google Fonts. It's a modern and sportive-looking, sturdy font. Inter is a variable font family carefully crafted & and designed for computer screens.
We avoided making massive visual shifts. Bilyoner had countless regular users, and we avoided the risk of disrupting their experience.
With that in mind, we still gave the Bilyoner a modern look and feel with more readable UI elements, soft shadows and a reviewed font hierarchy.
In the end, the UI felt familiar with considerably more breath space.
The website was still holding the design from the very first days it was launched. It was time to give Turkey's most preferred betting address the fresh and cool look it deserved.
-The website gained a fresh soul with new icons and an extended colour scheme.
-Switching the lighter theme to a darker palette bound the new identity and its elements.
-All the components were carefully redesigned to create an extensive design system at the end of the project.
-Illustrations were created to enhance the experience.
-Every little detail was reviewed to have better scannability and accessibility.
-New product features for watching live games were planned from scratch.
-Navigation is highly improved with the help of a sidebar.
-Going through the multiple bets is made more accessible.
Involving stakeholders from the beginning of the decision-making process was a good call. They felt empowered because they had a voice while the design took shape. And it was beneficial for us to have their expertise considered at the right moments.
They were amazed by the final product and stated their genuine satisfaction with how we led this process.
Next Project
