Pinetree
UX/UI Design, UX Research
November 2024
Project Details
Tools Used
Figma
Adobe Illustrator
Problem
Note: In order to include this case study in my portfolio, I had to modify the original branding and naming of this project due to an NDA. Though I am unable to disclose the full scope of the client and their app, I have included as much detail as possible on the work I conducted.
Background
Pinetree is a customer relationship management (CRM) tool with a mission to empower individuals to build meaningful relationships by simplifying and enhancing the networking process. Pinetree strives to eliminate the stress of managing connections, allowing their users to focus on what truly matters - building lasting and impactful connections. Through innovate technology and intuitive design, Pinetree aims to make networking smarter, more strategic, and more fulfiling.
Brief
My task was to create the mobile version of the app's sign-up and onboarding flow. In doing so, I was tasked to conduct user research on the web version, and incorporate my findings into my designs. Throughout various milestones, I met with the client and included their feedback into my work.
Research
Understanding the Problem
In order to best understand user pain points and how to address them, I conducted various forms of research to get a better understanding of the user, their goals, and what the key use cases of Pinetree are. These findings were used to write the problem statement that guided my decision making process throughout the duration of this project. My key findings are detailed below.
UX/UI Audit
I conducted a UX/UI audit on the existing desktop version of Pinetree to systematically evaluate the visual elements of the digital interface, intending to identify strengths, weaknesses, and areas for improvement. In this audit, I focused primarily on the sign-up and sign-in flows, landing page, as well as the overall menu & ux of the application. Below is a summary of my findings.
User Personas
Based on gathered user research and data like demographics, psychographics, and shopping behavior, I created detailed customer personas that represented the target audience of Pinetree.
Current-State User Journey Mapping
In order to gather qualitative research, I observed participants using the desktop version of Pinetree their natural environment without intervening or influencing their behavior. In doing so, I created current-state user journey maps that showed existing customer interactions with Pinetree. This gave me a snapshot of what's happening, and pinpointed opportunities on how to enhance the user experience.
Competitor Analysis
I systematically evaluated competitor websites to identify strengths, weaknesses, and opportunities. By examining aspects such as UI design, user experience, content quality, and functionality, I was able to gain insights into industry standards and best practices. This analysis helped me define a unique value proposition by highlighting what differentiates Pinetree's designs from competitors. Additionally, understanding competitors' approaches enabled me to avoid common pitfalls and capitalize on gaps in the market.
Problem Statement
Based on my research, I navigated this problem with the following question in mind:
How might we engage and excite the user early on so they are more motivated to continue exploring the app?
Wireframes
Low Fidelity Wireframes
Presenting a low-fi layout to the client allowed me to get early feedback on my initial iterations and intensions. Based on feedback that I incorporated, the final layout I implemented differs from my initial wireframes.
Design System
Styleguide
I created a styleguide based on the exisitng branding of Pinetree, updating it to incorporate my research. Based on my findings, I modified the colors to ensure stronger contrast, changed the typeface to enhance legibility, and implemented different text styles to maintain proper visual hierarchy.
Mockups
App & Landing
Upon opening the app, this is where the user will be brought. The Splash Screen will remain until the landing page has loaded, then will automatically transition into the landing flow given this is the user’s first time opening the app.
Sign-Up & Onboarding
The first step in getting started is to sign up. After signing up with either a third-party or manually through Pinecone, the user will be directed to the onboarding flow. Mandatory screens in this flow (ex. name, verification) do not allow the user to skip, while optional fields do.
Menu & UX
There are four pages the user can navigate between.
Home: this is where the user can view/add/edit their contacts and interactions.
Profile: this is where the user can customize their profile, edit the information used on their profile, or log-out
Search & FAQ: this is where the user can search the app, or read an FAQ article
Settings: this is where the user can customize their interface, notification settings, report a bug, etc.
Design Solutions
Micro Animations
Based on my problem statement, my challenge was to find ways to engage and excite the user early on. My solution was to incorporate micro animations, as these are a great way to cater to the emotion of the user, without overwhelming them.
Content Visualization
Based on initial feedback, the existing onboarding flow was too wordy. I took this problem as an opportunity to incorporate the brand's identity into the user experience. To help the user, I illustrated Pinetree characters that resemble what the form indicates. This allows the user to choose an option by looking, rather than reading, which is quicker and more efficient.
Progress Indicators & Skip Button
While researching, I highlighted allowing users to bypass optional fields as an opportunity to expedite the sign-up process. I implemented this, ensuring that users are able to skip only the fields that are not crucial to the account creation process. I also added and progress indicator to ensure the user was able to tell how far along in the onboarding process they are.
