's "My Information" Feature

Enabling users to store personal information for future document processing.
My Role
Product Designer
Mar - Sep 2021
1 Project Manager
3 Developers
2 Designers
Interaction Design
Visual Design
Design Systems


Empowering nonprofits with a document-storage platform to help people experiencing homelessness.

Obtaining identification helps individuals access essential services.

People experiencing homelessness need a platform to assist in applying for, securely storing, and utilizing ID to access services. provides non-profits with identification services so that they can help those experiencing homelessness.

Biographical Information

Users can store additional biographical information like a mailing address.

Veteran Status

Users that are veterans can input their service information and refer back to it when completing identification documents.


We need a place to store additional information that may be important for specific documents.

While re-evaluating our onboarding flows, we realized that specific pieces of information may not be as readily available from users and case workers.

This would prevent case workers and users from moving through the onboarding flow, wasting their time and resources.
The problem flow that users and case workers come across with the onboarding flow.

User Persona

I had used previous research insights and user interview transcripts that the Product Manager had conducted to understand pain points.

I then created a persona to summarize my findings from the insights and transcripts, highlighting key pain points and needs of a user.


How did we structure this feature?

We worked with our Product Manager to align on the features needed for this project. The larger team had outlined four main parts of the onboarding flow that could be moved to ‘My Information’.
Onboarding re-evaluation identified that these four sections would be moved to the 'My Information' feature.

User Flows

The design team then crafted brief user flows that outlined the main experience along with edge cases that we kept in mind when designing.
The primary actions users will go through in 'My Information'.
The primary edge cases that users can come across. These cases are pretty standard for input fields, but a visualization helped us clearly understand how we can design for these situations.

Lofi Wireframes

We then created quick wireframes to visualize the feature and understand how the content would place against the entire screen.
With certain sketches, we mocked them in low-fidelity to get a better understanding of the visual spacing between elements. We narrowed in on the bottom right design because of its simplicity and clear visual elements.


Learning to juggle technical constraints.

Our first design relied on modals where users would submit information.

Aligning with developers...

... we discovered that a large use of modals was
not technically feasible.
Additionally, we also learned that this wasn’t the best idea given that pop-ups are generally used for quick pieces of information.  

Critiquing our designs overall

While we went back to the drawing board, we also did an overarching critique of the designs which showed visual and interaction inconsistencies.
Our internal critique challenged our visual and interaction design skills; keeping them at the forefront when designing the next iterations.
The dashboard also received a redesign to fit with current design components and design standards.

Final Designs

Our final designs highlight changes to improve the visual and interaction design of the product. 


Expanding our project scope to the mobile landscape.

Mobile design changes

This was my first time designing in a mobile landscape and it proved challenging.

I used secondary research in order to validate my designs and ensure I was using mobile best practices.


Expanding’s design system in desktop and mobile. 

During this project, desktop and mobile, the design team had created new components that fit larger use-cases (i.e. mobile interfaces) or updated previous components.

At the end of the project, we added components to’s overall design system to keep it sustainable for future endeavors. 


Validating's software with metrics.

We used overarching metrics to measure the success of’s software. 

Moving forward...

If I could go back to this project, I would advocate for specific metrics for certain features such as this project. Metric ideas included:
Number of completed onboards
An increase could show that users like Jackie are able to onboard more clients, faster.
Number of 'My Information' sections completed
Seeing the average number of sections completed could show the active-use of our new feature.


My first time designing in a "real-life" setting.

Working Cross-Functionally

My time at introduced me to cross-functional collaboration with PMs and SWEs, providing insights into both my role as a Product Designer and the challenges faced by my colleagues.

Initially, my designs posed complexity issues for developers, but through teamwork, I gained a deeper understanding of design feasibility. This experience at honed my ability to create user-centric, technically feasible products.

From Ideas to Live Features

Prior to this, my design experience was primarily limited to personal and school projects, often left unfulfilled. At, I witnessed my designs come to fruition.

As a Product Designer, I was able to see our product gain funding and undergo beta testing; seeing my designs interact with real users. Simple wireframes evolved into live user interfaces.

Thanks for reading! Looking for more?

Check out one of my other case studies...
Call BlackLine

Providing mobile crisis counseling to individuals across the United States and Canada.