Conditional
Formatting

ROLE

Product Designer
User Research

CLIENT

SugarCRM

TIMELINE

9 Weeks

Overview

This project focused on introducing native conditional formatting into Sugar’s core platform to help users more easily interpret data and prioritize work. While Sugar already surfaced a large amount of information, it relied heavily on numeric values and text labels, requiring users to slow down and interpret meaning manually.

The goal was to create a consistent, configurable visual system—using color, text styling, and badges—that could scale across modules, reports, dashboards, and devices without introducing technical complexity for administrators.

The Problem

The current approach to conditional formatting in Sugar — using the Highlight field — is fundamentally developer-centric, brittle, and manually intensive. It requires coding, template management, and layout maintenance, making it inaccessible to the average admin or business user. This results in high setup costs, inconsistent visibility across views, and reliance on fragile workarounds like shadow fields. Your design solves this by giving users built-in, governed, UI-driven conditional formatting that works everywhere without custom code.

  • Field colors behaved differently depending on where they appeared

  • Badges were hardcoded and inconsistent across modules

  • Report and chart colors varied unpredictably

  • The existing Highlight field today is a work around, however it has its challenges:

    • Requires Coding & Developer Setup

    • Not natively reportable or consistent

    • Manual layout maintenance

    • Limited support

    • Only shows up on record views

As a result, users often exported data into spreadsheets to recreate basic visual prioritization, introducing manual effort, data drift, and broken workflows. Admins lacked a reliable way to apply visual cues that were both configurable and consistently respected throughout the platform.

The Goal

The goal of this project was to introduce native, scalable conditional formatting into Sugar’s core experience—enabling users to quickly understand what needs attention while giving admins full control over how visual cues are applied.

Specifically, the solution needed to:

  • Easy & configurable setup through a UI style picker experience

  • Apply visual formatting consistently throughout the product

  • Support both static and data-driven conditional logic

  • Be configurable without code or unsupported packages

  • Respect accessibility, theming, and governance requirements

By addressing these goals, the feature aimed to reduce reliance on external tools, improve decision-making speed, and elevate Sugar’s visual clarity to match modern enterprise expectations.

Competitive Research

As part of research, we reviewed a range of CRM and non-CRM tools that all did conditional formatting in their own ways. This review focused on identifying patterns that scale well and pitfalls that introduce complexity.

User Research

To

Journey Maps

Mapping the end-to-end experience for key personas, identifying pain points and opportunities to design solutions that fit seamlessly into their workflows.

Information Architecture

I designed ClubSphere’s information architecture around a single central hub to support multiple roles without fragmenting data. The Squad Hub anchors the system with a real-time view of player availability, fitness, and performance, while core workflows branch off as focused modules. By centering the architecture on the player and ensuring data is written once and shared across the system, the design reduces duplication, improves clarity, and supports role-specific workflows with shared visibility.

Key User Flows

Before high-fidelity screens, I mapped core user journeys to validate navigation patterns and functional needs across key workflows. These wireframes focus on validating navigation, information hierarchy, and role-specific interactions within the Squad Hub and supporting modules. By keeping the designs intentionally lightweight, I was able to test how users move through core tasks such as reviewing squad availability, logging player observations, and preparing for matches while ensuring the system remained fast, clear, and practical for state and local club operations. Below are some examples of what that looked like.

Scouting Report Flow

Availability Tracking Flow

Match Preparation Flow

Front End Designs

These high-fidelity screens showcase the visual language, interaction patterns, and information hierarchy of ClubSphere. The designs focus on clarity under pressure, using strong visual cues, consistent layouts, and role-aware interactions to help staff quickly assess player status, readiness, and context without unnecessary friction.

Flagship Screen: Squad Hub

The Squad Hub serves as the daily command center, providing real-time visibility into player availability, fitness levels, and performance context. Designed for speed, clarity, and low cognitive load for coaches & staff.

Player Profile

The Player Profile acts as the single source of truth for an individual player, consolidating information contributed by multiple departments into one clear, role-aware view with timeline-style updates.

Match Readiness Overview

A visual snapshot of squad readiness leading into an upcoming match. Combining availability, fitness, and workload into a single, high-impact view. Designed to replace mental math and give coaches an immediate sense of squad health.

Player Match Report

A detailed post-match analysis screen for individual players, featuring performance metrics, attribute ratings, key moments, and coach notes. Designed for quick review and sharing after matches.

Reflection

This project gave me the opportunity to step outside of purely digital problem-solving and better understand how amateur football clubs actually operate day to day. Speaking with coaches, scouts, and administrators highlighted how much of their work happens under time pressure, with limited resources and little room for over-engineered tools.

Designing ClubSphere reinforced the importance of clarity over complexity. The most valuable design decisions weren’t about adding features, but about reducing friction, surfacing the right information at the right moment, and respecting the realities of small staffs managing both short-term match demands and long-term player development.

This project strengthened my approach to system-level thinking and designing for real-world constraints, and it reaffirmed my belief that good UX is less about novelty and more about making everyday decisions easier and more confident for the people using the product.