Tom Gillan

React Rugby

UX & UI Design

Product

2024

React Rugby helps coaches, analysts, and players turn raw match data into clear, actionable insights.

I led the UX and UI design — transforming a rough Excel-style tool into a responsive, accessible platform.

Process

My approach focused on auditing first and then improving the new MVP product that prioritised key value adding features and usability.

  1. Discovery – Identified usability issues and accessibility barriers within the original Microsoft prototype.

  2. Design thinking – Defined key users and goals through founder workshops, resulting in three proto-personas.

  3. Wireframing & UX design – Developed responsive layouts for desktop, tablet, and pitch-side use.

  4. UI design – Built a dark-mode interface optimised for clarity, accessibility, and data visualisation.

My approach focused on auditing first and then improving the new MVP product that prioritised key value adding features and usability.

  1. Discovery – Identified usability issues and accessibility barriers within the original Microsoft prototype.

  2. Design thinking – Defined key users and goals through founder workshops, resulting in three proto-personas.

  3. Wireframing & UX design – Developed responsive layouts for desktop, tablet, and pitch-side use.

  4. UI design – Built a dark-mode interface optimised for clarity, accessibility, and data visualisation.

My approach focused on auditing first and then improving the new MVP product that prioritised key value adding features and usability.

  1. Discovery – Identified usability issues and accessibility barriers within the original Microsoft prototype.

  2. Design thinking – Defined key users and goals through founder workshops, resulting in three proto-personas.

  3. Wireframing & UX design – Developed responsive layouts for desktop, tablet, and pitch-side use.

  4. UI design – Built a dark-mode interface optimised for clarity, accessibility, and data visualisation.

My approach focused on auditing first and then improving the new MVP product that prioritised key value adding features and usability.

  1. Discovery – Identified usability issues and accessibility barriers within the original Microsoft prototype.

  2. Design thinking – Defined key users and goals through founder workshops, resulting in three proto-personas.

  3. Wireframing & UX design – Developed responsive layouts for desktop, tablet, and pitch-side use.

  4. UI design – Built a dark-mode interface optimised for clarity, accessibility, and data visualisation.

Final product

  • Delivered responsive UX and UI system, ready for MVP build.

  • Founder secure funding to expand development.

  • Scalable design system that communicates complexity without overwhelming users and is adaptable to other sports.

Skip to end to see final design

The challenge

The original app worked, but only if you were an analyst. It was dense, hard to navigate, and almost impossible to use on a tablet or pitch-side. My challenge was to make it fast, clear, and usable for anyone in the game.

Audit and report

I kicked things off with a UX audit to see where coaches were getting stuck.

A few themes surfaced quickly: too many clicks, hidden features, and overwhelming tables. From there, I ran short workshops with the founder to define goals, audiences, and what the MVP actually needed to do.

My approach focused on auditing first and then improving the new MVP product that prioritised key value adding features and usability.

  1. Discovery – Identified usability issues and accessibility barriers within the original Microsoft prototype.

  2. Design thinking – Defined key users and goals through founder workshops, resulting in three proto-personas.

  3. Wireframing & UX design – Developed responsive layouts for desktop, tablet, and pitch-side use.

  4. UI design – Built a dark-mode interface optimised for clarity, accessibility, and data visualisation.

Key Insight

Each user required different depth of information, so the platform had to be modular, customisable, and navigable from multiple angles (top nav, filters, and cross-linked data).

Workshops

To ground decisions in real user needs, I mapped out three proto-personas a coach, a player, and an analyst — each with very different expectations. Together with the founder, we prioritised “easy-win” features using an impact–effort matrix and built accessibility into the layout from day one.

To ground decisions in real user needs, I mapped out three proto-personas a coach, a player, and an analyst — each with very different expectations. Together with the founder, we prioritised “easy-win” features using an impact–effort matrix and built accessibility into the layout from day one.

To ground decisions in real user needs, I mapped out three proto-personas a coach, a player, and an analyst — each with very different expectations. Together with the founder, we prioritised “easy-win” features using an impact–effort matrix and built accessibility into the layout from day one.

Information archetecture

The old app had too many pages doing the same thing.

 I reworked the structure around just four clear sections: Reports, Players, Teams, and Settings, and added cross-links so users could move naturally between data sets.

The old app had too many pages doing the same thing.

 I reworked the structure around just four clear sections: Reports, Players, Teams, and Settings, and added cross-links so users could move naturally between data sets.

The old app had too many pages doing the same thing.

 I reworked the structure around just four clear sections: Reports, Players, Teams, and Settings, and added cross-links so users could move naturally between data sets.

Wireframe

I led multiple rounds of wireframe exploration to define the product’s structure and navigation system. The new IA laid the groundwork for cleaner wireframes and a modular system that could scale across roles, devices, and future sports. Flexible navigation: cross-linking between performance, players, and videos. Responsive design: optimised for both pitch-side tablet use and desktop analysis. Data clarity: visual hierarchy and colour to reduce information overload

My approach focused on auditing first and then improving the new MVP product that prioritised key value adding features and usability.

  1. Discovery – Identified usability issues and accessibility barriers within the original Microsoft prototype.

  2. Design thinking – Defined key users and goals through founder workshops, resulting in three proto-personas.

  3. Wireframing & UX design – Developed responsive layouts for desktop, tablet, and pitch-side use.

  4. UI design – Built a dark-mode interface optimised for clarity, accessibility, and data visualisation.

Final visual design

The final UI brings structure and focus to a sea of numbers. I used a dark palette for contrast on-field, clear type for dyslexic users, and consistent spacing to keep everything readable. Each screen is dense with data, but still feels calm and navigable.

My approach focused on auditing first and then improving the new MVP product that prioritised key value adding features and usability.

  1. Discovery – Identified usability issues and accessibility barriers within the original Microsoft prototype.

  2. Design thinking – Defined key users and goals through founder workshops, resulting in three proto-personas.

  3. Wireframing & UX design – Developed responsive layouts for desktop, tablet, and pitch-side use.

  4. UI design – Built a dark-mode interface optimised for clarity, accessibility, and data visualisation.

Outcome

The redesign became the centrepiece of the startup’s funding pitch by helping them secure funding to take the product to market. React Rugby showed how early UX work can unlock real business value, not just better interfaces. If you’d like to see more, feel free to reach out.

My approach focused on auditing first and then improving the new MVP product that prioritised key value adding features and usability.

  1. Discovery – Identified usability issues and accessibility barriers within the original Microsoft prototype.

  2. Design thinking – Defined key users and goals through founder workshops, resulting in three proto-personas.

  3. Wireframing & UX design – Developed responsive layouts for desktop, tablet, and pitch-side use.

  4. UI design – Built a dark-mode interface optimised for clarity, accessibility, and data visualisation.

Other projects

Projects

Coming soon

React rugby – New product for sports tech company

Sports analytics app for rugby staff to inform data-informed decisions, tactics, training and scouting. Work helped secure funding for product development. Sole designer on the project working with the founder.

UX & UI Design

Product

2024

Coming soon

Cruisemaker – Group holiday planning website

Day zero UX and UI for a startup that helps you plan holidays with friends and families through their preference sheet. Sole designer on the project working with founder.

UX & UI Design

Website

2024

Want to see more or like to connect?

Want to see more or like to connect?

tomgillandesign@gmail.com

tomgillandesign@gmail.com

Instagram

Instagram

Linkedin

Linkedin