HomeBackground

Design Work

DemeterEHR: IVF Care Platform

Led design strategy for a two-sided Electronic Health Record (EHR) platform connecting IVF patients, counsellors, and clinicians. Conducted user research across all roles and designed interaction flows that reimagined how updates, documents, and conversations move between parties.

Product Design

Market Research

Cross-Platform

Figma

Toaster: PowerPoint Night Poster

I created a playful design and Rive animation for a PowerPoint night I hosted with the theme "unexpected". Thought a toaster record player was pretty unexpected.

Rive

Figma

Motion Design

Adobe for Business Site

What I did: Advocated for adopting Framer within our team, prototyped and animated the Adobe for Business homepage. First in Figma, then in Framer to test interaction fidelity. Designed motion for product videos under tabs to make enterprise content more exploratory.

Narrative: Enterprise, but human. Colorful, accessible, and efficient. The primary interaction—a tabbed navigation—invites visitors to discover rather than click through.

Framer

Rive

Lovable

Rapid Prototyping

AnswerThis Site: All-in-One Research Assistant

What I did: Tasked with developing a new concept for the site. Built a design system to refine content hierarchy and motion, and implemented a scalable CMS structure in Framer with integrated Rive animations.

Narrative: A researcher’s desk brought to life; paperclips, notes, and devices scattered across the workspace. Text is written through a pencil animation and components used pictures I took in my workspace. The goal was to make research feel tactile.

Framer

Rive

Design System

Pixeldoro: Gamified Pomodoro App

Designed the full visual identity and in-game assets for a steampunk pixel world; concept art, character design, pixel-art UI, and animated sprites.

Figma

Resprite

PixelLab.ai

Game Design

TechNova Hackathon Site

What I did: Led graphic design and asset creation for a full site design for UWaterloo's women+ hackathon.

Narrative: A playful space odyssey. The University of Waterloo's goose mascot flies through space by boarding a magical train.

Framer

Figma Make

Graphic Design

Web Design

LiftAI: AI Personal Trainer

I was contracted to create the full design system and end-to-end mobile experience in Figma and Lottie. Each interaction was designed to feel like progress, with fluid motion and subtle glow cues to match the rhythm of a real workout.

Lottie

Mobile Design

Minecraft Education Canada

As a product marketing manager, I managed the business operations and creative direction of Minecraft Education Canada. I partnered with schools to design custom Minecraft worlds that teach STEM to K–12 students.

Creative Direction

Marketing

Video Editing

TEDxUW: 2023 University of Waterloo

Designed the event’s design system, nature-based motion elements, and website with 4 other designers to match the year’s theme, "From the Ground Up".

Web Design

Collaboration

Design System

Motion Design

Calgary Fringe: Event Management Dashboard

As part of a non-profit, I designed Calgary Fringe's event management dashboard pro bono alongside a cross-functional team of designers, developers, and a PM.

Figma

About

Cat Hoang

Often excited :)

Product Designer

My design values

Design Work

DemeterEHR: IVF Care Platform

Led design strategy for a two-sided Electronic Health Record (EHR) platform connecting IVF patients, counsellors, and clinicians. Conducted user research across all roles and designed interaction flows that reimagined how updates, documents, and conversations move between parties.

Product Design

Market Research

Cross-Platform

Figma

Toaster: PowerPoint Night Poster

I created a playful design and Rive animation for a PowerPoint night I hosted with the theme "unexpected". Thought a toaster record player was pretty unexpected.

Rive

Figma

Motion Design

Adobe for Business Site

What I did: Advocated for adopting Framer within our team, prototyped and animated the Adobe for Business homepage. First in Figma, then in Framer to test interaction fidelity. Designed motion for product videos under tabs to make enterprise content more exploratory.

Narrative: Enterprise, but human. Colorful, accessible, and efficient. The primary interaction—a tabbed navigation—invites visitors to discover rather than click through.

Framer

Rive

Lovable

Rapid Prototyping

AnswerThis Site: All-in-One Research Assistant

What I did: Tasked with developing a new concept for the site. Built a design system to refine content hierarchy and motion, and implemented a scalable CMS structure in Framer with integrated Rive animations.

Narrative: A researcher’s desk brought to life; paperclips, notes, and devices scattered across the workspace. Text is written through a pencil animation and components used pictures I took in my workspace. The goal was to make research feel tactile.

Framer

Rive

Design System

Pixeldoro: Gamified Pomodoro App

Designed the full visual identity and in-game assets for a steampunk pixel world; concept art, character design, pixel-art UI, and animated sprites.

Figma

Resprite

PixelLab.ai

Game Design

TechNova Hackathon Site

What I did: Led graphic design and asset creation for a full site design for UWaterloo's women+ hackathon.

Narrative: A playful space odyssey. The University of Waterloo's goose mascot flies through space by boarding a magical train.

Framer

Figma Make

Graphic Design

Web Design

LiftAI: AI Personal Trainer

I was contracted to create the full design system and end-to-end mobile experience in Figma and Lottie. Each interaction was designed to feel like progress, with fluid motion and subtle glow cues to match the rhythm of a real workout.

Lottie

Mobile Design

Minecraft Education Canada

As a product marketing manager, I managed the business operations and creative direction of Minecraft Education Canada. I partnered with schools to design custom Minecraft worlds that teach STEM to K–12 students.

Creative Direction

Marketing

Video Editing

TEDxUW: 2023 University of Waterloo

Designed the event’s design system, nature-based motion elements, and website with 4 other designers to match the year’s theme, "From the Ground Up".

Web Design

Collaboration

Design System

Motion Design

Calgary Fringe: Event Management Dashboard

As part of a non-profit, I designed Calgary Fringe's event management dashboard pro bono alongside a cross-functional team of designers, developers, and a PM.

Figma

About

Cat Hoang

Often excited :)

Product Designer

My design values