Circles

Circles — Responsive Web App Redesign

Circles (Institute of Golf) is an intelligent golf platform designed to help players understand their performance and improve their game.

I joined the project during its later stage as the UI/UX Designer, leading a responsive design update that brought the existing desktop experience to mobile.

Previously, the product was effectively desktop-only. When users opened Circles on a mobile device, they were blocked by a message asking them to continue on a computer. The goal was clear: make the core experience genuinely usable on smaller screens without introducing unnecessary complexity or significantly increasing development effort.

Understanding the Existing Product

Because Circles was already a mature desktop product, I started by understanding what already existed rather than redesigning it from scratch.

I worked closely with the team to clarify requirements, then used the live product extensively in the browser to map key flows, interaction patterns and responsive challenges.

For more complex areas, I also inspected the existing implementation to better understand component structure, interaction logic and technical constraints.

This resulted in a detailed UX and responsive audit, which I shared with the team before moving into design.

Defining the Responsive Strategy

The audit highlighted several areas that required particular attention:

• Navigation and menu behaviour
• Data-heavy tables on smaller screens
• Charts and complex interactive components
• Pagination and supporting controls
• Component behaviour across different viewport sizes

With limited delivery time, the challenge was not to create the most flexible responsive system possible, but to find the simplest approach that solved the majority of real usability problems.

After testing different options, I proposed using a single primary breakpoint at 900px, allowing the team to maintain the existing desktop experience while introducing one focused responsive behaviour below that threshold.

This significantly reduced implementation complexity while still supporting the devices and scenarios that mattered most.

Designing for Mobile Constraints

Rather than simply shrinking desktop components, I reconsidered how complex interactions should behave on smaller screens.

I introduced responsive patterns for tables and charts, refined menu interactions, and designed a simplified one-size-fits-all pagination component that could work consistently across different contexts.

Where necessary, I made deliberate visual compromises in favour of usability, accessibility and implementation efficiency. For example, I increased the pagination button touch targets from 32px to 44px while simplifying the overall component width, making it easier to use and ensuring it could fit comfortably within a mobile portrait layout.

Throughout the process, I repeatedly tested the designs using Figma prototypes on real mobile devices to make sure interactions felt practical rather than only looking correct on a design canvas.

Outcome

The responsive strategy was well received by both the internal team and the client. More importantly, it gave the team a realistic solution that could be implemented within the available timeframe.

Following the update, Circles became fully usable on mobile devices instead of blocking mobile users entirely.

The project was later submitted to the Best Design Awards New Zealand, where it was selected as a Finalist — a strong recognition of the work delivered by the wider team.

Beyond the Responsive Redesign

My contribution to Circles extended beyond the responsive product update.

I also worked on the Webflow marketing website, improving and updating key product pages to better communicate the product experience.

Alongside the core UI work, I created and refined a range of micro-interactions and UI animations across the product and marketing experience, helping the interface feel more polished, responsive and cohesive.

This gave me the opportunity to contribute across product UX, responsive systems, visual craft and motion design within the same project.

Product Impact

Circles is used by elite players, coaches and development programs worldwide, from individual golfers through to national and collegiate programs.

The platform has been adopted by 100+ national champions and leading college teams, with 6 current or former World No.1 players using Circles as part of their performance development. In the 2024 LPGA Tour season, players who trained with Circles accounted for 40% of tour wins.

For me, this meant the responsive redesign was not simply a mobile adaptation — it helped make a high-performance product used in real training and competition contexts accessible across more devices.

What This Project Demonstrated

This project demonstrated how I combine UX thinking, UI craft and technical understanding to solve real product constraints.

I started by understanding the existing flows and behaviours, then translated that into a responsive strategy that balanced usability, accessibility and implementation effort. At the UI level, I refined complex components, interaction patterns and touch behaviours to make the experience feel clear, consistent and intentional across different screen sizes.

It also reflects how I work in practice: moving between product flows, interface details, interaction design and technical constraints, while keeping the overall experience coherent and shippable.