Cuckoo App

As Cuckoo evolved, we needed a mobile app that mirrored this philosophy, offering an intuitive way for customers to manage their account, track usage, and stay in control right from their pocket.

‍

Spring 2025

Team: Lead Product Designer, Senior Product Designer (me), Product Manager, Principal App Developer, IOS Developer, Android Developer

‍

The problem

Customers wanted more control over their broadband on the go. The web version of My Account was optimised to be mobile friendly but limited by slower load times and missing features, such as self-serve troubleshooting. The new cross platform app delivered faster performance, smoother interactions, and personal touches like tailored notifications and quick self-serve actions, while matching the web experience.

The tension

With My Account features moving into the new app, close cross-team collaboration was essential to stay aligned with the business roadmap, maintain consistency, avoid duplication, and build for scalability while delivering quickly.

The insight & Impact

Through focused workshops, close design-development collaboration, and two-week sprints, the app squad launched the first version of the Cuckoo app in just a few months. Powered by customer data (Kraken) and connection insights (eero), it offered real-time account access, device visibility, and a mobile-first interface.

Results:

1. Feature parity with web My Account in V1
2. 92% of beta testers found setup smooth and intuitive
3. Adopted by 14% of customers (=80,000) within five months
4. 5.9% month-on-month increase in daily active users
5. 4.1 rating on the Apple App Store within months

‍

Roadmap

Our roadmap was focused on:

1. Managing your Account including move home, upgrades & billing
2. Managing your Wi-Fi network
3. Managing your smart home devices & users
4. Proactively troubleshooting issues and help

‍

‍

Process

Before designing a single screen, we needed to fully understand the problem from every angle. The discovery phase focused on uncovering what users truly valued, where they struggled, and how the app could create more value for the customer. To ensure a user-centered approach, we combined both qualitative and quantitative research methods:

• Kick-off Workshop: We engaged stakeholders from product, support, design, and engineering to align on objectives, expectations, and success metrics.
• User Research: We analysed support tickets, mobile web analytics, and customer data to identify recurring pain points and user frustrations.
• Competitive & Inspiration Analysis: We conducted focus groups and reviewed apps across telecom, fintech, and productivity sectors to understand industry best practices and discover opportunities for differentiation.

Kick-off workshop

Kickoff workshop to align the team: We brought together stakeholders across product, support, design, and engineering to answer:

1. Why do we need an app?
2. What are users struggling with today?
3. Where can we add value beyond the mobile web experience?

‍

‍

User research

We analysed support tickets, Web (My online account) analytics + self-serve feature usability, and customer data gathered by our research team. One recurring pain point stood out: Customer's wanted to check/ fix their Wi-Fi working without needing to call customer support.

‍

Web self-serve feature usability

Post-Live Customer verbatim

‍

Competitive and Inspiration analysis

We held further focus groups and explored apps in telecom, fintech, and productivity to see what users loved about mobile-first experiences and how they handled diagnostics. What we discovered.

1. Clear UI with at-a-glance info
2. Quick actions for common tasks
3. Clear step-by-step troubleshooting flows
4. Push notifications for critical updates

‍

Discovery

‍

Workshop learnings

Workshop learnings

Mood-board

‍

Mood-board

‍

Defining the problem

Discovery gave us lots of insights, but we needed to focus on what mattered most to create an app our customer would actually use every day.

Problem Statement: Customers wanted greater control over their broadband experience, from diagnosing and resolving connectivity issues to managing their account and services.

Customer Needs: We distilled research into three key user needs:

1. Clarity: Quickly understand what’s happening with your Wi-Fi.
2. Control: Fix issues or manage devices directly from the phone.
3. Confidence: Trust that your connection is working without having to call support.

Design Priorities: With insights in hand, we set clear design priorities for the app:

1. Mobile-first experience: Smooth, intuitive flows tailored to our customers
2. Feature parity + enhancements: Bring all My Account features to mobile while adding self-diagnose tools.
3. Actionable feedback: Give users immediate, meaningful results when troubleshooting.

‍

Problem statment

‍

