Redesigned AlignerCo's companion app as a real patient who experienced its frustrations firsthand, keeping what worked, fixing what didn't, and justifying every departure.
Navigation made simple things hard. Users exhibited "lost tapping" across every test session, pressing things without confidence, waiting to see what happened.
Where this came from
I went through AlignerCo's clear aligner treatment. For months, I used their companion app, AlignerTracker, daily. And for months, I was frustrated by it in ways I couldn't initially articulate, only feel.
The app worked in the narrow technical sense. I could log my wear time. I could see my treatment progress. But it was clunky to navigate, confusing in places that should have been obvious, and oddly unwelcoming for something I was supposed to use every single day of a year-long treatment.
When I started developing my UX practice, I kept coming back to AlignerTracker. Not because it was the worst app I'd used, but because I understood the user so completely. I was the user. That felt like an advantage worth designing from.
Analyzing what was broken
Before sketching a single screen, I spent time with the existing app doing structured analysis, moving through it deliberately, naming what felt wrong and why, separating aesthetic discomfort from genuine usability failure.
Four things were genuinely broken
→ Navigation made simple things hard. The home screen had three icons that didn't clearly map to anything. Every test user exhibited "lost tapping," pressing things without confidence, waiting to see what happened. That's a navigation failure.
→ Critical features were hidden or mislabeled. "Pictures" and "Treatment Pictures" appeared in two different places. Users assumed they were duplicates and avoided one entirely. They weren't duplicates, one was progress photos, one was treatment plan visuals.
→ The logout button had no confirmation. Pressing the power icon instantly logged you out. No warning, no "are you sure?" For an app handling health and treatment data, that's a trust failure.
→ The marketplace was cramped. Products were displayed in a horizontal scroll that forced users to swipe through items one at a time. The screen real estate was there for a proper grid, it just wasn't being used.
Original AlignerTracker app, the navigation issues that motivated this redesign
Confirming what I already felt
I confirmed my observations through informal user testing: three participants aged 18–46, each narrating their experience aloud as they moved through the app. Every friction point I'd identified showed up in at least two of three sessions without prompting.
Interview Findings
→ Confusion. Participants exhibited frequent "lost tapping" behaviors, suggesting uncertainty about app functionalities.
→ Repetitive features. Users observed multiple locations for treatment pictures, expressing confusion, "is this the same thing?"
→ Navigation. Participants remarked that the three icons on the front page appeared awkward and unmapped to clear actions.
→ Colors. Users liked the existing color scheme, a signal to keep it rather than replace it.
User Personas
Reika and Peter, the user personas kept in mind while designing Align
Keep the skeleton, fix the navigation
The constraint I set for myself: keep the skeleton, fix the navigation, earn the trust. I wasn't here to reinvent what AlignerCo was, I was here to make what they'd built actually work for the people using it.
Sketching
Sketching the main screens and navigation restructure
Low-fidelity Wireframes
Digitizing the sketch, laying out key foundational features and revised navigation
Every decision justified by a finding
Every design decision was justified by a specific finding, not aesthetics, not preference. Here's what changed and why.
High-fidelity Wireframes
→ Home screen. The original had three ambiguous icons. The redesign leads with the aligner wear tracker, the thing users open the app to do most frequently, front and center. Clear bottom navigation: Progress, Chat, Shop, Profile.
→ Smile page. Merged "Pictures" and "Treatment Pictures" into a single page with two clear tabs, Progress Photos and Treatment Plan. Same information, organized by what it actually is.
→ Inbox. Teledentistry generates a lot of important communication. I designed a dedicated inbox with two sections: announcements (from AlignerCo) and chat (with support). This separation made it immediately clear what required action and what was informational.
→ Marketplace. Replaced horizontal scroll with a standard product grid. The screen real estate was there, it just wasn't being used.
→ Logout. Added confirmation before acting. One screen to fix a genuine trust failure.
Top: Sign-in, home, chat · Bottom: Smile page, shop, inbox
What testing revealed
User Feedback
→ "The 22% looks weird and may be confusing for some users," aligner wear percentage displayed in a way that looked misaligned on smaller screens.
→ "The prices on the shop page may be illegible to some users," insufficient contrast on price labels.
→ "I like the colors and the organization of the app," confirmation that keeping the color palette was the right call.
Final Design
The final iteration addressed both issues: the 22% tracker component was realigned, and marketplace text color was updated to pass contrast standards. Neither was a structural issue, both mattered because they were the things users noticed, which means they were the things that would undermine trust in daily use.
Final iteration, contrast and alignment fixes applied from user feedback