Know Your Flow Quiz
Thinx is a women's health company known for its period underwear. Users were widely interested in the product, but research uncovered a key barrier to conversion: they didn’t know which Thinx styles best suited their needs, or how the product would work for their lifestyle. We addressed these uncertainties with a quiz that delivered tailored product guidance and drove a 40%+ lift in conversions.
ROLE
As the Visual Design Lead, I participated in UX research and collaborated with the UX lead to guide the visual system and animations for the quiz.
OUR APPROACH
01
User research & IA
02
Visual system
03
Prototype & test
04
Launch & iterate
MY WORK INVOLVED
User Research
Design System
Animation
Prototyping
Know Your Flow Quiz
Thinx is a women's health company known for its period underwear. Users were widely interested in the product, but research uncovered a key barrier to conversion: they didn’t know which Thinx styles best suited their needs, or how the product would work for their lifestyle. We addressed these uncertainties with a quiz that delivered tailored product guidance and drove a 40%+ lift in conversions.
ROLE
As the Visual Design Lead, I participated in UX research and collaborated with the UX lead to guide the visual system and animations for the quiz.
OUR APPROACH
01
User research & IA
02
Visual system
03
Prototype & test
04
Launch & iterate
MY WORK INVOLVED
User Research
Design System
Animation
Prototyping
Know Your Flow Quiz
Thinx is a women's health company known for its period underwear. Users were widely interested in the product, but research uncovered a key barrier to conversion: they didn’t know which Thinx styles best suited their needs, or how the product would work for their lifestyle. We addressed these uncertainties with a quiz that delivered tailored product guidance and drove a 40%+ lift in conversions.
ROLE
As the Visual Design Lead, I participated in UX research and collaborated with the UX lead to guide the visual system and animations for the quiz.
OUR APPROACH
01
User research & IA
02
Visual system
03
Prototype & test
04
Launch & iterate
MY WORK INVOLVED
User Research
Design System
Animation
Prototyping
01
User research & IA
Understanding our users & prospects
Our UX researcher conducted interviews with high-intent prospects, guiding them through our website and exploring their familiarity with Thinx products. I joined to observe, listen, and surface recurring points of confusion around how Thinx fit into their existing period routines. I then partnered with the UX design lead to translate those insights into high-fidelity wireframes for a quiz designed to connect users’ routines with the right Thinx products.
01
User research & IA
Understanding our users & prospects
Our UX researcher conducted interviews with high-intent prospects, guiding them through our website and exploring their familiarity with Thinx products. I joined to observe, listen, and surface recurring points of confusion around how Thinx fit into their existing period routines. I then partnered with the UX design lead to translate those insights into high-fidelity wireframes for a quiz designed to connect users’ routines with the right Thinx products.
The outcome
With over 70% of our users browsing Thinx on mobile devices, we set out to create an in-app experience. Given development and UX constraints, Know Your Flow was designed to feel immersive while living entirely in the web browser.
The outcome
With over 70% of our users browsing Thinx on mobile devices, we set out to create an in-app experience. Given development and UX constraints, Know Your Flow was designed to feel immersive while living entirely in the web browser.
The outcome
With over 70% of our users browsing Thinx on mobile devices, we set out to create an in-app experience. Given development and UX constraints, Know Your Flow was designed to feel immersive while living entirely in the web browser.
02
Visual system
Designing a foundational system
While the UX designer worked on research-based wireframes, I translated the existing brand into a visual system that supported a new immersive experience while maintaining brand consistency, leading the illustration art direction and collaborating closely on motion concepts.
02
Visual system
Designing a foundational system
Expanded the existing brand into a visual system that supported a new immersive experience while maintaining brand consistency. Led illustration art direction and collaborated closely on motion concepts.
02
Visual system
Designing a foundational system
While the UX designer worked on research-based wireframes, I translated the existing brand into a visual system that supported a new immersive experience while maintaining brand consistency, leading the illustration art direction and collaborating closely on motion concepts.
Delightful interactions
The gamified experience uses progress feedback, motion, and microinteractions to keep users engaged throughout.
Unique UI palette
A gradient palette derived from Thinx’s brand red visualizes flow intensity from "very light" to "super," serving as a personalized cue across the user journey.
Playful illustrations
Surreal illustrations incorporate a red ball in 2-D spaces to describe a person on their period.
Playful illustrations
Surreallist brand illustrations incorporate a red ball in 2-D spaces to describe a person on their period.
UI stickersheet
This cross-platform stickersheet illustrates how the brand scales across UI — with the flow palette carrying through tabs, filters, and product cards, and surrealist illustrations adapting from large desktop selection buttons to compact mobile versions.
UI stickersheet
This cross-platform stickersheet illustrates how the brand scales across UI — with the flow palette carrying through tabs, filters, and product cards, and surrealist illustrations adapting from large desktop selection buttons to compact mobile versions.
The outcome
Because users primarily browsed on mobile but converted on desktop, we designed for mobile clarity first — emphasizing strong contrast, touch-friendly controls, and small-screen interactions.
The outcome
Because users primarily browsed on mobile but converted on desktop, we designed for mobile clarity first — emphasizing strong contrast, touch-friendly controls, and small-screen interactions.
The outcome
Because users primarily browsed on mobile but converted on desktop, we designed for mobile clarity first — emphasizing strong contrast, touch-friendly controls, and small-screen interactions.
03
Prototype & test
Building the quiz for live user tests
We prototyped the flow and reviewed it with users in live focus groups to validate our thinking before moving into engineering. By observing these sessions, I was able to confirm or refine UX and UI decisions and ensure the experience helped users clearly understand how Thinx fit into their everyday lives.
03
Prototype & test
Building the quiz for live user tests
We prototyped the flow and reviewed it with users in live focus groups to validate our thinking before moving into engineering. By observing these sessions, I was able to confirm or refine UX and UI decisions and ensure the experience helped users clearly understand how Thinx fit into their everyday lives.
The outcome
After user testing, we shared notes and refined the designs as needed. For example, because our original dropdowns proved difficult for selecting flow routines, we moved to radio inputs to reduce cognitive load and improve usability.
The outcome
After user testing, we shared notes and refined the designs as needed. For example, because our original dropdowns proved difficult for selecting flow routines, we moved to radio inputs to reduce cognitive load and improve usability.
The outcome
After user testing, we shared notes and refined the designs as needed. For example, because our original dropdowns proved difficult for selecting flow routines, we moved to radio inputs to reduce cognitive load and improve usability.
04
Launch & iterate
Using live data to inform & optimize
After launching the MVP, we tracked friction across the user flow to inform continuous optimization. We implemented an email gate ahead of results to capture user data, and designed a comprehensive landing page with personalized style recommendations, clear usage guidance, and visually engaging answers to common questions — all on a single, easy-to-navigate page
04
Launch & iterate
Using live data to inform & optimize
After launching the MVP, we tracked friction across the user flow to inform continuous optimization. We implemented an email gate ahead of results to capture user data, and designed a comprehensive landing page with personalized style recommendations, clear usage guidance, and visually engaging answers to common questions — all on a single, easy-to-navigate page
Growth Experimentation
Website Redesign
Web Product Dashboard
Growth Experimentation
Website Redesign
Web Product Dashboard
Growth Experimentation
Website Redesign