PairTree Design GuideThe 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. |
Figma PrototypingFigma 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.
|
Admin toolsDisclaimer: 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.
|
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.
|
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.
|
|