FINTECH
2023-2025
Pipe Technologies Inc.
Pivoting from direct-to-consumer to embedded enterprise solutions is as hard as it sounds.
SCENARIO
Pipe was started as a direct-to-consumer capital product focused on serving individual small businesses on desktop. fast forward to the beginning of 2023 when the business model moved to embedded enterprise platforms on mobile. Pipe also suffered deeply from imposter syndrome and was regularly among a list of peers that "Looked Like Linear" on a tongue in cheek website.
SOLUTION
A flexible and simple design system was required to give Pipe a rebirth in a mobile-first world that would scale and theme to any platform big or small. The system was then used to rebuild the product from the ground up with drag and drop templates to streamline workflows and continuity. Creating a unique and powerful visual language and direction for Pipe was the critical next step to stand out in the field and show what timeless and unique experiences were capable of being summoned from such a small team.
Omni Design System
THE DESIGN SYSTEM
Omni was created with the goal of being the simplest and most flexible design system on the market. This came with a high emphasis on having the fewest moving parts possible under the ethos of "reduce reuse recycle" knowing that the end goal was one unified system to power a global embedded product as well as any website, print, or digital marketing large or small.
COLORS & THEMES
Using HSL colors was an essential structure for enterprise themes. To onboard a brand into their own custom theme nothing is required other than the Hue of their primary brand color. Manipulating the Saturation and Lightness which locking the Hue allows for flawless accessibility checks in any scenario in light and dark mode. Less is more with tokens and if you're a systems head you'll notice theres very few color tokens to choose from to keep a high focus on smart simple design choices and hierarchy.
THE MATH
Using simple repeatable base numbers has become standard in our profession but that doesn't make it any less important. Starting with 4px and moving all the way up to 64px allows for clean shapes that let the eye rest while slotting and scaling seamlessly.
Reusable components
Row label
Secondary row text
Text
Text
Row label
Secondary row text
Text
Text
Row label
Secondary row text
Text
Text
Button Label
10
50
100
1
REUSABLE COMPONENTS
Now that we have repeatable sizes, typography, and colors, we can focus on creating components that solve multiple problems while never becoming bespoke objects in the environment. A form field in the product should look, feel, and behave the same way on the .com experience as well. This also helps guarantee that anyone's interaction with Pipe anywhere will always be consistent.
MODULAR TEMPLATES
With a small design team there needs to be a high emphasis on streamlining workflows and automating changes to keep designers as productive and proactive as possible while scaling. By creating full page template components the team is able to run entire flows and scenarios off of only 1-2 base components while automatically creating desktop and mobile variations at the same time.
A Capital Product
MOBILE FIRST
The original Pipe product was created in a desktop only environment despite living in a mobile-first world. This required approaching onboarding and dashboard experiences from the ground up and aligning UX/UI across all areas of the product.
TURNING THEMES ON
Combining everything above into a clean rebuild gives unlimited freedom to easily switch across any brand theme in light or dark mode while always passing accessibility and staying true to the visual goals.
Adding a Business Card
EXPANDING AND RECYCLING AT THE SAME TIME
After rebuilding the Capital experience Pipe was ready to expand offerings and add a Business Card to the product suite. This was an excellent stress test for the Omni system and the freshly launched templates. By starting from a "purple-first" mentality in Figma, the team was able to start from templated component work and then manually detach to alter and expand when necessary.
Rebuilding a website
STRONG FOUNDATIONS
The legacy .com experience was full of bells and whistles but wasn't built with scale and structure in mind, so every change or addition was a large endeavor involving multiple people. By approaching the website from a CMS first perspective we were able to spin up new pages and inject additional content with ease. Each module on a page is built around the concept of 100vh to maximize hierarchy and give a high end editorial feel. This design philosophy allowed for every talking point to feel powerful on mobile and desktop. The concept of being able to mirror each template on it's X or Y axis also allowed for massively expanded use varieties and helps all content feel unique.
Evolving a brand
STANDING OUT WHILE STAYING TRUE
Now that Pipe was positioned for smart scaling in an enterprise environment, it was time to stand out from the crowd and visually align the company with the strong unique principles being built internally.
MOTION GRAPHICS
A huge part of a brand is how it looks and feels while in motion and Pipe was starting to make videos for the first time. Motion graphics were made for feature advertisements, business owner showcases, and company interviews. by creating a consistent visual motion language, no matter who is working on content we can guarantee it feels intentionally crafted.