Instructional Designer + eLearning Developer
Thunkable Onboarding Eperience For Young Learners
Feb 2026 freelance commission · Career transition project
Year :
2026
Industry :
Ed-tech
Client :
Students ages 6–12 · WhiteHat Jr platform
Project Duration :
1 month
Tools:
Articulate Storyline 360 · Thunkable · Figma
I taught 2,000+ coding sessions on this platform. I watched students struggle with the same roadblocks every single time. When WhiteHat Jr called me back to fix it, I knew exactly where to start.
Problem
The STAC Browser already connected researchers to vast climate data, but growing needs made exploration more demanding. I saw an opportunity to refine search and navigation to make dataset discovery more intuitive, fluid, and aligned with how scientists think.
Limted Filter Capabilites
Powerful filtering tools existed but were easy to miss. By surfacing them through clearer hierarchy and smarter interaction design, we helped researchers save time and confidently explore data at scale.
Process
The Constraint That Became My Design Thesis
How I managed constraints
Since I couldn't eliminate the wait, I designed around it:
1. Set expectations upfront
Turned waiting time into preparation time
3. Designed email communication as part of the experience
4. Redesigned Magpie's UI (Game Changer!)
Research & Insights
UNDERSTANDING OUR USERS
New PhD students felt overwhelmed when landing on the Marble Climate website. There was no clear entry point or guidance on what to do first.
02 - Missing Crucial Filters
User wanted more than just spatial and temporal filters to find climate datasets
02 - Missing Crucial Filters
03 - Technical Jargons, Missing Contextual Explanation
Dataset names are incomprehensible strings of technical acronyms with no built-in explanations, users wanted contextual explanation for each acronym or technical terms in a dataset name
03 - Technical Jargons, Missing Contextual Explanation
Process
From v0 Prototype to High-Fi Design in Figma
Here’s how the dataset filter feature evolved…
Solution
Streamlining Complex Workflows Through AI-Accelerated Desige :
Element 1 : Contextualization
Before Catalog-First Navigation
Users were for forced to browse through all available catalogs before initiating a search, adding unnecessary navigation steps and cognitive overhead to research workflows.
After Search-first Experience
Replaced an entire catalogs search page with a hero-driven landing page with integrated catalog selection that enables immediate search while maintaining discovery through contextual filtering and progressive disclosure.
Element 2 : Consolidation
Before: Scattered Information Architecture
Users navigated to individual catalog pages to view metadata, then accessed a separate filter panel to search within that catalog creating a disconnect between browsing and searching.
After: Organized Information Sidebar
A structured left sidebar consolidates all vital information into an organized, expandable menu. Users can now access source links, sharing options, metadata, and licensing from a single, predictable location with advanced filters grouped
Element 3 : Scaffolding
Before: Unguided Search Experience
Users faced a blank search box with no guidance on what types of climate data existed. PhD students and climate researchers searched blindly, often using incorrect terminology or missing relevant datasets entirely because they didn't know what categories were available.
After: Category-Based Search Guidance
A clear "Sub-Categories" section displays the five most-used data types with checkboxes and info icons. Users can now filter by data types with descriptions explaining each category. This guides researchers toward the right data type immediately.
Element 4 : Prioritization
Element 6 : Law of Similarity : Leveraging mental models
Before: Custom Temporal Filter Pattern
The original temporal filter used a basic text input with calendar picker, a pattern unfamiliar to researchers. Users could only select simple date ranges with no recurrence support. A use case scenario where complex temporal queries like "precipitation data every month June–December from 1955–1961" required workarounds or multiple searches.
After User-Driven Advanced Filters
The redesigned filter adopts Google Calendar's proven interaction pattern: start/end dates with time inputs, recurrence options ("Does Not Repeat" / "Never" / "Ends On"), and "All Day" checkbox. Users instantly recognize the interface and understand how to configure complex temporal queries without training.
Real Use Case: Monsoon Analysis
Element 6 : Accomodaiton
Before: Spatial Filter with bounding box
Simple checkbox: "Filter by spatial extent" Single interaction method: "Click on the map to add a bounding box"
After: Spatial Filter with user centric selection options.
Spatial Filter with city name input, lat/long input, bounding box selection, location pin and shape file upload.
Element 7 : Contextual Metadata
Reflection
From pain points to power features
89%
Reduction in filter configuration errors
76%
Faster complex filter configuration
8X
Reduction in unnecessary search queries
This project pushed me to navigate multiple constraints while maintaining design quality and user experience.
Reflection
Navigating Ambiguity, Overcoming Challenges
This project pushed me to navigate multiple constraints while maintaining design quality and user experience.
🤖 AI INTEGRATION
Balancing AI efficiency with design quality, managing inconsistent outputs, and development handoff issues.
What I did :
👩🎨 DESIGN’S NEW ROLE ON THE TEAM
💡KEY LEARNINGS
AI as a Design Accelerator
I learned to leverage AI for rapid ideation and prototyping while maintaining design quality through strategic prompt engineering.
Prioritization Under Constraints
Learned to focus on MVP essentials over nice-to-haves, delivering meaningful progress within technical and timeline constraints.
💡CHECK OUT RECENT VERSION OF AI ACCELERATED DESIGN…
More Projects
Instructional Designer + eLearning Developer
Thunkable Onboarding Eperience For Young Learners
Feb 2026 freelance commission · Career transition project
Year :
2026
Industry :
Ed-tech
Client :
Students ages 6–12 · WhiteHat Jr platform
Project Duration :
1 month
Tools:
Articulate Storyline 360 · Thunkable · Figma
I taught 2,000+ coding sessions on this platform. I watched students struggle with the same roadblocks every single time. When WhiteHat Jr called me back to fix it, I knew exactly where to start.
Problem
The STAC Browser already connected researchers to vast climate data, but growing needs made exploration more demanding. I saw an opportunity to refine search and navigation to make dataset discovery more intuitive, fluid, and aligned with how scientists think.
Limted Filter Capabilites
Powerful filtering tools existed but were easy to miss. By surfacing them through clearer hierarchy and smarter interaction design, we helped researchers save time and confidently explore data at scale.
Process
The Constraint That Became My Design Thesis
How I managed constraints
Since I couldn't eliminate the wait, I designed around it:
1. Set expectations upfront
Turned waiting time into preparation time
3. Designed email communication as part of the experience
4. Redesigned Magpie's UI (Game Changer!)
Research & Insights
UNDERSTANDING OUR USERS
New PhD students felt overwhelmed when landing on the Marble Climate website. There was no clear entry point or guidance on what to do first.
02 - Missing Crucial Filters
User wanted more than just spatial and temporal filters to find climate datasets
02 - Missing Crucial Filters
03 - Technical Jargons, Missing Contextual Explanation
Dataset names are incomprehensible strings of technical acronyms with no built-in explanations, users wanted contextual explanation for each acronym or technical terms in a dataset name
03 - Technical Jargons, Missing Contextual Explanation
Process
From v0 Prototype to High-Fi Design in Figma
Here’s how the dataset filter feature evolved…
Solution
Streamlining Complex Workflows Through AI-Accelerated Desige :
Element 1 : Contextualization
Before Catalog-First Navigation
Users were for forced to browse through all available catalogs before initiating a search, adding unnecessary navigation steps and cognitive overhead to research workflows.
After Search-first Experience
Replaced an entire catalogs search page with a hero-driven landing page with integrated catalog selection that enables immediate search while maintaining discovery through contextual filtering and progressive disclosure.
Element 2 : Consolidation
Before: Scattered Information Architecture
Users navigated to individual catalog pages to view metadata, then accessed a separate filter panel to search within that catalog creating a disconnect between browsing and searching.
After: Organized Information Sidebar
A structured left sidebar consolidates all vital information into an organized, expandable menu. Users can now access source links, sharing options, metadata, and licensing from a single, predictable location with advanced filters grouped
Element 3 : Scaffolding
Before: Unguided Search Experience
Users faced a blank search box with no guidance on what types of climate data existed. PhD students and climate researchers searched blindly, often using incorrect terminology or missing relevant datasets entirely because they didn't know what categories were available.
After: Category-Based Search Guidance
A clear "Sub-Categories" section displays the five most-used data types with checkboxes and info icons. Users can now filter by data types with descriptions explaining each category. This guides researchers toward the right data type immediately.
Element 4 : Prioritization
Element 6 : Law of Similarity : Leveraging mental models
Before: Custom Temporal Filter Pattern
The original temporal filter used a basic text input with calendar picker, a pattern unfamiliar to researchers. Users could only select simple date ranges with no recurrence support. A use case scenario where complex temporal queries like "precipitation data every month June–December from 1955–1961" required workarounds or multiple searches.
After User-Driven Advanced Filters
The redesigned filter adopts Google Calendar's proven interaction pattern: start/end dates with time inputs, recurrence options ("Does Not Repeat" / "Never" / "Ends On"), and "All Day" checkbox. Users instantly recognize the interface and understand how to configure complex temporal queries without training.
Real Use Case: Monsoon Analysis
Element 6 : Accomodaiton
Before: Spatial Filter with bounding box
Simple checkbox: "Filter by spatial extent" Single interaction method: "Click on the map to add a bounding box"
After: Spatial Filter with user centric selection options.
Spatial Filter with city name input, lat/long input, bounding box selection, location pin and shape file upload.
Element 7 : Contextual Metadata
Reflection
From pain points to power features
89%
Reduction in filter configuration errors
76%
Faster complex filter configuration
8X
Reduction in unnecessary search queries
This project pushed me to navigate multiple constraints while maintaining design quality and user experience.
Reflection
Navigating Ambiguity, Overcoming Challenges
This project pushed me to navigate multiple constraints while maintaining design quality and user experience.
🤖 AI INTEGRATION
Balancing AI efficiency with design quality, managing inconsistent outputs, and development handoff issues.
What I did :
👩🎨 DESIGN’S NEW ROLE ON THE TEAM
💡KEY LEARNINGS
AI as a Design Accelerator
I learned to leverage AI for rapid ideation and prototyping while maintaining design quality through strategic prompt engineering.
Prioritization Under Constraints
Learned to focus on MVP essentials over nice-to-haves, delivering meaningful progress within technical and timeline constraints.
💡CHECK OUT RECENT VERSION OF AI ACCELERATED DESIGN…
More Projects
Instructional Designer + eLearning Developer
Thunkable Onboarding Eperience For Young Learners
Feb 2026 freelance commission · Career transition project
Year :
2026
Industry :
Ed-tech
Client :
Students ages 6–12 · WhiteHat Jr platform
Project Duration :
1 month
Tools:
Articulate Storyline 360 · Thunkable · Figma
I taught 2,000+ coding sessions on this platform. I watched students struggle with the same roadblocks every single time. When WhiteHat Jr called me back to fix it, I knew exactly where to start.
Problem
The STAC Browser already connected researchers to vast climate data, but growing needs made exploration more demanding. I saw an opportunity to refine search and navigation to make dataset discovery more intuitive, fluid, and aligned with how scientists think.
Limted Filter Capabilites
Powerful filtering tools existed but were easy to miss. By surfacing them through clearer hierarchy and smarter interaction design, we helped researchers save time and confidently explore data at scale.
Process
The Constraint That Became My Design Thesis
How I managed constraints
Since I couldn't eliminate the wait, I designed around it:
1. Set expectations upfront
Turned waiting time into preparation time
3. Designed email communication as part of the experience
4. Redesigned Magpie's UI (Game Changer!)
Research & Insights
UNDERSTANDING OUR USERS
New PhD students felt overwhelmed when landing on the Marble Climate website. There was no clear entry point or guidance on what to do first.
02 - Missing Crucial Filters
User wanted more than just spatial and temporal filters to find climate datasets
02 - Missing Crucial Filters
03 - Technical Jargons, Missing Contextual Explanation
Dataset names are incomprehensible strings of technical acronyms with no built-in explanations, users wanted contextual explanation for each acronym or technical terms in a dataset name
03 - Technical Jargons, Missing Contextual Explanation
Process
From v0 Prototype to High-Fi Design in Figma
Here’s how the dataset filter feature evolved…
Solution
Streamlining Complex Workflows Through AI-Accelerated Desige :
Element 1 : Contextualization
Before Catalog-First Navigation
Users were for forced to browse through all available catalogs before initiating a search, adding unnecessary navigation steps and cognitive overhead to research workflows.
After Search-first Experience
Replaced an entire catalogs search page with a hero-driven landing page with integrated catalog selection that enables immediate search while maintaining discovery through contextual filtering and progressive disclosure.
Element 2 : Consolidation
Before: Scattered Information Architecture
Users navigated to individual catalog pages to view metadata, then accessed a separate filter panel to search within that catalog creating a disconnect between browsing and searching.
After: Organized Information Sidebar
A structured left sidebar consolidates all vital information into an organized, expandable menu. Users can now access source links, sharing options, metadata, and licensing from a single, predictable location with advanced filters grouped
Element 3 : Scaffolding
Before: Unguided Search Experience
Users faced a blank search box with no guidance on what types of climate data existed. PhD students and climate researchers searched blindly, often using incorrect terminology or missing relevant datasets entirely because they didn't know what categories were available.
After: Category-Based Search Guidance
A clear "Sub-Categories" section displays the five most-used data types with checkboxes and info icons. Users can now filter by data types with descriptions explaining each category. This guides researchers toward the right data type immediately.
Element 4 : Prioritization
Element 6 : Law of Similarity : Leveraging mental models
Before: Custom Temporal Filter Pattern
The original temporal filter used a basic text input with calendar picker, a pattern unfamiliar to researchers. Users could only select simple date ranges with no recurrence support. A use case scenario where complex temporal queries like "precipitation data every month June–December from 1955–1961" required workarounds or multiple searches.
After User-Driven Advanced Filters
The redesigned filter adopts Google Calendar's proven interaction pattern: start/end dates with time inputs, recurrence options ("Does Not Repeat" / "Never" / "Ends On"), and "All Day" checkbox. Users instantly recognize the interface and understand how to configure complex temporal queries without training.
Real Use Case: Monsoon Analysis
Element 6 : Accomodaiton
Before: Spatial Filter with bounding box
Simple checkbox: "Filter by spatial extent" Single interaction method: "Click on the map to add a bounding box"
After: Spatial Filter with user centric selection options.
Spatial Filter with city name input, lat/long input, bounding box selection, location pin and shape file upload.
Element 7 : Contextual Metadata
Reflection
From pain points to power features
89%
Reduction in filter configuration errors
76%
Faster complex filter configuration
8X
Reduction in unnecessary search queries
This project pushed me to navigate multiple constraints while maintaining design quality and user experience.
Reflection
Navigating Ambiguity, Overcoming Challenges
This project pushed me to navigate multiple constraints while maintaining design quality and user experience.
🤖 AI INTEGRATION
Balancing AI efficiency with design quality, managing inconsistent outputs, and development handoff issues.
What I did :
👩🎨 DESIGN’S NEW ROLE ON THE TEAM
💡KEY LEARNINGS
AI as a Design Accelerator
I learned to leverage AI for rapid ideation and prototyping while maintaining design quality through strategic prompt engineering.
Prioritization Under Constraints
Learned to focus on MVP essentials over nice-to-haves, delivering meaningful progress within technical and timeline constraints.