TabTouch Mobile App Redesign and UI Refresh

UI Design
Mobile App Design
UX Design

As the sole UI designer, I contributed creative input to the redesign of TabTouch's mobile app interface, aligning it with their new branding campaign, "The Touch," featuring Gene Simmons. The updated design improved usability, visual appeal, and brand cohesion, enhancing the overall user experience and positioning the app competitively in the Australian betting market.

Client: TabTouch
Project: Mobile app interface refresh to align with new branding and campaign, "The Touch," featuring Gene Simmons.

Role: UI Designer

The Challenge

TabTouch's mobile app had not been updated in years and was no longer in line with the new dynamic branding campaign. Although functional, the app lacked the visual appeal and user-friendliness of its competitors. The challenge was to completely overhaul the design to both reflect the updated branding and improve the overall user experience, ensuring it met modern standards and user expectations within the Australian betting market.

The Solution

To address the challenge, I conducted a thorough UI audit and competitor analysis, identifying areas for improvement and streamlining the app’s interface. With the recent partnership between TabTouch and Kambi, I leveraged aspects of Kambi’s design system to ensure a seamless integration of their sports data while maintaining design consistency across platforms.

Key Integrations

UI Audit & Competitor Analysis: Identified outdated elements and streamlined the interface using Jakob's Law for familiar patterns.

Integration with Kambi's Design System: Ensured seamless sports data integration while maintaining brand consistency.

Visual Updates: Applied bold purple and orange hues with subtle variations for depth, Material Design principles for consistency, and minimalist iconography.

Updated TabTouch Branding

Outcome

The integration of Kambi’s design system led to a smoother user experience, better engagement with betting features, and a stronger brand cohesion across mobile, web, and retail platforms.
A carousel showcasing upcoming major sporting events, allowing users to browse options quickly and easily.

Improved visual hierarchy on the sports homepage, with colour accents and event cards to make content more scannable.

Design Approach

UI Audit & Competitor Analysis

Conducted a thorough audit of the existing app interface to identify areas for improvement, focusing on outdated elements that needed removal or enhancement.

Analysed competitor apps to understand the current design trends and user expectations within the Australian betting market.

Implemented Jakob’s Law, focusing on user familiarity with key UI patterns across betting apps to ensure a seamless transition.

Wireframes & User Flow

Created wireframes to visualize the updated layout, ensuring intuitive navigation and clear visual hierarchy.

Key features incorporated into the homepage redesign included:

  1. Main Navigation
  2. Secondary Navigation
  3. Upcoming Races
  4. Featured Events
  5. Watch, SkyRacing, Blog, Tab Locator, Footer

Branding & Visual Design

Utilised the bold purple and orange hues from TabTouch's brand while introducing a toned-down, grey-offset version of purple to create depth and dimension.

Adjusted hues and introduced varying shades for different UI components to maintain brand consistency without overwhelming users with jarring colour contrasts.

Applied Material Design principles, creating rounded borders and streamlined icons to enhance visual consistency and user interaction.

Typography & Iconography

Simplified icons to a minimalist, monochrome style for better legibility and modern aesthetics.

Ensured the text was grouped according to UX Law of Proximity, providing users with a cohesive, easy-to-read layout.

Updated iconography to align with mobile app store guidelines for better visibility and recognisability.

Key Design Decisions & Impact

UI Components & Color Palette

Introduced a primary purple colour for call-to-action buttons, creating a clear visual hierarchy with contrasting colour choices for essential buttons like "Place Bet."

Used subtle background colour variations and emphasised key information cards to improve scalability and decision-making.

User Testing & Feedback

Facilitated user testing sessions to gather direct input on the interface's usability, making adjustments based on the feedback received.

The results were overwhelmingly positive, with users appreciating the modern and sophisticated look of the new design.

Results

The redesign successfully modernized TabTouch’s mobile app, aligning the user interface with the new branding and enhancing usability. Visual updates improved the app's flow, making it more user-friendly and competitive. The new design reinforced the brand's identity, leading to positive user feedback and an overall more engaging experience for all users.