Design & Development
Design Approach
Design and development work is where I translate research questions into usable learning tools, websites, course systems, and communication artifacts. Across product design, instructional design, visual storytelling, and evaluation, I focus on clarity, accessibility, and designs that people can actually use in educational settings.
Website Design
Create public-facing sites that organize research, tools, and practical resources into clear pathways for educators and learners.
Learning Products
Design app, course, and resource experiences that translate learner needs into usable instructional flows.
Media & Visual Systems
Build newsletters, video studies, campaigns, and supporting visuals that strengthen communication and engagement.
Evaluation
Use interviews, surveys, and design evidence to guide program decisions and improvement recommendations.
Website Design & Development
Live website · Content architecture · Front-end design
AI for Education Resource Library
I designed and launched a public-facing library that curates AI videos, tools, resources, and prompt patterns for teaching, study, and course design.
- Audience-driven structure: organized the site around practical entry points for teachers, students, and instructional designers rather than a generic tool list.
- Editorial curation: translated a growing body of AI resources into a cleaner browsing system with videos, tools, prompts, and quick-start guidance.
- Visual system: used a softer library-inspired interface that feels more like a curated shelf than a software dashboard.
Website prototype · Information design
Academic Site Concept and Project Architecture
I also developed an academic website prototype that experiments with research-map navigation, project-detail pages, and a calmer editorial hierarchy for presenting scholarly work online.
- Information architecture: organized research, teaching, news, and service into a clearer multi-page structure.
- Project storytelling: designed dedicated project pages that connect problem framing, methods, outputs, and impact.
- Visual translation: used a research-agenda SVG to turn conceptual relationships into a navigable web artifact.
Developer tool · Codex skill · Open source
Ask Belle Site Chatbot Skill
A reusable Codex skill that automates the planning phase for adding a grounded chatbot to any personal website, portfolio, or academic homepage.
- Auto-discovery: inspects a public site or repo, discovers scope, sections, links, and deployment details without manual setup.
- Plan-first: returns an implementation-ready plan before writing any code; switches to upgrade mode when chatbot code already exists.
Community communications · Editorial design
PALDT Newsletter Series
Weekly communication design that keeps PALDT members informed about events, learning opportunities, and community resources.
- Template system: designed repeatable layouts for email, social sharing, and event spotlights.
- Content synthesis: turned scattered announcements and student-leadership updates into concise weekly issues.
Learning Products & Course Design
Mini course · AI architecture · Live site
Ask Belle: Codebase to Course
A five-module mini course that deconstructs how a bounded AI chatbot assistant works — from a real codebase to a shippable product. Built for developers and vibe coders who want to understand where AI logic belongs in a static-site architecture.
- Scope-first design: taught that the chat UI lives in the static site but the model call cannot — and why that boundary matters.
- Grounding over hallucination: origin checks, controlled knowledge files, and explicit model instructions prevent invention.
- Narrow by design: the feature works because it stays bounded to published site content, not because it tries to answer everything.
Product design · Mobile learning · Design-based research
TicApp
TicApp is a mobile learning design project that turns a specific heritage Chinese typing challenge into a guided, app-based learning experience.
- Needs-to-interface translation: moved from learner pain points and contextual inquiry into a mobile-first flow with staged practice pathways.
- Bilingual UX: designed microcopy and activity logic for learners navigating English and Mandarin support at the same time.
- Research connection: the design work later became a Springer book chapter on design thinking for diverse learners.
Graduate course design · Purdue University
EDCI 557 Strategic Assessment & Evaluation
Designed a clearer online course experience for working professionals in a fully asynchronous graduate course.
- Onboarding flow: built a getting-started hub with weekly overview videos, resource checklists, and orientation cues.
- Learner support: structured the course so students could navigate modules and assessment tasks across time zones.
Hybrid teaching · Self-paced modules
Language Pedagogy Design Across Formats
I design bilingual and modular learning experiences for language educators working across synchronous, hybrid, and self-paced contexts.
- ELT Professionalism: co-developed hybrid sessions with live Zoom facilitation, reflective prompts, and bilingual support materials.
- Genre-based teaching modules: built a self-paced playlist with analysis videos, downloadable templates, and guided AI-enhanced practice prompts.
Media & Visual Storytelling
Motion design · AI-assisted visual storytelling
Purdue in Black & Gold
Short motion-design study that turns Purdue campus photos into a black-and-gold cinematic sequence.
- Visual direction: built a consistent visual system from original campus imagery using Nanobanana.
- Motion planning: storyboarded the piece as one continuous camera move and animated it in Dreamina (Seedance).
Campaign design · Team leadership
Visual Campaigns
Led the student design team for the Indiana University IST Conference and built a cohesive campaign across posters, programs, and digital promotion.
- System thinking: translated one visual direction into keynote posters, session layouts, and event materials.
- Team coordination: art directed collaborative student design work across formats and deadlines.
Audio production · Bilingual communication
Podcast Production
Produced bilingual podcast episodes that document practitioner stories, GenAI pilots, and community-facing conversations.
- Episode workflow: handled scripting, production, and basic editing.
- Feedback loop: reviewed listener analytics and audience responses to refine future episodes.
Needs Assessment & Evaluation
Needs assessment · Program redesign
Retention-Focused Needs Assessment
Used interviews, focus groups, surveys, and SWOT analysis to identify learner needs and program-level retention gaps.
- Evidence collection: combined six interviews, two focus groups, and Qualtrics survey data.
- Actionable outputs: produced personas, frame factors, and recommendations that informed redesign decisions.
Evaluation design · Instructional review
Training Evaluation Toolkit
Designed a multi-instrument evaluation process to examine learning outcomes, alignment, and improvement opportunities.
- Mixed instruments: built Canvas survey, Qualtrics survey, and alignment-checklist workflows into one review process.
- Decision support: translated findings into clear strengths, improvement areas, and next-step recommendations for instructional teams.