top of page

Visual, Motion, & Design Systems

My Role & Responsibilities

As the Senior Visual Designer (UX/UI), I led the creation of the visual, motion, and design systems from the ground up, ensuring a consistent and scalable design approach. I defined reusable components, typography, colors, and spacing to unify the product’s look and feel. To enhance usability and brand identity, I developed motion guidelines and interaction patterns. Accessibility was a key focus, standardizing contrast, text sizes, and focus states to improve usability for all users. I documented the system with style guides and component libraries, making it easy for the team to adopt and scale. Working closely with engineering, I ensured seamless implementation, aligning design and development for a more efficient workflow.

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.

visual_content_explorations-copy-2.png
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.

visual_content_explorations.png
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.

motion.png
ia_chart_relief-ui.png
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.

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.

two-tiered_color_system.png
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.

motion.png
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.

relief_visual_art.png
system_icons_relief.png
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.

wireflow_system.png
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.

design_specs.png
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.

bottom of page