Hi there I craft GenUX experiences in

Expressive Typography

Font Posters GenUX

Led the infrastructure behind 100% autonomous poster generation for ~2,000 font families

Google Sans Flex Minisite

Vibe-coded a minisite that lets anyone personalize Google Sans Flex live

Font Picker Redesign

Rebuilt font discovery around AI, turning a long browse into one prompt

Solarity on Solana

Designed one gaming community product across Twitter, mobile and VR

Azuli: Reimagining Skincare

Co-founded it and designed everything: logo, packaging, product shoots and Shopify store

Playground

Produced 200+ editorial image assets on font readability and underserved languages across Material Design and Google Design websites, reaching over ~500K page views.

200+editorial assets

~500Kpage views

Achievements

GUXIES Award 2025

Won the Visual Design category for Google Sans Code

Google Fonts redesign on the Webby Awards site

Webby Winner 2024

Best Visual Design — Function, and Best User Interface for Websites and Mobile Sites

Red Dot Award 2024

Google Sans Flex — Typeface, Brands & Communication Design

Me

Rebecca smiling in a green cap above a lake and mountains

Rebecca Hsiao

Senior Product Designer

Based in: San Francisco, born in Brazil
On the ice: Professional figure skater
Off hours: Singing is my favorite pastime
Speaks: English, Mandarin, Portuguese, Spanish

Type Scale of Experiences

2022 — Now

Senior Product Designer

Google · San Francisco, CA

Spearheaded the first GenUX efforts, building the infrastructure behind Font Posters.
Led the complete redesign of Google Fonts using Material Design 3 design system tokens across all devices — won a Webby Award for Best Visual Design.
Resolved 50+ accessibility issues — ~6.5M monthly visitors, 20%+ of them new.
Helped Google Slides define the type hierarchy for 40+ templates.
Rebuilt search and filters around 55+ typographic features — 1M clicks a week.

Jun — Sep 2021

UX Design Intern

Google · Sunnyvale, CA

Defined critical user journeys and A/B tested a multilingual feature reaching billions of font users.
Validated with UXR, then prototyped and handed off to engineering.

2019 — 2020

Lead UI UX Designer

Jenni AI · San Diego, CA

Led UX, helping reach an 85% gross margin in 6 months at $90K monthly revenue.
Designed an AI text editor on in-house language models, built for SEO and content.

Education

2017 — 2021

University of California San Diego

B.S. Human-Computer Interaction Design · B.A. International Business

Resumé PDF

Let's connect.

Always up for talking type, GenUX, or what a portfolio should be able to answer on its own.

bequinha.hsiao@gmail.com

An AI automated project

Font Posters GenUX

A poster for nearly 2,000 font families, each showing the font’s personality at a glance, generated with no human in the loop. I spearheaded our first GenUX effort, from the demo that proved it was possible to the creative bar that let it run on its own.

0%no human in the loop

0visitors a month

0unique posters generated

How did we achieve a 100% automation when most AI projects stall at 80% success rate?

A multi-step framework where Gemini knows the end goal, text and background that co-exist, and a feedback loop that assesses and improves every poster before it ships.

AI Goal

Build a No-HitL (No Human-in-the-Loop) generative pipeline
Avoid catastrophic failures
Pre-generate posters rather than generate on-demand (cheaper)

* We are among the first teams to successfully achieve a fully automated pipeline

Design Goal

Visually showcase the font’s personality, expressiveness, emotional tone
Provide an immediate, emotional context
Designers are looking for a font that feels right

My role

A year of work and 20+ iterations, from the Imagen image model all the way to Gemini 3.1 Pro.

01 · Prove it
Prototype

I explored the first direction and built a demo infrastructure with AI that generated 50 font posters, showing it was possible.
02 · Scale it
Hand-off

Engineering took over to scale it. Scaling was hard: we kept hitting an 85% success rate.
03 · Improve qualitative outputs
Creative bar

I helped the pipeline reach the creative bar set for our qualitative metrics. I knew when it wasn’t good enough, and pushed until it was.

Generative pipeline flow

Receives font metadata

Theme + Design concept

“A sun-drenched linen bedsheet with a small, leather-bound journal resting open. A silver fountain pen lies next to a half-eaten croissant, with bright morning light streaming through sheer white curtains…”

“Dawning of a New Day is a monolinear, extremely thin cursive script…”

Generates background

Aspect ratio 16:9

