Project summary

A journey of all things PairTree

PairTree Design Guide

The design library was curated over a number of months using Figma's componentization capabilities and auto layout functions. A standardization was made for all rounded buttons and various others. Each component in the button category had some sort of hover and activate state which could be viewed through a prototyping screen.

​Icons and other visuals were split between uniform and non-uniform in order to organize and accurately implement them into different spaces.

Text and color styles were set up with the ability to add special cases or new styles at any time (which the team tried to avoid, but had the capability to execute). Text styles were put into 4 categories being a decorative, heading, body, and utility categorization.

Color styles had 3 internal styles and were specifically named to match the backend code base. The styles included the main color as well as a tint and shade color to use as accents. In some cases, there was a Main accent color that would either be a lighter version, or a 50% opacity defined as a hex code.

Distinct navigation systems were created for the multiple products housed under PairTree. These designs supported both mobile and desktop experiences and were built using a modular set of building blocks, leveraging Figma’s Auto Layout functionality for consistency and scalability.

Global styles were established as foundational elements across the platform. These were used for functions, error states, spacing guidelines, and other shared components within both Figma and the product designs themselves.

Gathering Inspiration

Using pre-existing screens created before my arrival, along with references from Dribbble, Behance, and other sources, I built a large inspiration board. This became a driving source for reimagining PairTree as a redesigned platform.

Existing emails were collected as inspiration to revamp the marketing emails sent to all users, supporting both general communications and more targeted, purpose-specific messaging.

Figma Prototyping

Figma prototypes were used to show the intended product in action. This was normally used to show the business and engineering different functions, but were occasionally used in order to show potential investors and different stakeholders the upcoming capabilities to get them onboard.

Prototypes were also used during the design phase for myself to test the overall UX and look of the project. This was prevalent when working on anything onboarding related in figuring out how to optimize it to the best of its current capabilities.

Admin tools

Disclaimer: None of the data shown is actual user data due to this image being from the building stages.

Admin tools were needed to access user data, ban users, diagnose problems, and more. Design (myself) was brought in to make it user friendly for the internal team using a 3rd party resource, Appsmith.

Views were made for all user types which allowed the internal team to have different functionality for each. "FAMs" had the most trackable profiles and data which we used to both help with troubleshooting and targeted marketing, etc.

The "EM" view was used to track the 'expectant mom' users. Scammers were predominantly using expectant mother accounts to attack families both mentally and financially in some cases. The team used this admin tool as a way to track and prevent any of those dangerous and harmful individuals better than before.

& More

As a lead designer, I worked on various projects over my year and some change. Not all of them can be listed, but as final notes, there was a 3rd onboarding restructure due to a change in code base and technology. This was designated by engineering and the business.

The video shown is a universal animation that is used for YouTube videos as well as a loading screen in certain parts to the PairTree platform. This was done by animating the logo in Adobe After Effects.

Next project

PairTree App