Visual, Motion, & Design Systems
My Role & Responsibilities
Owned the visual, motion, and design systems from the ground up, establishing a consistent and scalable foundation. Defined reusable components, typography, color, and spacing to unify the product across surfaces.
Developed motion and interaction patterns to improve clarity and usability, while standardizing accessibility across contrast, type, and focus states. Partnered closely with engineering to translate the system into production, and documented guidelines to support adoption and scale.
Teammates
Lead user researcher (UXR) (Allison Dickin)
Cross-functional Partners
Front End Engineer
Tools
Figma, Lottie, After Effects, Illustrator, Photoshop
The Results
After setting up the design system, design team and engineers worked more smoothly together, with fewer questions about design specs. Adoption jumped from 25% to 100% over 4 months, making designs more consistent. Creating new features got faster, cutting design time by 50%. Accessibility also improved, with 95% of components meeting standards.
The Challenge
As the only designer in a fast-moving startup, there was no design system in place, leading to inconsistent styles across the product. Engineers built UI on the fly, resulting in a mix of different fonts, button styles, and layouts. Accessibility wasn’t considered, making the product hard to use for many people. Without a shared system, every new feature required extra time to design and build, slowing down development and causing confusion between design and engineering.
Core Objectives
Define Core Visual Standards
Establish foundational guidelines for the Relief app’s color, typography, iconography, and component styling to create a consistent, brand-aligned user experience.
Develop an Efficient Design System
Build a scalable design system with reusable components and templates that support rapid, cohesive design production.
Maintain Quality and Consistency
Implement quality control measures to ensure all designs meet established standards, enabling fast-paced production without sacrificing brand integrity.
Research & Strategy
Key Considerations
I began by speaking with leadership to understand their vision for Relief. A recurring theme emerged...
Invoke Calmness
Design the app that fosters a sense of calm for users, creating a reassuring and supportive experience at every touchpoint.
People First
Prioritize the needs of end users, ensuring the app is accessible, inclusive, and genuinely user-centered.
Research & Strategy
Early Styles and Components
I began by defining brand colors and type styles, with accessibility in mind to ensure readability and inclusivity. From there, I focused on frequently used components like buttons, input fields, and layout.
Research & Strategy
Visual & Content Explorations
Collaborating closely with the UX Content Designer, we developed a series of impactful screen concepts, each exploring unique visual and content ideas. Establishing the first screen was critical to setting a cohesive and inviting tone for the entire app experience.
Research & Strategy
Usability Test Findings
Our UX Researcher conducted three rounds of testing to evaluate the effectiveness of the Relief app's value screens and to probe for feedback on visual appeal and tone of voice.
-
Participants found the value proposition clear and motivating, encouraging them to engage with multiple onboarding steps.
-
Feedback highlighted the design as calming, with animations that enhanced user enjoyment and created a sense of delight.
-
One participant’s positive reaction to the visual and motion design further strengthened leadership's confidence in my design approach.
Research & Strategy
IA of Relief UI
I created this IA chart to define a structured approach that supports rapid design iteration and tracking. With leadership’s support, I started analyzing the use of components, styles, visuals, and motions to prioritize essential elements and establish design patterns—from Figma setup to development.
Visual, Motion & Design Systems
Design System
I took the lead in creating a design system rooted in Atomic Design principles, establishing a foundation of reusable components. I also utilized smart Figma components to enable rapid iterations of design, enhancing efficiency and adaptability throughout the design process.
System Structure
I structured the design system from foundational values to reusable components, ensuring consistency and scalability across the product. We implemented reusable components in React and used them across the app, with an opportunity to introduce a dedicated documentation layer like Storybook.
Visual, Motion & Design Systems
Two-Tiered Color System
System-Level Color Palette
Provides core colors for brand consistency across all touch points.
Product-Level Color Palette
Adds flexibility with expressive colors for product design, Illustrations, and animations.
Visual, Motion & Design Systems
UX Motion
Transitions
To create a more engaging experience, I crafted page transitions. These thoughtfully designed transitions add a touch of magic to the UX, making navigation feel smooth and intuitive.
Visual, Motion & Design Systems
Illustration & Icon Styles
I created these illustrations to visually help simplify complex processes and guide users through key steps, adding a sense of calm to the experience.
Visual, Motion & Design Systems
Animations
These animations are used to areas where we want to really invoke a since of calmness and for celebratory moments.
Building Consistency
Wireflow
I created a detailed wireflow to give the team a clear view of each flow, design element, and content structure. This tool helped align design and content strategy and provided engineering with a roadmap for smoother implementation and shared understanding.
Building Consistency
Design Specs
Early in the MVP, spacing was a huge issue on the front end. I pulled all the different layouts and introduced a spacing spec component to show the spacing between screen components in design files. This led to better consistency between design and engineering.
Featured Work
Relief App Happy Path Prototype
This prototype showcases the streamlined user journey within the Relief app, guiding users from account setup to successfully submitting debt reduction requests. The visual design prioritizes clarity and simplicity, enabling users to navigate the app’s core functions with ease. Custom illustrations and subtle motion design add moments of delight, creating an intuitive and engaging experience throughout the process.