Background

Calixa was an early stage product-led growth (PLG) platform helping modern sales teams integrate customer data and find high-value sales opportunities.

When I joined the company, we were a small team of less than fifteen people. The product was only in the hands of a few customers, and new features were being built as quickly as possible.

Design-wise, there wasn't much to reference. We had a Figma file from a previous contract designer. There was no design documentation, and many details were decided on the spot by developers. A full redesign was well underway, exploring the navigation, page layouts, and interaction patterns, but we hadn’t yet tackled the visual language of the product (i.e. colors, typeface, icons, graphics, etc.).

Leadership wanted to push toward a more polished, consumer-grade feel. This project became our opportunity to build a distinctive visual identity and improve the user experience in ways that would directly support product-market fit and the sales growth we needed.

Problem(s)

Our sales team was often pitted head-to-head against our competitors tools, where we continually went unchosen. We were failing the “eye test.” We had the right capabilities, but we didn’t look like a best-in-class solution, and that was keeping us from closing deals.

Our interface looked quite bland, especially when compared to some of our competitors using more visual elements and reinforcing strong visual brands.

We needed a visual identity that was clean, modern, and simple. We wanted to come across as approachable and trustworthy.

Discover

I started with a UI audit, capturing every screen, modal, and component I could find within our app and organizing them in Figma. This gave me a clear picture of what we had to work with. I met with our front-end engineer, we went over the audit together, and gained alignment on desired outcomes from the redesign.

I looked at competitors in our space, studied design patterns across adjacent tools, and tapped into our customer insights. I reviewed notes and videos from user interviews. I met directly with internal stakeholders regularly handling onboarding, support, and customer success.

Key takeaways:

• We had no clear visual brand, which made us blend in (or worse, look unfinished).

• Users were confused by navigation and UI language.

• There were inconsistent states and lack of feedback throughout key workflows.

Define

I worked with product leadership to align on clear design goals. Our discussions centered around how we wanted Calixa to feel and how design could better support our go-to-market strategy.

Our key objectives:

• Establish a distinct/own-able visual identity, to stand out in sales opportunities.

• Improve our interface’s visual quality with polish and consistency.

• Lay the groundwork for scalable, accessible, and maintainable design standards.

Design

I initially worked from one Figma file as a sandbox, exploring new directions, and experimenting with visual styles: colors, fonts, and icons . As various design decisions were made, I created other, more permanent files as sources of truth (see ‘Deliver’ section below).

For clarity, I established a single color for interactive elements (i.e. when something is clickable/tappable). I limited the variations in our typography (fewer size options), keeping things simple and consistent. These things helped make the app more scannable.

I structured our color system into:

• Structural: gray, neutral backgrounds, borders, non-interactive text, etc.

• Interactive: a distinct, brand-forward hue for buttons, links, selections, etc.

• Accents: colors for organizing custom elements like tags or groups. Accents also included green, red, and yellow used in various contexts (i.e. destructive buttons, warning banners, errors, etc.).

As a team, we reviewed and voted on several directions consisting of different typefaces, colors, and icons.

Here’s what we decided:

• Our interactive color: We liked teal for its uniqueness in our space.

• Typography: We chose the Rubik font for its modern feel and strong readability.

• Icons: We adopted an icon set from Streamline with great variety and consistent quality.

Deliver

Our team was small enough to not need a standalone design system website, something simple would suffice. I documented the new design language in an atomic design structure (i.e. styles as atoms, components as molecules, and layout patterns as organisms).

This minimal documentation consisted of three Figma files, each published certain components and styles. This allowed for optimal scalability if we were to invest in other platforms for our app like iOS or Android. I ensured the documentation was concise and easy to update.

Here’s how the three files were structured:

• Styles: colors, color tokens (e.g. text_heading, background_primary, etc.), typography hierarchy and styles, icons, graphics, etc.

• Components: buttons, cards, cells, inputs, modals, navigation, etc.

• Main Screens: library of screens (each page of the app, but only in a populated state, no empty states, errors, infrequent modals, etc.).

I recorded a brief walkthrough for each file. I would comment over a screen share, going through each file. This helped me and our frontend engineer thread out discussions and surface any questions from the engineering side.

Ultimately, what we got to see in our staging environment was very close to what was designed, thanks to our discussions at hand-off. After some brief QA and alignment, we shipped our new designs.

Impact

• Increased sales wins: Our team started closing deals in previously lost head-to-head evaluations. The redesign helped us pass the "eye test" with enterprise buyers.

• Improved customer sentiment: Feedback became more positive, with users noting how polished and professional the product felt.

• Greater design scalability: Our new foundations made it easier to design and build future features with consistency and clarity.

• Web accessibility: Our color palette and type treatments met contrast standards, improving usability for all users.