Work
My Role
Product Design — Data Visualization, Visual Design, Prototyping
Team
Senior Design Associate (Me)
Senior Design Specialist
Timeline
5 weeks (October - November 2025)
Overview
For Digital NEST’s annual End-of-Year donor appeal, our team redesigned the donation landing page to strengthen impact storytelling and integrate new branding. I co-led layout design, data visualization, animation, and responsive UX across both desktop and mobile.
Live Site
The Problem
Setting the Scene
Catching Donor's attention
Digital NEST refreshes its donor landing page every year. While previous versions were functional, they did not fully leverage storytelling, motion, or data visualization to communicate impact in a compelling way.
For 2025, we needed to:
Tell a clearer story across four complex impact categories
Make data more engaging and emotionally resonant
Apply updated branding consistently
Use animation intentionally to support understanding, not distract
Previous website design
Solution Preview
Solutions at a glance
Reframed impact content into four structured narrative sections
Designed four animated data visualizations (two owned by me)
Integrated updated brand colors, typography, and motion principles
Created developer-ready interaction prototypes using Smart Animate
Redesigned website on desktop and mobile view
Design Process
Getting Straight to Work
Highlighting our associates
We began with the hero section, which needed to immediately capture attention while reflecting Digital NEST’s community.
I proposed a tile-based hero featuring animated portraits of associates and their roles within the organization. Higher-ups approved my concept, and I created the mid-fidelity version that set the direction for the final design.
Redesigned website on desktop and mobile view
Visualizing our impact
Data visualization process from sketches to final concept
Confidence & Agency
Challenge:
This dataset focused on percentage-based outcomes without before-and-after comparisons.
Solution:
I designed a card-based system pairing percentages with icons and concise copy, prioritizing clarity and quick comprehension.
Data visualization process from sketches to final concept
Designing the webpage
My design lead and I worked together on the full desktop experience.
Together we:
Structured the page into four clear impact sections
Balanced copy, visuals, and motion to control pacing
Split animation ownership evenly (two animations each)
Used Figma Smart Animate to clearly communicate motion to developers
Website desktop design
Realizing the website sucked on mobile…
Once the desktop design was finalized, we transitioned into mobile.
At this stage, we identified a usability issue:
The desktop layout resulted in excessive vertical scrolling on mobile, making the content feel overwhelming despite working well on larger screens.
Phone screen size versus mobile website length
You live and you learn…
To solve the newly discovered problem, we explored multiple mobile layout options.
We ultimately designed horizontal card carousels for each data category.
This allowed us to:
Break content into swipeable pieces
Preserve all text and animations
Reduce vertical scroll by ~48%
Make category transitions clearer
Mobile design process
Why this worked
Dramatic reduction in scroll fatigue
More digestible data storytelling
Intuitive mobile-native interaction
Cleaner separation between categories
Mobile redesign before versus after
Adding some movement
Animation ownership was split evenly across the team. My work included:
Defining motion direction and sequencing
Refining timing and easing
Adapting animations for mobile
Creating developer-ready Smart Animate prototypes
Animation design process and outcome
Outcome
Seeing it all come together
Final Design
The final website…
A more compelling donor landing page centered on impact storytelling
Clearer data communication across all four impact categories
A mobile interaction system that reduced cognitive load
Developer-ready motion prototypes to support accurate implementation
Stronger alignment between Digital NEST’s mission, brand, and donor experience
Desktop and mobile final designs
Conclusion
Reflecting back on my work
Lessons learned
Complex storytelling requires structure. Turning four dense data categories into clear, digestible “chapters” taught me the value of strong hierarchy and pacing in donor-facing design.
Mobile needs its own system. Discovering the long-scroll issue during mobile adaptation showed how desktop decisions can’t be mirrored directly. Designing the horizontal carousel system strengthened my responsive UX approach.
Cross-functional clarity is essential. Building Smart Animate prototypes and notes sharpened my ability to communicate motion and interactions to developers, reducing ambiguity.
Now what?
If I had more time, I would prioritize usability testing on both desktop and mobile to validate how donors interpret the data, engage with the animations, and navigate toward the donation CTA. I would also iterate on the mobile carousel pattern to ensure long-term scalability and explore subtle micro-interactions within the donation flow.