Role
Product Design Intern
Tools
Figma, Supernova
Team
Product Designers, Product Managers, Developers
Timeline
3 months
Problem
Solution
Outcomes
30+ Pattern Components
I designed a small library of form pattern components that product designers can access in their Figma files. This approach helps designers design and iterate faster, and consistently across multiple product teams.
Design System Documentation
(Blurred for company privacy) documented Form best practices (accessibility, usage guidance, anatomy, etc.) for designer and building specs for engineers on the company design system site.
Process
Defining "What is a form?" at SoFi
Before embarking on establishing best practices for forms, I first needed to define what a "form" is for SoFi's purposes. I settled on, "A group or multiple groups of related input controls that allows users to provide data or configure options. Common use cases include onboarding flows and settings."
Problem Space
No clarifying documentation for form use cases lead to confused designers and developers.
Step 1: Evaluate Existing Patterns
To tackle this head-on at SoFi, I first evaluated existing patterns of form usage from...
60+
Use cases across ...
4+
SoFi products
Step 2: Research industry best practices
researched form best practices from leading design systems:Shopify's Polaris, IBM's Carbon, Google's Material Design, and Uber's Base.
FINDING 1
Users often abandon forms due to unclear field labels and instructions.
Logically order and group related tasks under section titles and clearly detailed field labels and instructions.
FINDING 2
Instant feedback and timely validation help prevent mistakes.
Timely validation can give instant feedback to the user so that the data entered meets the required criteria before form submission.
FINDING 3
Use hints and helper text to give users extra context.
Placeholder text should not include important info as it will disappear. Use hints or helper text for those cases instead.
30+ Pattern Components
I designed a small library of form pattern components that product designers can access in their Figma files. This approach helps designers design and iterate faster, and consistently across multiple product teams.
Design System documentation
Documented Form best practices (accessibility, usage guidance, anatomy, etc.) for designer and building specs for engineers on the company design system site.
8
Product designers
3
Mobile engineers
1
Product managers
"Her positive energy and eagerness to learn made her a perfect fit, and she quickly became a valued team member...Her contributions to the design system will continue to benefit the design and engineering teams, and I have no doubt she's going to have a fantastic career ahead of her."
-Ashley Branch, Senior Product Designer at SoFi, Aug. 2025
Reflection
My internship at SoFi taught me best practices for scaling a design system at a large organization. Additionally, I was able to participate in so many fun events:
Outcomes
Won the intern hackathon!
Led my team to create an AI chatbot trained on the company design system with a built-in component usage checker (design linting).
Volunteered for SF Design Week at SoFi
SoFi participated in San Francisco's "SF Design Week" for the first time this year. I assisted with the event and met tons of cool people!
Went to Figma HQ in SF
Outside of SoFi, I took advantage of my intern privilege and participated in Figma's summer event series for students, where they walked us through Figma Make, Slides, Pals, and Grid.
