NB188

Client

NB188

Industry

Online Gaming

Project

Mobile App Design

Role

UI & UX, Art Direction, Visual Design, Usability Testing

Tools

Figma, Photoshop, Illustrator, Blender

NB188 is a cutting-edge online gaming platform that enables users to place bets using various digital currencies. It boasts a vast game library provided by numerous game vendors, offering a diverse range of options including sports, esports, casino games, poker, slot games, and more.
 
By integrating digital currencies, NB188 ensures a seamless and modern gaming experience for its users. The platform caters to a wide audience, delivering thrilling entertainment and gaming opportunities across multiple regions is Asia.

: SOLUTIONS :


Challenge 1

Promote awareness for Daily Logins Campaign due to its low Click-Thru-Rate in Menu page.

The Daily Logins Campaign was initially located on the Menu page, resulting in a low Click-Through Rate (CTR). To improve this, a dedicated Daily Logins button was introduced as a seal badge positioned at the bottom right corner of the Home page. This button immediately captures users' attention upon landing on the Home page, prompting them to tap on it.

Consequently, a significant increase in the CTR for the Daily Logins campaign was observed following this change.

Challenge 2

Difficult to navigate to user’s preferred game due to the sheer variety of game library offered in NB188.

In the Home page, users can easily feel overwhelmed with the ever-growing game library (over 40) at first glance. To effectively tackle this issue, a series of game categories were created, namely Sports, eSports, Lotteries, Pokers, Casino and Slot Games.

This essentially sorts out different game provided by different game vendors to be placed neatly into their respective categories.

Challenge 3

Struggle to stay updated to the various ongoing promotions offered by different gaming vendors.

To effectively capture user’s attention, right at the first glance upon entering the app, the top banner section of Home page, with each banner rotating at 5 seconds interval, is dedicated for different promotions offered by different game vendors. It has successfully increased the Click-Thru-Rate to 35%, encouraging users to examine all the latest promotions in Home page.

Additional "Promos" menu was also featured in the main Navigation tab at the bottom. That way users can still check the ongoing promotions without first accessing through Home page.

Challenge 4

The need to use consistent NB188’s brand color and similar Design Language throughout the whole User Interface.

Blue color is the primary brand color of NB188. With the creative blend of different blue tints and shades, it was heavily featured throughout different sections across the entire app.

A whole new design system was established while working in this project. From the various range of headings to a myriad of UI components: Buttons, Icons and etc, were all built from the ground up, giving users a seamless and consistent experience while using the app.

: USER FLOW :


: STYLESGUIDE :

01. Typography

There are a total of 6 font sizes created for extra flexibility and better adaptation in different occasions.

X-Large (24pt) and X-Small (10pt) are used exclusively for One-off Heading and Footer.

Large (18pt) & Medium (16pt) are used interchangeably for most Headings while Regular (14pt) is the most common font size for content display throughout the app.

02. Iconography

A series of outline-style icons was created to promote simplicity and conceivability. Outline icon will then be turned into a solid-filled icon once activated to further elevate its emphasis or prominence. These 3D icons were rendered in Blender to give it a sense of realism.

This behavior is carried over to the rest of the app pages for the sake of consistency and ensures a cohesive user experience.

03. Colors

: WIREFAMES :

: HiFi MOCKUPS :

: GRID & ALIGNMENT :

Spacing in UI design plays a pivotal role in achieving visual balance. It sets up a steady and consistent pattern to guide users navigating through the app’s User Interface.

In this design, the 4-point grid system was preferred over the more popular 8-point grid as it generally allows more flexibility, accuracy and detail for more intricate elements & alignments in building denser User Interface. This is especially crucial when it comes to the precise arrangement of the elements (text, images, buttons) and spacing between each elements.

: APP ICON :

Stage 1

App Launcher Icon was first created in outlined shape with “NB188.com” etched into the icon for consistent brand identity. Font size of 7pt was used for minimum readability due to its length.

Stage 2

Icon colorization starts in Stage 2. Being the primary brand color, Blue was used extensively throughout the icon. Gradient technique was applied to the icon to achieve the 3D look.

Stage 3

Icon was further refined in Stage 3 to achieve a Neumorphism look. More highlights, shadow and inner shadow were subsequently added to the icon for the final polished look.

: VIP LEVEL :

NB188 uses a hierarchical ranking system called the VIP Level that categorizes players based on the accumulated amount of Deposit and Turnover. The current VIP Level comprises 10 levels, which comes with different lucrative bonuses and special privileges, challenging players to continue ascending through its levels.

Each medal with number carved in it represents its respective level. The overall appearance design of the medal is progressively developed and enhanced with more intricate details. Color, too, changes gradually from bronze to gold in the final Level 10. All the medal design here was first visualized in Adobe Illustrator before modelling it in 3D using Blender.

NB188 PROTOTYPE

Check out the working prototype developed entirely in Figma.

View Now
< Back to Home