Spatial analysis

Negative space detected

If rejected, it enters this loop again

Reject & regenerate

Publish or

Improvement tools

Line height improved

HTML text overlay

Chooses high contrast text color

Text treatment split

Rich realistic backgrounds

Nanobanana

HTML + CSS emphasizing on VF styles

Variable fonts

Design vibe matches font design

Cute illustrations

Key decisions

Text is the star of the show. The background is there to carry the font’s vibe and one potential intended use.

Problem

Busy backgrounds made the text unreadable.

Decision

Gemini wasn’t strong enough to typeset on its own, so we built our own line height and font size algorithms that detect issues and auto-adjust, plus a color contrast tool (below).

Problem

Image blending wasn’t strong enough; the model hallucinated the text.

Decision

Render every word in HTML + CSS, so the type is always the real font, set exactly as designed.

Problem

Art styles kept repeating from poster to poster.

Decision

Composition layouts for where the subject sits, plus the metadata tags from my earlier filter tag project, so the model understood each font’s vibe and mood.

Problem

Scaling stalled at an 85% success rate.

Decision

A feedback loop with self-improvement assessments. This was the turning point to 100% with no human in the loop.

Problem

Gemini hallucinates color, so it couldn’t be trusted to judge whether its own text was readable.

Decision · I created a color contrast tool

It measures the poster as rendered, not as described.

1Identifies the text pixels
2Reads the exact text color
3Samples the background colors nearby
4Calculates the real color contrast ratio

If more than 90% of the pixels pass, the poster passes. If not, it’s rejected.

Problem

Gemini had no spatial awareness. It rendered the HTML text outside the main frame, or overlapped text on text.

Before, it generated the HTML first and then swapped the HTML background for a Nanobanana image, which caused awful color contrast and ignored where the text sat.

Decision · a multi-step framework

Gemini knows the end goal from the start: the text and the background have to co-exist.

1Generates the HTML and the Nanobanana prompt at the same time
2Generates the Nanobanana background from that prompt
3Runs spatial analysis on the background
4Generates the final HTML using all three previous steps

Rewriting how Gemini writes each background prompt

Gemini first runs a font analysis and reads metadata tags like sophisticated, so every prompt has the context it needs.

Before · 3 slots

[subject] doing [action] in [art style]

Wasn’t good enough

After · 8 slots

01Composition layout
02Setting / environment
03Subject doing action
04Visual anchor
05Lighting
06Camera angle
07Color palette
08Art style

“Gemini drives the creativity, while our algorithms enforce the quality.”

Impact on user perception

“Gives me an example and a foresight as to how I could use the font”

“It pairs beautifully with a dark perfume image. It just creates like a premium and sophisticated mood”

“For me it’s very, very important that the background and styling actually has to match with the personality”

What I learned

Learn what Gemini is bad at, and create algorithms that act better than Gemini alone.

Questions we asked ourselves:

How might we even meet the creative bar?
How do we show off variable font capabilities in a static poster?
How do we showcase non-Latin glyphs so the poster represents how the font was designed?

Blu Blu Barrier whipped tallow cream jar

Golden Hour Glow-Up whipped tallow cream jar

Co-founder and sole designer

Azuli: Tallow, Reinvented

A skincare brand built from nothing. I co-founded Azuli and designed every piece of it — the logo, type and color system, the jars and boxes, the product photography, the social content and a custom-coded Shopify store.

0 → 1from logo to live storefront

2product lines, one system

1designer behind all of it

From the shoot to launch day

A product film for Blu Blu Barrier.

Behind the scenes at the product shoot.

Launch day, from designing the photo-booth props to the event itself.

It starts with one ingredient

Azuli mission statement: Azuli exists to replace temporary fixes with nature's lasting healing, harnessing methylene blue to restore skin at the root

The mission, from the brand manual I created. Methylene blue is the hero ingredient, so it sets both the story and the color.

1 drop & 2 palettes

A water-drop mark with a lowercase wordmark, in dark and light mode lockups.

Azuli Blue

The main palette, for the brand and Blu Blu Barrier

Digital · web and social

Primary#C9EDFF
201, 237, 255
Secondary#0000FF
0, 0, 255
Accent#000F9F
0, 15, 159

Print · CMYK

Primary16.55, 1.82, 1.97, 0
Secondary100, 80, 0, 0
Accent100, 87, 30, 18

