Project Vision

Cardinal was setting out to create a product that would be a one-stop-shop for teams to see their product's impact by offering a wide variety of integrations of third-party apps that would remain in sync. Teams could use the data from these integrations and the power of Cardinal’s dynamic documents to see exactly what impact their product was having, all in one place.

Expertise

UI/UX, Product Design, Brand Identity, Responsive Web Design, Webflow Development

Deliverables

Zero-to-one product strategy and design (UI/UX)’ brand strategy, identity and theme development; and responsive website design and Webflow development

Platforms

DesktopTabletMobile
DesktopMobile
DesktopTablet
Desktop
TabletMobile
Tablet
Mobile

The Challenge

Accepted into Y Combinator W23, Cardinal needed a high-quality MVP of their brand, product, and website as quickly as possible.

Y Combinator and Cardinal logos
Y Combinator and Cardinal logos

The Solution

The Forge team got to work sprinting on both the brand and product simultaneously. Due to our team's high-caliber design system skills, we can easily update the product's UI to reflect the new brand once it is complete.


Regarding zero-to-one products, our philosophy is not to reinvent the wheel. Early-stage start-ups will be navigating through phases of rapid testing and iteration to refine their feature sets, so it’s best to lean heavily into best practices for UI/UX frameworks. We still value adding surprise and delight moments but are more strategic about these moments in the early stages as we prioritize feature functionality and user experience.

Collage of product UI

Developing the brand

When the term 'cardinal' comes to mind, you might immediately picture a bird. However, in the context of this product's purpose of empowering software organizations tools to better understand the impact of their work, the mathematical concept of 'cardinality' holds significant relevance. This term refers to the count of elements within a set or grouping, embodying a fundamental property of that collection.

At the heart of this product lies a aggregation of data manipulation, visual representation, page organization, and document composition. To encapsulate this essence in a straightforward manner, we opted for a minimalist approach. The logo's stack visualization can be interpreted as a depiction of a database or a stack of pages, both central to the product's core functionality. The prominence of the backslash command is intentional, as it triggers a multitude of prompts within the app, underscoring its pivotal role in user interaction.

Collage of brand elements, color scheme, and marketing usage

Integration with all your favorite apps

The Forge team needed to solve for how all these integrations would be experienced within the product as they would always remain in sync with one another.

Product UI of an advanced search prompt and a variety of cards showing what app integrations there are
Product UI of an advanced search prompt and a variety of cards showing what app integrations there are

Customizing data visuals

Data visuals can be a powerful way to see impact but can often be a confusing experience to set up correctly. We improved this experience by focusing on allowing for three different ways to aggregate the data; chart form, table form, or your goals. Since working with a blank canvas can slow people down, we lean on auto-suggest and dropdown options for selecting the appropriate data you want to compare.

Showing 3 different types of data visuals and 3 states of one side panel that allows you to customize data visuals
Showing 3 different types of data visuals and 3 states of one side panel that allows you to customize data visuals

Dynamic documents

Teams are able to insert those customizable data visuals into dynamic documents and provide even more context to the project at hand. Having all the standard features of a document editor with the addition of being able to surface content from your favorite task manager, communication tool, marketing hub, and more.

Due to all these integrations, it was essential for us to nail the user experience of the advanced-search command prompt while show casing what is available and possible with each one. We did this by creating custom menus with similar navigational experiences per integration while also utilizing common auto-suggest patterns.

Product UI showing the options of blocks for dynamic documents and the advanced search prompt
Product UI showing the options of blocks for dynamic documents and the advanced search prompt

Have a project in mind?

Let's get to work.

Submit a project