UI/UX designer · Irvine, CA

Hi I'm Natalie, a UI/UX designer specializing in Human–AI Interaction and AI-accelerated design

I design the parts of an AI product that decide whether people trust it — what it heard, how sure it is, and what happens when it gets something wrong.

Case studies

Burger Joint drive-thru kiosk screen: the AI host and live conversation panel on the left, a voice-orderable menu grid in the middle, and the running order total on the right.

AI Drive-thru voice ordering

An AI product built for restaurant drive-through's to help customers order their food.

Logical Zoom — Kiosk UI/UX design

GreenTogether app screens: the events map with a list of upcoming Laguna Beach cleanups beside the tiered leaderboard, with the app's leaf logo between them.

GreenTogether

A three member team project focused on sustainability and helping users find and participate in local environmental events such as park cleanups, recycling drives, and tree planting.

FullyBeyond Designathon — UI/UX mobile app

Discoverfest 2026 logo: “Discover” and “Fest” set on tilted 3D blocks in navy and coral, with a 2026 block above, the #titanexperience banner, and the SLL Student Life & Leadership badge.

Graphic design

A comprehensive view of my work as an artist.

AI Drive-thru voice ordering

Overview

Problem

Staffing shortages and human error make drive-thru ordering inconsistent — and an AI taking the order only helps if the customer believes it got the order right.

Goal

Make an order-taker people are willing to use: one a customer can check without slowing the lane down.

My role

User research, competitive research, journey mapping, UX, UI.

Solution

I show the order forming as it is spoken — a live transcript, a visible listening state, and menu items labelled with the exact words that order them — so a mistake gets caught before the window, not at it.

Result

Built for fast-food chains, delivered in two weeks.

Key features — Drive-thru

Burger Joint menu screen: a grid of items with photos, prices and Popular and Vegan tags, each carrying the phrase that adds it, beside a running order panel.

Voice-controlled menu

Every item is labeled with the exact words that order it — “Add Flame Master” — so no one has to guess the phrasing the AI accepts. We also designed it for any type of device and size.

The order panel fills in beside the menu as items land, keeping the running total in view before anyone commits to it.

Drive-thru conversation panel: an alternating transcript between the AI host and the customer, from “Welcome! Ready to order?” through to “Complete order”, with a mic button below.

Conversation history

The transcript stays on screen so customers can check what the AI heard against what they actually said. When something’s wrong, they can see exactly where it went wrong.

Drive-thru AI assistant screen: the host avatar ringed in orange, a “Listening…” status pill, and a prompt reading “Say ‘start over’ to reset”. Before vs After

AI Host

The AI Host was created to help the users feel more comfortable communicating with the AI. The AI Host visuals and voice are entirely customizable for every restaurant.

A “Listening…” notification lights up whenever the mic is open, so people aren’t left talking into a screen that might not be paying attention. The host itself — avatar and voice — is customizable per restaurant.

What research told me

  • Trust was the blocker — not speed, and not accuracy on paper.
  • People didn’t distrust the AI for being AI. They distrusted it because they couldn’t tell whether it had heard them.
  • The fix was feedback, not a smarter model. Show the order forming while it’s being spoken.

Designing the failure cases

  • When the model isn’t confident it asks — “Diet Coke or regular?” — instead of guessing.
  • Every item in the running order stays editable, so a correction is one tap, not a restart.
  • Misheard input, background noise and mid-order changes each got their own flow.

How I worked

  • Competitive review first, then the happy path — then I mapped the unhappy path, which is where nearly every feature here came from.
  • Wireframes went straight into moderated tests: five people ordering out loud to a screen.
  • I cut the AI Host’s spoken confirmations after testing — hearing every item read back made the wait feel longer, so the reassurance moved to the visual listening state.

What I’d change

  • Bring in real background noise earlier. I ran early sessions in a quiet room, the one condition a drive-thru is never in.
  • Test the AI Host’s personality against a plain progress indicator — I never proved the character earns its place over the transparency features.

GreenTogether

Project overview

Problem

More than 8 million pieces of trash a year are dropped outside bins in public places — and picking some up alone feels pointless, so people do it once and stop.

Goal

Turn a one-off good deed into a habit: give people proof the effort adds up, and a reason to come back next weekend.

My role

Research, UX, UI — a 24-hour design competition with a team of four.

Solution

I paired a weekly-resetting leaderboard, so a newcomer is never permanently behind, with a map that turns the intention into a specific event to show up to.

Result

Judges called the map and leaderboard pairing the clearest read on the problem of any team that day.

Key features

GreenTogether leaderboard screen: the user ranked 36th with 120 points, above Diamond and Platinum tiers of ranked players.

Leaderboard

The leaderboard makes the effort add up to something visible — a running count that gives people a reason to come back.

GreenTogether interactive map screen: a park map with a numbered event pin, above a list of upcoming Laguna Beach cleanups with their dates and times.

Interactive map

Once the leaderboard gave people a reason to show up, they needed a way to find something to show up to. The map shows the locations of the events, with dates and times below.

What research told me

  • Awareness wasn’t the blocker — people already knew littering was a problem.
  • Picking up trash alone felt pointless. They wanted proof the effort added up.
  • And they wanted a reason to come back the next weekend.

How I worked

  • Three concepts sketched in the first two hours, voted on as a team before anyone opened Figma — cheaper to kill an idea on paper.
  • The leaderboard came first; the map came out of a later pivot, once we saw people needed an event to show up to, not just a score.
  • Our first leaderboard ranked by lifetime total — unwinnable for anyone starting late. Weekly resets put everyone on the same clock each Monday.

What I’d change

  • We spent the 24 hours on research and flows, and the visual execution never caught up — against the finalists, that showed.
  • Next time: lock the flows by hour twelve and give the back half to visual design.

Graphic design

CalState Fullerton Discoverfest logo

Discoverfest text-based concept: “DISCOVER” in outlined capitals with a navy and orange globe standing in for the O, “fest” in lowercase script, plus #titanexperience and 2026 lettered around the globe stand.

Version 1

The client hadn’t settled on a theme for Discoverfest and left that to us, so round one was really a set of theme proposals. The brief asked for a text-based mark, so I built the concept into the type itself — a globe in place of the O, pushing exploration and discovery without adding a separate illustration.

Discoverfest “Puddle Splash” concept: “Discover Fest” in orange brush lettering across a navy splash shape, with 2026, scattered droplets, the SLL badge and #titanexperience.

Version 2

The first concept, “Puddle Splash,” didn’t survive review — the splash shape and droplets competed with the type, so the thing people were meant to read came second. “Building Blocks” put the idea into the letterforms instead of around them: “Discover” and “Fest” on tilted 3D blocks, students building their own Titan Experience.

Discoverfest 2026 logo: “Discover” and “Fest” set on tilted 3D blocks in navy and coral, with a 2026 block above, the #titanexperience banner, and the SLL Student Life & Leadership badge.
Version 3 — final

The client picked Building Blocks. I built out vertical and horizontal lockups so the mark works across banners, posters and social.

Education

2026–2027

University of California, Irvine

Master of Human-Computer Interaction & Design. Graduating August 2027.

2024–2026

California State University, Fullerton

Bachelor of Fine Arts (BFA) in Graphic and Interactive Design. Graduated with Honors.

2022–2024

Saddleback College

Associate in Arts for Transfer, Studio Arts, with an emphasis in Digital Arts and Social Psychology. Graduated with Honors.