Project summary
The PairTree App was designed to create a cross-platform and cohesive experience for adopting families, expectant moms, and other user types. This gave everyone who was using PairTree services an on-the-go experience granting access to home study approval, matching, legal resources and support, as well as increasing compatibility, reduced adoption fees, and a safe haven to go through this newly made modern adoption service.
The first stepThe first step of the process is always mapping. A series of talks over the course of a few weeks were done in order to compile all of the information needed to begin the building process of the app. These talks included items such as app features, code base, marketing site reworks and inclusions, and product incorporation. The map was created using cube components in Figma and color coding based on user type.
|
|
|
Gathering inspirationVarious websites such as Dribbble were used to gather images and inspiration that would be used to influence layout and design. Since PairTree is the only one in its industry, there were no direct competitors to compare it to.
|
Designing the login and signupDuring the design phase, the team did a walk through the pre-existing onboarding and signup flows. This allowed us to rework the UX and redesign the UI to better match the new platform and cross platform experience.
|
|
|
Redesigning the onboarding UI/UXWhile approaching the design of the user onboarding flow, the entire UX was rethought to make the onboarding more concise and clear. Questions and screens were combined in order to shorten the process. Onboarding went through multiple revisions over a series of weeks to incorporate new questions and onboarding capabilities.
(Onboarding has Mobile and desktop capability) |
Creating the other contentDesign was needed for a multitude of sections and complex layers to each. This included a guide section, connect section, and more section. Each had their own complexity of layers in order to incorporate the vast amount of information we would give each user. All of these screens came accompanied by their desktop counterparts to create a multiplatform experience and responsive design.
|
|
|
Responsive designCreating a responsive UI was a leading factor when designing the different modules and components. This was easily attained through using Figma's auto layout function and prototyping to accurately communicate different ideas and UX patterns to the engineering team.
|
RedesigningOnce the app was launched, this didn't mean everything came to a standstill. Sections were looked over using data captured from the app as well as user testing. Not everything was done to spec due to code base limitations causing some sections and modules to be redone or reworked. New features were already in motion as well calling for a more cohesive design in some areas in comparison to the ('MVP') launched edition.
|
|
|
App StoreApp store screens were designed in conjunction with the marketing team and another designer to convey the company's message and branding. Specific wording and design were used while marketing the app, as well as also being featured on various other sources such as Business Wire, etc.
Business Wire GeekWire Medium |