Relief App: Streamlining Design
My Role & Responsibilities
As a Senior Visual Designer, I was responsible for transforming design into a core business asset by developing comprehensive visual, motion, and design systems. I created all user interfaces, addressed user experience challenges, and crafted prototypes, interaction designs, illustrations, and animations to bring the app to life with seamless, engaging interactions.
I also supported the Lead User Researcher and collaborated closely with our UX Content Designer to ensure alignment across every aspect of the user journey.
Teammates
Lead user researcher (UXR) (Allison Dickin) and Content designer (Toir)
Cross-functional Partners
Technical Product Manager, and Front End Engineer
Tools
Figma, After Effects, Illustrator, Photoshop
The Results
As of 09/13, Relief generated 14k+ downloads and ~18k offers, achieving an ~55% conversion rate on reduction requests—before any paid marketing efforts.
As of 10/23, $5M in debt connected to Relief daily–after paid marketing.
The Challenge
In a lean production environment, the demand for rapid design output requires defining and establishing visual standards to ensure consistent and high-quality visuals for the Relief app.
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.
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.
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.
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
UX Motion
Interacations
We encountered an issue where (18) users were accidentally tapping the CTA at checkout, leading to refund requests. To address this, I made the button more intentional, reducing accidental taps and improving the overall user experience. Over the next month misclick accidents had dropped ~75%.
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.