Altogether Dental

Altogether Dental is a no-commitment dental discount plan that makes it easy for anyone to save on dental costs. The platform provides users access to significant discounts at more than 300,000 dentists across the continental United States.

▪️ My Role: Product Designer

▪️ I worked with a cross-functional team that included two Backend Developers, two Frontend Developers, a Project Manager, and a Scrum Master. I led the design as the Product Designer. We worked in sprints using Scrum, collaborated through Slack, tracked tasks in Jira, documented everything in Confluence, and shared designs in Figma — all to keep things running smoothly.

Membership area - Mobile preview

Membership area - Desktop preview

How Dismissable Modals Increased Conversions

The Insight: Users were overwhelmed by mandatory modals, which led to high drop-off rates during the booking process.

The Solution: We introduced dismissable modals to give users more control and reduce friction.

The Result: Successful booking rate increased from 50% to 90%.

Dismissable Modals

Booking Flow

The Insight: Users found it confusing to deal with a long, cluttered modal when trying to book an appointment. What made it even trickier was that they had to call the dentist themselves and share their Aetna card info over the phone.

The Solution: We cleaned up the messaging and broke everything down into three easy steps. Steps 1 and 2 had clearer CTA buttons, which helped users know exactly what to do. We also made step 3 dismissible so that if users weren’t ready to book, they could simply close the window without feeling stuck.

The Result: The updated flow significantly reduced user confusion and improved clarity during the booking process. Users were able to move through the steps with more confidence, and many appreciated the ability to exit at the final step without pressure. Early feedback indicated a noticeable drop in support inquiries related to booking and an increase in successful appointment initiations.

Booking Flow

OOH - Out of hour booking

The Insight: Users were unsure about when a dentist was unavailable, which often led to confusion and unnecessary calls, especially during closed hours.

The Solution: We introduced a notification feature that alerts users when a specific dental practice reopens, allowing them to book at the right time. For urgent cases, we also kept the option to call the dentist directly.

The Result: This reduced user frustration, support requests, lowered after-hours call attempts, and gave users more control over their booking experience. It also aligned with their need for flexibility and clarity.

Screenflow

Interactive Demo: I added a short video to showcase the flow in action — it’s often easier to grasp through a real example. The demo highlights how users can activate the notification feature and how the emergency call option remains easily accessible.

Altogether Dental - Design System

As part of improving the design process and ensuring consistency across the product, I built a design system in Figma while closely collaborating with the developers. Our goal was to align on shared styles, grids, components, colors, and alerts — making sure everything we designed and built was consistent and efficient. The system took about two and a half weeks to develop. Since the team had previously relied on Bootstrap, I designed components to stay close to Bootstrap’s structure, allowing for smoother transitions, minimal refactoring, and more manageable changes. This setup not only sped up our design-to-development workflow but also reduced inconsistencies across screens.

Altogether Dental - Design System preview

Altogether (Tailwind CSS with Angular) - UI Kit

For a separate website aimed specifically at dentists, I created a custom UI kit in Figma, while collaborating closely with a developer who implemented it using Tailwind CSS with Angular. This setup allowed us to explore Tailwind’s utility-first approach while keeping development clean and component-driven.

We also designed and supported dark mode, and you can see how I handled that visually in the UI kit preview. The site allowed dentists to check eligibility status by entering a member or dependent ID, making clarity and usability especially important.

To ensure consistency, we applied the UI kit across various modules — including a Core Survey, a small interactive game called "JumpTogether", and promotional banners for the game. Having a complete UI kit from the start helped us work faster and maintain visual consistency throughout the project.

Altogether (Tailwind CSS with Angular) - UI Kit

Eligibility Check - Light & Dark mode

How I handle the hand-off to developers

To ensure a smooth handoff to developers, I organized my Figma files with clear structure, naming conventions, and grouped components. I created detailed screens for both light and dark mode, so developers could easily reference styles, spacing, and behavior across themes. Each screen included annotations and visual cues for interactions, states, and responsive behavior. This helped reduce back-and-forth and made the implementation process faster and more accurate. Below is a preview of how I documented the design for both modes.

Core Survey in Dev mode - main screens

Wireframes - Corner cases and dropdowns

Collaboration in Figma with DEV team

Thank you for the spared time! :)

If you have any kind of feedback, please get in touch with me!