Skip to content
Hugh Berryman

Tribal Finance / DeFi & crypto

Tribal Finance: connecting brand and product

Tribal Finance's responsive lending dashboard, showing account value, earnings, portfolio composition, locked balances, and recent activity. Open the full-size image to see the complete mobile and desktop layouts.
Tribal Finance's responsive lending dashboard, showing account value, earnings, portfolio composition, locked balances, and recent activity. Open the full-size image to see the complete mobile and desktop layouts.Open full-size image

Tribal Finance brought together a multifaceted DeFi product and the marketing that introduced it. I worked with the team to align these efforts around users, a shared visual language, and clear product experiences.

Result

Helped connect the brand identity, marketing site, and product interface through shared design standards and working processes.

Year
2020–23
My scope
I supported product design over three years, working with the team on brand and marketing strategy, design-system creation and implementation, and the DeFi product experience.

A shared language for brand and product

The challenge was to align the team around a user-centered, product-focused approach while developing the brand. I helped establish processes that connected design decisions with marketing strategy.

The identity treatments show a consistent wordmark across light and dark backgrounds, providing a recognizable starting point for the product and marketing surfaces.

The Tribal Finance identity on a dark background, with a yellow-to-teal mark and enlarged symbol in the background.
The Tribal Finance identity on a dark background, with a yellow-to-teal mark and enlarged symbol in the background.Open full-size image
The corresponding light identity treatment, preserving the same mark and wordmark across a different surface.
The corresponding light identity treatment, preserving the same mark and wordmark across a different surface.Open full-size image

Making component states explicit

I worked with the team on creating and implementing the design system. The UI kit documents alert anatomy, status colors, and subtle and solid variants alongside the component library.

Defining these states gave designers a common reference for communicating information, success, warnings, and errors across the interface.

The UI kit in Figma: alert anatomy, semantic status colors, and subtle and solid variants, alongside the foundation and component library.
The UI kit in Figma: alert anatomy, semantic status colors, and subtle and solid variants, alongside the foundation and component library.Open full-size image

Connecting the introduction to the experience

The marketing page introduces lending and borrowing, explains the flow, and presents lending insights. The account views carry that story into balances, earnings, portfolio composition, and activity.

Keeping those surfaces aligned was central to my contribution: helping design and marketing work toward one coherent product experience.

The complete marketing-page design, introducing the lending proposition, explaining the lender and borrower flow, and previewing portfolio controls and reporting.
The complete marketing-page design, introducing the lending proposition, explaining the lender and borrower flow, and previewing portfolio controls and reporting.Open full-size image

◆Decisions

  1. The decision

    Develop the brand and product within a shared design language.

    The tradeoff

    Marketing needed room to explain the offering, while account screens needed to make financial information easy to scan.

    The consequence

    A common identity and component system connected the landing page with the mobile and desktop account views.

Product designDesign systemsBrand alignmentDeFiFintech