GentingBet Live UK Casino App Design & Development

Project Introduction

Genting, a global brand with over 50 years’ heritage in entertainment, operates land based and online casinos. GentingBet, which is a part of the Genting group of companies, approached Degree 53 to design and develop their Live Casino app to meet the latest Apple App Store guidelines.

The Brief

GentingBet already had a responsive website and container apps for sports and casino. However, the Live Casino iOS app would be the first step to offer as much native functionality as possible for a successful App Store submission. Genting also wanted to update branding and improve the overall usability of the app.

Genting
genting-case-study-old-format-4.jpg

The Challenge

The app’s design was initially based on Material Design, which works well for mobile web and Android, but wasn’t created with Apple’s guidelines in mind. We needed to recreate the responsive website in the iOS format to ensure a successful approval by Apple and to provide a great gaming experience for the iOS customers.

Besides design improvements, Genting’s app required development to support all native features. It was using webview for certain content to redirect customers to a browser, which took them away from the app. Moreover, all casino games were served in an iFrame, which also counts as an external window.

This is an important factor for Apple and they ask app owners to ensure everything is contained within the app for ease of use. Moreover, Apple doesn’t want container apps to be able to change the HTML after the approval, as it could potentially be malicious or irrelevant to the expected content. We needed to change how the content was served to meet this requirement.

Our Approach to meeting Apple’s design guidelines

App Design

Firstly, our designers carried out a review of the GentingBet Live Casino iOS app and mobile website to identify areas where native UI features would be required and which native functionality could be added to improve the overall user experience. We worked alongside Genting’s designers to ensure they were involved in the whole process to incorporate their requirements and guidance into the app.

Some of the key features that we worked on to meet Apple’s requirements were:

Onboarding - we wanted the initial app launch to be a welcoming experience and designed different onboarding screens to help customers become familiar with the app.

Casino lobby - we wanted to avoid side-scrolling and making the lobby look like the App Store, as Apple stress that designs should be original and unique. To address this, we worked on vibrant and fluid navigational components, such as the top navigation and the tab bar, to create a clean and familiar native experience.

genting-case-study-old-format-5.jpg

Secondary navigation - we created a More tab to house secondary navigation elements, such as account services, payments, responsible gambling tools, help and other content that didn’t necessarily need to be part of the main user journey. Using the More tab helps to restructure the Material Design architecture into a more iOS-friendly format, focusing on key customer journeys and features, whilst offering easy access to other services if needed.

All Games list - similar to the More tab, we created an All Games list to contain all available games within the app for customers to scroll through, which is similar to a contacts list instead of browsing the App Store-like format.

App Store screenshots - we wanted to cover all bases for the Genting app’s successful approval to the App Store. So we also worked on redesigning the screenshots to provide a clear, realistic view of the app and to help customers get a good understanding of what to expect before they download it.

genting-case-study-old-format-6.jpg

Mobile Web Development

Because we were working on a container app, which meant restructuring the Genting website to an app format, we needed to work in parallel with their web developers. The app development process needed to be collaborative for both our team and Genting to work on a solution that would work from both the web and native iOS sides. We spent time with the Genting developers team to share our expertise to help them implement a mobile web functionality for the app.

To address the HTML issue, we advised to implement a Node-based solution for the app. Node.js helps to perform web-based/JavaScript tasks outside of a browser, which is excellent for container apps that need to be light and quick. At the same time, we implemented the required native functionality for the app. We wrapped the website in the app binary, which still allows Genting to update the app via a CMS. This saves significant time on managing two codebases.

Native App Development

To address the technical iOS app challenges and to add more native functionality, we needed to update the way games and other content were displayed, as well as working in the native design elements to enhance the user experience.

Casino games usually come from numerous providers in different formats and capacity. Since Apple doesn’t allow to serve games in an external window, we had to work with third-party casino game providers to come up with a better solution that also wouldn’t overload the app. The games developers created an SDK for us to use with Apple On Demand to house assets like images and sound required for the games. The customer downloads them once they install the game, and this way, they don’t overload their devices with unnecessary data.

genting-case-study-old-format-3.jpg

In addition, we added the following native features to make the entire app more interactive.

Push notifications - we wanted Genting to be able to communicate with their customers via push notifications which would prompt them to engage with the app.

Location services - we needed to make sure the app was compliant with geolocation restrictions and customers would be able to access it or receive help if they had any queries about it.

Onboarding - we embedded the onboarding process for new customers to help them learn about the app and make the initial launch more welcoming.

Biometrics - we introduced biometric login options to streamline the process, as well as enabling customers to make use of these native features.

Top navigation - we created a clear menu which the customer can swipe through to filter games by type and favourites. This way, it doesn’t take up a lot of space and the minimal design helps customers focus on the games lobby.

Tab bar - Tab bars are a feature used in many iOS apps and are looked on favourably by Apple. We kept it simple and included the key customer navigation points in the always available tab bar.

Menu navigation - The menu that houses all additional content on the site has been delivered natively too, ensuring that all main navigation points throughout the app use native components.

Native wallet - The wallet was a key interaction area for the Genting customers on the website where they need to manage their funds easily. We built a fully native wallet, utilising the modal view, that provides a more streamlined way to deposit funds. It incorporates the already existing ‘Quick Deposit’ feature that makes the process extra quick.

App analytics - we enabled Genting to monitor app activity with app-specific analytics. They can track different events on the app and use this information for marketing or improvements regarding the user experience.

genting-case-study-old-format-7.jpg

The Result

After lots of great collaboration, we successfully submitted the GentingBet Live Casino app to the App Store. We delivered a hybrid approach - an embedded container app with native styling and features that make it as app-like as possible and meet Apple’s standards.

The new app has a modern look and feel, and enables Genting to easily add new games and native functionality incrementally. It incorporates the latest Genting branding and has a clear customer journey. The navigation is simple and helps the customer find their favourite games. The modern style focuses on rich game tile visuals, making use of different native functionality, such as the tab bar, top navigation and larger games icons.

Now, we’re supporting Genting with further integrations and continue to add more native features where we can.

Creating a hybrid approach is an effective alternative to building a fully native app if a full native rebuild is not feasible to meet the Apple Design Guidelines.

I'm very excited about our new Casino app and I'm glad Degree 53 have helped us create a great product that meets the Apple Design Guidelines. When we first heard about the design changes to container apps, we were unsure how to approach a redesign and how long it would take us. Degree 53 stuck into the project, carried out extensive reviews and research and worked together with our designers and developers to share their expertise. This was a truly collaborative process and together, we came up with a great alternative to an app rebuild. Our new Casino app has a modern design and a much clearer customer journey. I look forward to continuing working together on our app with Degree 53 and can't wait to hear our customers' feedback.
Jeremy Taylor
Managing Director - Genting Online

Get in touch with us!

Contact us about your project or query to find out how we can help.