Design System & Mobile App Design
Proppz
Built a design system that connected design and development for a social media app focused on positivity and community.
Role
Product Designer
Team
1 Product Designer
2 Developers
1 Founder
Tools
Figma
FigJam
Timeline
Jan 2025 — Sep 2025
Overview
Proppz was moving fast with two app versions in development, but designs were scattered and inconsistent.
I built a scalable design system from existing components, refined the visual identity, and designed the pre-app onboarding experience. The system helped the team move faster, stay consistent, and evolve the product without chaos.
See where Proppz is now: proppz.com
Key Contributions
Design system architecture
Visual identity refinement
Interactive prototyping
Design leadership
Component documentation
App UI/UX design
Developer collaboration & handoff
NDA Notice
Some visuals and product details are intentionally limited to respect my NDA with Proppz. Screenshots shown are blurred, obfuscated, or simplified to protect proprietary information.
Context
Joining in the Early Stages
Proppz is a social media startup built around positivity and rewarding creators for genuine impact. When I joined in its early stages, I worked directly with the founder to understand the mission and vision for the product.
The team was small and development was already underway, but there was no design system or documentation to support consistency.
Promoting Positive People.
That's Proppz. Get Some.
Support
Meet
Reward
Goal
Create structure without slowing down development.
Research
Auditing the Product
Before designing anything, I audited both app versions to understand how everything connected. I mapped screens, noted inconsistencies, and identified patterns that could be standardized or rebuilt.
When I reviewed the screens, I color coded different elements like text styles and colors to see how often they appeared across different screens and where the Early App and Full App overlapped. I documented each element and grouped them by purpose so I could start defining consistent standards for typography, color, and layout.
The audit revealed several patterns that needed attention:
Mixed icon styles and button sizes
Random color usage
Fragmented navigation
Reused components with no naming or structure
It was clear the product needed consistency and a shared design language.
Design
Starting with the System
Since development was already active, I worked with what existed instead of starting from scratch. I set up color and text tokens in Figma so global updates could be made instantly. When the founder later changed the font, the entire app updated in minutes.
Rebuilding Components
I standardized the core UI with consistent naming, sizing, and states, and created an icon library to unify the visual language. Each component was documented directly in Figma to make usage and handoff easier for developers.
I kept the functional patterns consistent but gave myself freedom to explore new ideas. Once the pre-app screens were stable, I updated the design system to match them. That process taught me that a design system should serve the product, not control it.
Designing the Pre-App
I standardized the core UI with consistent naming, sizing, and states, and created an icon library to unify the visual language. Each component was documented directly in Figma to make usage and handoff easier for developers.
I kept the functional patterns consistent but gave myself freedom to explore new ideas. Once the pre-app screens were stable, I updated the design system to match them. That process taught me that a design system should serve the product, not control it.
I prototyped the full experience in Figma so developers could clearly see how screens transitioned and behaved. That prototype became our main reference and removed guesswork during handoff.
Bringing It All Together
Once the pre-app was finalized, I revisited the design system with everything we learned. Real screens made the next version of the system much more stable. I refined tokens, adjusted components, and improved documentation so anyone joining later could pick it up quickly.
The updated system unified both app versions and became a single source of truth for design and development.
Outcome
Built the first scalable design system aligned with development
Designed and prototyped the pre-app onboarding experience
Unified both app versions under one design system
Token-based structure enabled quick visual updates
Promoted to Lead Product Designer after leading system rollout
Reflection
Proppz taught me how to build systems inside real constraints. I learned how to bring structure to a moving project, how to stay flexible when direction changes, and how to balance consistency with creativity. The design system became more than just a library. It was what connected the product, the process, and the people behind it.
Lesson Learned
A good system keeps teams aligned, not restricted.
Thank you for reading!
Please feel free to reach out with any questions or to connect.
Ralph Dela Cruz
Product Designer · UX/UI · Web Design
© 2025 · NYC Metro Area
Available for freelance & full-time opportunities