Development of IA

With the My Account self-serve features defined as a blueprint, we worked with the product owner, engineering team, and stakeholders to prioritise app features into essential, desirable, and major, balancing business goals and customer value against technical feasibility and build / development effort.

‍

Mapping

We then mapped the prioritised features into draft navigation and user flows, creating a clear picture of how tasks connected across the app.

‍

Closed Card Sorting

To validate and refine the proposed structure, we ran a closed card sorting exercise using predefined categories, ensuring the navigation aligned with how users naturally grouped and searched for tasks.

‍

Developing

Building scalable app UI with atomic design

We built out the app components using an atomic design approach, ensuring each element, from buttons to complex modules, was flexible, reusable, and consistent.

By evolving our design system, Yolk, we were able to create a cohesive experience across the app while speeding up delivery. Components were designed directly in Figma and documented for handoff, making it easier for developers to implement and scale confidently as the product evolved.

‍

‍

‍

Designing core experiences for the Cuckoo app

The Lead Designer (Al) and I designed the homepage, Manage, Bill, and You pages for the Cuckoo app, creating a clear and seamless experience that helps customers check their service, manage plans, view bills, and update their account with ease:

‍

Login flow:

‍

Error flow:

‍

Onboarding flow:

‍

Support flow:

‍

Change your go-live date flow:

‍

Bill page flow:

‍

Rate us flow:

‍

Leave a review flow:

‍

‍

Personalisation page flow:

‍

Speed test page flow:

‍

Notification flow:

‍

‍

You page flow:

‍

Dark Mode:

‍

‍

Bringing helpful features to the Cuckoo app

New feature: Wi-Fi Self-Diagnose in the Cuckoo App. Customers can now check their connection, troubleshoot, and fix common Wi-Fi issues without calling support, giving them immediate clarity and control:

‍

My Account features into the app

We reworked web journeys for a mobile context, using patterns like bottom tab navigation and progressive disclosure to simplify tasks and reduce cognitive load.

We optimised visual hierarchy, touch targets, and reusable components for consistency, while adding native behaviours such as pull to refresh, swipe gestures, and push notifications for faster, more personal interactions. By building on a modular component library and collaborating closely with development, we ensured scalability, alignment with constraints, and rapid delivery all while maintaining feature parity with the web experience.

Here's the My Account feature, make a split payment transitioned into the app.

Development:

Make a split payment:

‍

Add eero mesh routers:

‍

Refer a friend:

‍

Flag a fault:

‍

Make a compliant:

‍

Easy renewal:

‍

Accessibility & Inclusive Design

I ensured the app is inclusive and fully accessible, meeting screen-reader standards for iOS and Android. This included optimising colour contrast, logical reading order, and focus for assistive technologies. Input fields feature clear labels and error announcements, images include descriptive alt text, and all interactive elements have semantic roles, making the app usable and understandable for everyone.

Contrast Grid

AI integration

integrated the Stark Figma plugin into the design workflow to automate accessibility checks

Input details and labelling

Screen Reader order

‍

‍

Testing the Cuckoo App

Once the features were designed, we ran a series of user tests.

Watching participants interact with the app and various features like the Wi-Fi self-diagnose flow revealed subtle pain points we hadn’t anticipated. This feedback directly informed refinements, from button placement to microcopy, ensuring the final app was intuitive and delightful.

User testing

Hi-fidelity prototype developed for testing

Scripted testing

showed that 93% of users navigated directly to the Wi-Fi self-diagnose feature quickly and without any friction

‍

Developed report

‍

Delivery

With the design system and components in place, we focused on rapid, reliable delivery. Using two-week sprint cycles, we worked closely with developers to ensure every feature, especially high-impact ones like Wi-Fi self-diagnose was built for mobile-first interaction and performance.

Key delivery practices included:‍

Weekly design-dev syncs to clarify specifications, edge cases, and interactions‍

Interactive prototypes in Figma for testing and feedback before development

Continuous QA and iteration on both iOS and Android platforms

Documented components in Yolk for future scalability and consistent implementation

‍