Christine Park

Product Designer

My Work

My Work

About Me

LinkedIn

Resume

Christine Park

Product Designer

My Work

My Work

About Me

LinkedIn

Resume

My Work

My Work

About Me

CONTENT

Intro

Background

Planning

Designing

Handoff

Final Designs

Reflection

Using generative AI to curate a personalized subscriber portal

Using generative AI to curate a personalized subscriber portal

As a growing e-commerce company with a subscription model, we’re focused on turning visitors into loyal subscribers. Our AI chatbot was already boosting conversions by helping users discover wellness products aligned with their interests, sparking a new question—how could we leverage generative AI to deliver an even more personalized, engaging subscriber experience?

As a growing e-commerce company with a subscription model, we’re focused on turning visitors into loyal subscribers. Our AI chatbot was already boosting conversions by helping users discover wellness products aligned with their interests, sparking a new question—how could we leverage generative AI to deliver an even more personalized, engaging subscriber experience?

ROLE
ROLE

UI/UX Designer

UI/UX Designer

TEAM
TEAM

Christine Park

Christine Park

Venezia Hartanto

Venezia Hartanto

Hector Cordano

Hector Cordano

Albert Aung

Albert Aung

SKILLS
SKILLS

UI/UX Design

UI/UX Design

Wireframing

Wireframing

Prototyping

Prototyping

PLATFORM
PLATFORM

Web

Web

Mobile-web

Mobile-web

tl;dr My co-designer and I developed interactive flashcards that gave users wellness tips based on user data to curate a more personalized portal experience.

tl;dr My co-designer and I developed interactive flashcards that gave users wellness tips based on user data to curate a more personalized portal experience.

SOME HELPFUL CONTEXT

Background

Background

THE CHALLENGE

Three main questions shaped the path forward:

01

01

How do we create something valuable?

How do we create something valuable?

02

02

How do we keep users engaged?

How do we keep users engaged?

03

03

How do we make every interaction

feel personal?

How do we make every interaction

feel personal?

THE SOLUTION

The leadership team planted a seed.

What about a feature on the subscriber portal that would turn raw user data (order history, subscriptions, chatbot interactions) into personalized wellness tips?

What about a feature on the subscriber portal that would turn raw user data (order history, subscriptions, chatbot interactions) into personalized wellness tips?

Each card would provide wellness insights while subtly suggesting products aligned with user goals.

Each card would provide wellness insights while subtly suggesting products aligned with user goals.

Order History

Subscriptions

Subscriptions

Chatbot data

Based on your Vitamin C and Magnesium purchases,

we recommend that you …

Chatbot data

PLANNING

Before Putting Pen to Paper

Before Putting Pen to Paper

My co-designer and I saw an opportunity to go further, evolving these tips into flashcards that were

My co-designer and I saw an opportunity to go further, evolving these tips into flashcards that were

dynamic, swipeable, and engaging.

This small but critical change transformed an otherwise static feature into an interactive experience users could explore and enjoy.

This small but critical change transformed an otherwise static feature into an interactive experience users could explore and enjoy.

Tone:

Tone:

Maintain a professional, yet warm and accessible voice that reflects our brand.

Maintain a professional, yet warm and accessible voice that reflects our brand.

Assume the reader has some knowledge of health and wellness; avoid over-

Assume the reader has s

Structure:

Structure:

The content should have the following sections:

The content should have the following sections:

Heading (7-9 words or ~45 characters): Create a concise and impactful heading that conveys the

Heading (7-9 words or ~45 characters):

Content Guidelines:

Generate a personalized wellness tip based on specific user data, such as their subscription history, order history, or information gathered from

Content Guidelines:

Generate a personalized wellness tip based on specific user data, such as their subscription history, order history, or informa

AI AS A STORYTELLER

Content was the heart of this experience.

We worked closely with developers to create an AI prompt that guided the flashcard content to be clear, insightful, and genuinely useful.

We worked closely with developers to create an AI prompt that guided the flashcard content to be clear, insightful, and genuinely useful.

DESIGNING

Designing

DESIGN CHALLENGES

Designing for an outdated portal

Our subscriber portal was rigid and due for a redesign, but we had to work within its current limitations, designing cards that would blend with the existing layout while still feeling fresh and intuitive.

OUR DESIGN PROCESS

