Scope of work
BetHype approached us for a complete website overhaul following their recent rebrand with a new logo and name. Their existing site did not align with the new branding, and they faced technical challenges that required a full rebuild of their site code. This presented an ideal opportunity to reimagine BetHype’s digital presence from the ground up.
Research
We began by analyzing the existing designs to determine what could be salvaged and what needed to be reimagined, referencing the best in the industry as we dissected the challenge.
Branding & Style
Once we had analysed competitors and referenced the site’s needs, we started ideation focussing on style and colour, retaining the dark UI style and adding neon elements to keep inline with the clients vision.
Elements & Components
Understanding our parameters, we created components and visual elements to match this new style.
Visual design & Guidance
With all our new guidelines in place we re-built all pages and visual assets, emphasising the gold/blue combo which the client really liked.
Dark mode UI
All online casinos used some variation of dark mode as a default style allowing users to focus on activities for longer durations.
Standardised journeys
Much of the competitor's site journeys were the same or very similar, indicating users are familiar with popular actions.
Sidebar navigation
Most casinos use sidebar navigation to allow users to navigate, chat and interact with the site at the same time.
3rd party assets
Many providers use the same 3rd party games skinned to fit their site’s aesthetic. This is supported with supplied assets.
Flexible grid
Flexible grids are used to allow for a responsive experience, making the site fluid and functional at any breakpoint.
Custom games
Most competitors also made customised games to go with the 3rd party repositories, all of which were usually the same.
Social visibility
The brand application needs to be flexible for social content as promotion is done across various platforms by competitors.
Optimised formats
Various optimising techniques are used to reduce the file size of images including the use of WEBP and SVG formats.
Styles application
In the design phase, we re-visited the color palette, discussing what worked from the previous designs and refining it by adding complementary colors and gradients to enhance the overall vibrancy. We experimented with different color combinations for the new logo, eventually settling on a refined gold and ultramarine scheme that provided a more premium feel compared to the original orange and purple. We also focused on defining styles and components, such as text fields, buttons, and headers, to create a unified look across all pages. This allowed us to streamline the design and reduce the number of unique elements, ensuring a more cohesive user interface.
As the UI neared completion, we shifted our focus to banners and other assets, making sure they aligned with the new modern and digital-first aesthetic. Working closely with BetHype, we iterated on various styles until we achieved a look that felt distinctly digital, leveraging the neon color scheme to create a vibrant and engaging experience.
With the Interface designs complete, we cleaned up all pages, organising and annotating the handover files to guide the development team. We scheduled a call to discuss any outstanding information they needed to get started. One notable issue came up as a last-minute hurdle - the chat functionality, initially intended to be a flexible right-hand side drawer was causing issues elsewhere in the code and breaking pages our clients were due to show their investors.
The development team had already started building so this presented a problem, potentially causing extra build complexity and delaying the investment presentation. We discussed potential solutions and refined a temporary fix which was agreed by our client.
Original re-design concept
Temporary solution
The chat update was immediately put into development and delay averted. The takeaway from this rapid update was that all parties trusted each other's expertise, and we managed to collaborate and compromise gracefully on the fix. The designs for the initial idea were still valuable as they demonstrated the mid/tablet breakpoints in more detail and were implemented a little further down the development cycle.
From here things went well with both investors and development and soon BetHype was ready to soft launch. Having an existing user base and some partnerships opportunities on the table helped this process go smoothly. Within a short time, the team at BetHype were in need of new features for the site and a larger development team to implement them.
From a UI/UX perspective, the redesign has so far successfully delivered a modern, cohesive digital experience that not only aligns with BetHype’s vision but also addressed crucial user needs.
Ultimately, the overhaul not only resulted in a visually striking and user-friendly platform but also laid a strong foundation for BetHype's future growth, enabling them to compete effectively in the online casino space.
