Project Summary

Julie is a women’s consumer healthcare startup on a mission to become the one-stop shop for women’s reproductive and sexual health. Alongside a team of 9 UI interns and directors at Julie, we overhauled the website to align with newly defined company goals, including a resource hub integrating medical expertise, AI assistance, and culturally relevant content for AFAB users.

Background

Julie outlined three goals for the site overhaul:

Promoting shame-free information on pleasure, confidence and care for women, not just medical advice and crisis management.
Keeping medical accuracy and clinical rigor at the forefront of AI systems.
Maintaining user trust in not just Julie’s products, but in Julie as a brand; this helps convert site visitors into customers and regular site users.

The Opportunity

Julie’s site received 190k user sessions and 350k site views over 6 months, with the top traffic producer being organic search. These statistics signal an existing engaged audience, with the chance to expand beyond a healthcare brand but also a trusted partner in women’s reproductive health.

Julie’s existing site serves primarily as a product page for Julie’s two flagship products, emergency contraception and cold sore gel. Julie’s new mission with this new site is simple: “In a couple of years, when a college student has an uncomfortable question about sex, a friend says ‘just ask Julie.’”

As a result, we audited the site and identified key changes to be made to support Julie in their product and brand goal. What follows is a shortlist of these changes.

Original Julie home page focused on the EC pill. — The original Julie home page, designed to be a product page for the EC pill.

Proposed Julie home page with articles, FAQ, and AI. — A proposed homepage, with a row of medical articles below and a new AI chat at the forefront.

Medical Credibility

The new articles page with reviewed medical articles did not visually uphold the sensitivity and scientific nature of the subject material. Julie’s site lacked the medical credibility that would keep users coming to Julie as a first resource for medical advice. Before trying to uplift and handle sensitive health questions, users need to see Julie as a place with healthcare professionals providing essential information.

Upon identifying the clear gap between medical professionals and medical advice, I created a low-fidelity wireframe of medical team pages. These pages feature professional headshots, education background, and work history to create a sense of much needed professionalism.

Low-fidelity wireframe of the new medical team page. — A low fidelity wireframe outlining the medical team member’s credentials, education, and a short about page to establish credibility.

Medical contributors section listing the care team. — A contributors section listing the medical team.

Final medical team page featuring Dr. Tessa, with credentials and bio. — The final individual medical profile page.

FAQ Experience

The original FAQ page presented itself as an extensive, intimidating list of questions ranging from side effects to before and aftercare of the EC pill. This overwhelming and exhaustive list created a sense of fear rather than a sense of genuine curiosity or interest.

The intern team advocated for a restructuring of the FAQ page, namely for two things: modularity and reframed language.

Our mockup above splits the questions into expandable drawers with just the subject clearly labeled above. Without the subjects, it almost seemed the whole list was about the EC’s side effects, but a clear text hierarchy helped with making it readable and clear the FAQs were more than just the pill’s effects.

Original FAQ page presented as a long unbroken list. — The original FAQ section, originally a long, never-ending list of health questions.

Final FAQ with collapsible drawers organized by subject. — The new FAQ section, compartmentalized by category, with extra AI assistance available at the bottom.

Visual System

With visual aesthetics being a focal point of any consumer facing software, a central challenge was balancing cultural relevance with the credibility expected of a consumer healthcare brand.

The first iteration leaned into pinks, purples, and oranges paired with new 3D graphics, which, while warm and energetic, ultimately conflicted with Julie’s existing packaging and brand identity. The high saturation created visual confusion and did not integrate well with the brand’s earlier identity, making a palette shift necessary.

First-iteration site design exploring gradient pinks, purples, and oranges. — First-iteration design, clad with saturated pinks and reds, as well as unrelated covers for medical articles.

The original palette applied across the broader site. — New proposed 3-D graphics to be spread throughout the page.

A key consideration was Julie’s core revenue stream: the sale of their FDA-approved medications. The product pages struggled to coexist with the more expressive, upbeat direction of the resource hub, but returning to Julie’s original blues and whites grounded the design, and upheld both the clinical trust of the product experience and the warmth of the health resources.

A refined homepage, featuring the EC pill and AI chat.

The AI chat retains the soft gradient as its hero moment. — The updated product page.

Article Library

The article grid used a card layout with tags, titles, and small credential tags beside medical authors’ names as a direct response to the credibility challenges identified earlier. The system worked, but the cover images introduced an unexpected tension: the Pinterest-style aesthetic read as culturally relevant, but visually undermined the medical authority of the articles themselves. Without clearly related imagery, the grid felt less like a curated health library and more like a lifestyle blog.

The static quality of the page compounded this; the layout felt closer to a collage board than an interactive, information-rich experience. To restore a sense of life and play, we introduced hover effects on article cards: a soft pink outline and rounded corners that animate on interaction. The effect adds personality without sacrificing credibility, signaling that the site is warm and inviting, but still a place you can trust.

Article library grid with tags, titles, and author credential tags. — The final article grid.

Animated hover state on an article card — pink outline with rounded corners. — Article hover animation.

AI Chat

Before final rollout, we turned our attention to Julie’s newest feature: an AI assistant powered by Ema, a generative model trained exclusively on medically reviewed data and scoped solely to reproductive health questions. Because the assistant handles sensitive health information and is designed to be conversational rather than clinical, it was essential that Ema’s interface align with human-AI interaction principles that felt safe, supportive, and trustworthy.

Placement

Where to put the AI was a genuine debate. As an innovative, newly implemented feature, there was a case for keeping it accessible at all times, citing that persistent visibility would encourage use and signal that this wasn’t a typical healthcare site. But, a chat widget on every page risks feeling gimmicky, and worse, it could pull users away from the articles and FAQ sections that anchor the site’s credibility.

We advocated for anchoring the AI beneath the FAQ on the homepage rather than floating it site-wide. The solution that ultimately landed was a sticky bar, or a small, unobtrusive strip fixed to the bottom of the screen. It keeps the assistant available without demanding attention, persistent without being pushy.

AI chat sticky bar anchored beneath the FAQ on the homepage. — A previous iteration, where the AI supersedes the FAQ.

Alternative AI placement treatment on the homepage. — The new homepage, balancing the AI chat and original resources.

Conversational design & AI interface

A key part of the AI was the experience it provided users, especially those who may be in a more vulnerable place concerning birth control, pregnancy, and other reproductive topics. The process of vetting the AI was crucial to ensure a positive user experience, which relied on everything from the actual interface and features provided to the language used when responding. The AI excelled at inclusivity, using supportive, comforting language that aligned with Julie’s shame-free mission. However, the interface itself slowly became more overwhelming and cluttered as more information was provided by the AI. For example, the AI references existing articles on the site and allows the user to split-screen the article and conversation, which we hoped would help with user engagement and trust. In practice, the interface became unintuitive, and toggling between the different parts of the interface (the article, close button, exiting back to the site) became difficult. We suggested a slider-controlled split-screen view to aid user control while preserving the connection between the user, AI, and medical information.

Mid-iteration AI chat interface with article split-screen. — The sticky bar.

Mid-iteration AI chat showing a cluttered multi-panel layout. — AI chat interface with a cited article that can be read on the right side of the screen.

Final Screens

Final home page.

Project Summary

I am an incoming intern at OneStream Software this summer, where I’ll be working to simplify complex data flows for enterprise software. Details to come soon!