In a fast-paced startup, clarity and time are precious.

To address our stakeholders’ preference for visualizing the product in higher-fidelity wireframes, and the need for quick decisions, my co-designer and I adapted our process: rather than starting with low-fidelity, we quickly create high-fidelity mockups to bring the vision to life. When needed, we also sketch ideas on paper to explore concepts before moving digital.

To address our stakeholders’ preference for visualizing the product in higher-fidelity wireframes, and the need for quick decisions, my co-designer and I adapted our process: rather than starting with low-fidelity, we quickly create high-fidelity mockups to bring the vision to life. When needed, we also sketch ideas on paper to explore concepts before moving digital.

HANDOFF + ITERATION

Designing

DEVELOPMENT HANDOFF

Sweating the small stuff

With our small design team, the absence of a robust design system means thorough quality assurance and refinement are essential to our process.

With our small design team, the absence of a robust design system means thorough quality assurance and refinement are essential to our process.

The first prototype from our developers was functional but lacked polish. Spacing was inconsistent, animations felt clunky, and the overall design lacked cohesion. Through careful iteration, we refined, tweaked, and polished every detail until the cards didn’t just function, but they felt cohesive and thoughtfully crafted.

The first prototype from our developers was functional but lacked polish. Spacing was inconsistent, animations felt clunky, and the overall design lacked cohesion. Through careful iteration, we refined, tweaked, and polished every detail until the cards didn’t just function, but they felt cohesive and thoughtfully crafted.

TO POP-UP OR TAKE OVER?

A defining design decision

When designing a feedback survey that would be placed within the cards, I championed a more un-intrusive pop-up to maintain a seamless user experience. The developer and product manager favored a full-screen takeover for its simplicity in development and likeness to familiar products like Youtube.

When designing a feedback survey that would be placed within the cards, I championed a more un-intrusive pop-up to maintain a seamless user experience. The developer and product manager favored a full-screen takeover for its simplicity in development and likeness to familiar products like Youtube.

In the end, the full-screen won out, but it left me reflecting: should I have pushed harder for the user-centric approach? This moment underscored the challenge of advocating for users amid practical constraints.

In the end, the full-screen won out, but it left me reflecting: should I have pushed harder for the user-centric approach? This moment underscored the challenge of advocating for users amid practical constraints.

FINAL DESIGNS

Swipe, flip, discover

The final product is an interactive deck of flashcards that shows personalized health and wellness tips while recommending products that fit in line with subscribers are looking for.

The final product is an interactive deck of flashcards that shows personalized health and wellness tips while recommending products that fit in line with subscribers are looking for.

USER HABIT QUESTIONNAIRE

Your wellness, your way

To enrich user profiles, we added a habit questionnaire during onboarding, covering topics like health goals, diet, and supplement preferences. Existing subscribers were incentivized with a badge to complete it.

To enrich user profiles, we added a habit questionnaire during onboarding, covering topics like health goals, diet, and supplement preferences. Existing subscribers were incentivized with a badge to complete it.

These designs were created by my co-designer.

These designs were created by my co-designer.

FEEDBACK SURVEY

Smart updates that grow with you

Smart updates that grow with you

Smart updates that grow with you

To keep content relevant, we included a feedback survey on the back of each flashcard, creating a feedback loop that helps the AI continuously refine recommendations.

To keep content relevant, we included a feedback survey on the back of each flashcard, creating a feedback loop that helps the AI continuously refine recommendations.

These designs created by me! Questions curated by me and my PM.

These designs created by me! Questions curated by me and my PM.

LESSONS LEARNED

Designing for connection, not just functionality

The experience wasn’t perfect, but it set the stage for a platform that grows alongside its users, delivering wellness in a way that feels personal and engaging. Along the way, I learned the power of standing firm for user needs, the value of adaptability in the face of shifting priorities, and how creativity can transform constraints into opportunities. I can’t wait to apply these lessons in future projects. Thanks for reading!

The experience wasn’t perfect, but it set the stage for a platform that grows alongside its users, delivering wellness in a way that feels personal and engaging. Along the way, I learned the power of standing firm for user needs, the value of adaptability in the face of shifting priorities, and how creativity can transform constraints into opportunities. I can’t wait to apply these lessons in future projects. Thanks for reading!