The print palette is also the reference for product photography, so shots and screens stay in the same blue.

Golden Orange

The second palette, for Golden Hour Glow-Up

Digital · web and social

Primary#F6E5B3
Secondary#F36F32
243, 111, 50
Accent#DD4D0A
221, 77, 10

Print · CMYK

Primary3.52, 7.42, 33.98, 0
Secondary0, 70.7, 90.37, 0
Accent9, 84, 100, 1

Used for print, and on screen wherever Golden Hour Glow-Up appears.

Three typefaces, three jobs

Ninna

The main font, in medium, for big displays and headlines. The Azuli logo carries traces of it. High contrast, serif, elegant, sophisticated.

Bricolage Grotesque

A display font for smaller headlines and titles. More readable than Ninna, so it carries educational video captions and posts.

Jost

Small body text, for legibility and readability. It also sets the descriptions on the jar labels.

Two products, one system

Blu Blu Barrier

Whipped tallow cream with methylene blue and squalane, made to restore the skin barrier. Dressed in Azuli Blue.

Golden Hour Glow-Up

Whipped tallow cream with vitamin C, bakuchiol and astaxanthin, made for brightening. Dressed in Golden Orange.

Packaging, down to the dieline

I designed the jars, the boxes and every printed panel — ingredients, three-step directions and the pattern that wraps each box.

Why this jar

Azuli is the first tallow brand to use this jar design. I chose it to keep the cream clean, fresh and dosed right.

Airless pump

The pump keeps bacteria from getting in, so the cream stays clean.

Top-down view of the pump with a single dollop of blue cream

The right dose

Each press dispenses the correct amount, every time.

Blu Blu Barrier jar beside its box, a dollop of blue cream on the pump, the inner jar visible through the clear outer jar

Double insulated

A jar within a jar keeps the ingredients fresh for longer and blocks UV. The pump and inner jar are 100% recyclable.

A custom icon set

Ingredient, skincare-step and benefit icons in outlined and filled styles, built on Google's Material Symbols so they sit naturally in the storefront.

Made for the feed

A Blu Blu Barrier jar resting on an open palm, another hand reaching for the pump

A model dabbing the cream on her cheek, labeled for sensitive skin, calms irritated skin, texture improvements and skin barrier boost: deeply hydrates without clogging pores

The four Blu Blu Barrier ingredients around a swatch of blue cream: organic jojoba oil, squalane, USP methylene blue and 100% grass-fed beef tallow, each with what it does

The jar and a methylene blue dropper on blue tiles with sugarcane: 100% grass-fed tallow, squalane, jojoba, MB

A swatch of blue cream: 91% felt their skin produced less sebum over time

A Shopify storefront I built from scratch

Rather than start from a template, I designed the whole store in Shopify and customized it with Shopify's native theme code. Azuli has just launched, so the store is where the brand system meets real customers.

Visit azuliskincare.com Instagram

Font Posters GenUX

Google Sans Flex Minisite

Font Picker Redesign

Solarity on Solana

Azuli: Reimagining Skincare

Playground

Achievements

GUXIES Award 2025

Webby Winner 2024

Red Dot Award 2024

Me

Type Scale of Experiences

Senior Product Designer

UX Design Intern

Lead UI UX Designer

Education

University of California San Diego

Let's connect.

Font Posters GenUX

How did we achieve a 100% automation when most AI projects stall at 80% success rate?

AI Goal

Design Goal

My role

Prototype

Hand-off

Creative bar

Generative pipeline flow

Theme + Design concept

Generates background

Spatial analysis

Reject & regenerate

Improvement tools

HTML text overlay

Text treatment split

Nanobanana

Variable fonts

Cute illustrations

Key decisions

Rewriting how Gemini writes each background prompt

Impact on user perception

What I learned

Solana Gaming Network

Three surfaces, one community

Virtual rooms

Avatar identity

Collectible rooms

Quests, rooms and earnings in one view

The landing page

Azuli: Tallow, Reinvented

From the shoot to launch day

It starts with one ingredient

1 drop & 2 palettes

Azuli Blue

Golden Orange

Three typefaces, three jobs

Ninna

Bricolage Grotesque

Jost

Two products, one system

Blu Blu Barrier

Golden Hour Glow-Up

Packaging, down to the dieline

Why this jar

Airless pump

The right dose

Double insulated

A custom icon set

Made for the feed

A Shopify storefront I built from scratch