Overview
UX Cabin partnered with Noonan to completely refresh the user experience by aligning it with new branding, ensuring design consistency, streamlining onboarding, and enhancing navigation and usability.
Background
Since its launch in 2022, AI has grown in popularity, leading to the creation of Noonan, an AI-powered app that helps golfers make data-driven decisions to improve their game.
Problem
Noonan's original design felt too dark and clunky, needing an update to match its new brand identity and improve user experience.
Objectives
- Refresh the app’s appearance and user experience based on new branding guidelines
- Collaborate with the branding team to fully understand the guidelines
- Redesign the app’s UI elements, themes, and interactions
- Deliver a visually and functionally updated app that reflects the new brand identity and enhances user experience
Design Process
During the project, we reviewed the new Noonan brand guidelines and audited the app's design and user experience. We also looked at similar apps for design patterns, user flows, and best practices, gathering inspiration to address design challenges.
Audit Review of Existing App
After reviewing Noonan’s Figma file, we documented and addressed UI/UX issues across 21 user flows, including onboarding, play, and stats.
Design Planning & Research
After the audit, we gathered design inspiration, ensuring alignment with Noonan’s brand and user expectations. We explored the new brand guidelines, similar app design patterns, and mobile design best practices to improve usability. Ultimately, we chose the Ant Mobile Design System and incorporated golf-related imagery to shape the designs.
Re-Design Solutions
We started by designing the basic user flows, like the splash screen and onboarding, and then moved on to the more complex UI features with deeper user interactions and task completions.
Splash Screen
Noonan's current splash screen felt dull and overly technical with its dark grey colors. We needed to brighten it up and bring in more of the brand's personality right from the moment the user opens the app.
Profile
The Profile screen was redesigned to be visually engaging, easy to scan, and central to tracking golf activities and sharing stats.
Carl AI Chat
The Carl AI Chat combines smart, intuitive AI elements with the new Noonan brand to assist golfers in course discovery, club selection, and performance tracking.
Stats
The Stats screen now has an intuitive layout, prioritizing key performance metrics and offering filters for deeper insights.
Play a Round of Golf
The Play a Round of Golf screen offers a quick start with easy course selection, favorites, and richer search options, reducing setup friction.
Play Screen
The Play Screen delivers an immersive experience, featuring AI club recommendations, score tracking, hole progress, and a real-time map for focused gameplay.
Design System
The Noonan Brand Style Guide and UI Component Library combine to create a cohesive, modern user experience that blends the new brand with intuitive design. The style guide defines the visual identity, while the component library ensures consistent functionality across the app.
Noonan Brand Style Guide
The new Noonan Brand Style Guide focuses on creating a sporty yet professional identity with warmer colors, clean typography, and engaging imagery that reflect the energy of golf. It defines the brand’s voice as confident and approachable.
UI Component Library
The Noonan UI Component Library provides a set of well-designed, consistent components like buttons, navigation, cards, and forms, ensuring a smooth and intuitive user experience across the app.
Design Handoff
In preparation for the development phase, we have finalized the design assets and ensured all UI components, user flows, and visual elements are ready for handoff.
Results
The redesign of the Noonan app has greatly improved usability, brand alignment, and user engagement. The streamlined workflows, enhanced visuals, and smarter interactions now offer a more intuitive and enjoyable golfing experience.
