Product UI & Web Design
With the brand identity approved, I moved on to designing the website and high-fidelity product mockups. I focused on creating the desired look and feel for users while aligning with the expectations set with clients, addressing market gaps, and delivering the unique, creative experience missing from other tools in the market.
Highlights
During this stage, I began shaping the design system by working with Figma components and variations in real time, creating a strong foundation for future growth. I waited to finalize the full UI system until closer to development to leave room for creativity and flexibility.
Responsive Design Strategy
For the website, I used a breakpoint strategy with Figma’s auto-layout and variable capabilities to create mobile-friendly, modular layouts. While the product was desktop-first, the site required responsiveness and adaptability across screen sizes to avoid user confusion, abandonment, and, ultimately, an unused product.
Prototyping & Motion
I brought key interactions to life using Figma’s prototyping tools, plugins, JSON/Lottie animations, and motion variables. My goal wasn’t to only use prototypes for stakeholder presentations, but spark joy throughout the experience while validating usability, guiding the user, and supporting early developer handoff. I focused particularly on an interactive pricing page, dynamic campaign builder flows, and hover and click interactions across components.
The Design System
As our interaction designs took shape, I began developing a systemized design library. I followed an accessibility framework by applying color contrast, type sizing, and hierarchy standards consistently across product and website components, styles, and elements. For example, I tested text sizes against background colors (and vice versa) and implemented WCAG digital text sizing standards for paragraphs and headlines to counteract readability concerns. This approach ensured cohesiveness and design integrity from every touchpoint through to development.
Highlights
I incorporated UX best practices in spacing, variation sizing, and image optimization to support usability, maintain visual balance, improve load times, and ensure a unified experience across devices.
Developer Collaboration & Handoff
In line with the design system, I began developer documentation, outlining the do’s and don’ts of styling and implementation. With different specifications for the product and website, I created dedicated guides for each to provide clear visual and technical direction. When challenges arose, I worked closely with the developer to resolve animation limitations, responsive layout issues, spacing concerns, and style inconsistencies, while refining troubleshooting communication methods. This flexible, collaborative approach upheld quality standards, ensuring consistency and a smooth transition from design to a polished, functional product.
Highlights
I acted as hands-on QA during implementation to catch inconsistencies early and research workarounds - bridging the gap between design integrity and development feasibility.