Align

A refreshed way to rebrand your smile

Project Overview

The Problem

While using AlignerCo's current app "Aligner Tracker", I saw a lots of opportunity for improvement.

The app lacked clear navigation, some key features were hidden or hard to utilize, and there was room to provide more organized structure.

role: ux/ui researcher & designer
tools: figma, miro

The Solution

Using this as an opportunity to practice and grow my skills, I decided to give the AlignerTracker app a redesign that incorporates all the key features and vision of AlignerCo.

Task

Reorganizing and redesigning the key features of the AlignerTracker app and streamlining the user experience.

1. Research

Before I started my redesign I wanted to fully understand and analyze the pain points in the current design of AlignerTracker. Design isn't just about aesthetics, but also about usability.

1.1 Analyzing Current Design

screen caps of AlignerCo's AlignerTracker app

Upon initial analysis of the current design, here's what I wanted to improve & implement in my redesign:
‍
→ Create an inbox to organize important information, the current "notes" are nice, but with teledentistry there's a lot of important communication. I want to create an organized hub for all communication to help the user stay updated and organized throughout the process.
‍
→ Organize the home page more strategically. I love the "welcome" upon opening entering the homepage. However, it feels like the three options on the front page and the options when you click the "help" menu bar are split up and labeled awkwardly. For example, "pictures" and "treatment pictures" seem repetitive and the differentiation is not clear.

→ When I clicked the power icon, I wasn't too sure what it did. It instantly logged me out without confirmation, so I would want to label that clearly.
‍
→ I feel like the marketplace could be set up better with the space provided, there's plenty of space to show all the products instead of forcing the user to scroll horizontally.

1.2 Market Research

I decided to conduct some market research to get a better understanding of the general market, trends, and the target audience. Here's what I found:

According to Grand View Research, teledentistry is projected to reach $4.80B by 2030.

SimilarWeb.com reports the majority of leading teledentistry companies' primary age demographic is 18-34.

Invisalign revealed in 2021 that 10M+ people had used their clear aligner technology, 2.6M of them were teenagers

2. Empathize

Next up, I collected some primary research by conducting some user testing in order to be able to empathize and create user personas to better iterate on our design.

2.1 User Interviews

I conducted an informal user testing session to evaluate the current AlignerTracker app. Three participants within the age range of 18-46 were engaged in the evaluation process.

Each participant was instructed to navigate through the app while providing a detailed narration of their experience. The purpose of this exercise was to capture authentic user experiences and identify any potential pain points.

2.2 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 with comments like, "is this the same thing"

layout

participants remarked that the three icons on the front page appeared awkward

colors

users liked the color scheme of the app

2.3 User Personas

Reika and Peter, the user personas that are kept in mind while designing Align

3. Ideate

Now that our user personas and our target audience is clearly defined, we can start to ideate how this redesign will best fit the needs of our users.

3.1 Sketching

I sketched up some screens for the main screens and features of the redesign

3.2 Low-fidelity Wireframes

digitizalizing the sketch and laying out key foundational features

4. Design

4.1 High-fidelity Wireframes

left to right: sign/login screen, homepage, chat support

The home page has a built in tracker for users to track their aligner usage, along with some easy access tips & tricks. The homepage also has the mailbox which includes an inbox and chatting option. This helps users stay informed about their treatment and shipments, while also being able to easily chat and get assistance.

left to right: smile page, shop, inbox

The smile page includes a smile projection for the user to be able to view all the key phases in their treatment, along with being able to track their process with pictures.

Users can also shop for extras for their smile on the shop page. The right screenshot also shows the inbox page from the homepage.

5. Test + Final Design

Next, I tested the initital design with some users to see what could be improved for the final version of Align's redesign.

5.1 User Feedback

"The 22% looks weird and may be confusing for some users."

"The prices on the shop page may be illegible to some users."

"I like the colors and the organization of the app."

5.2 Final Design

The final iteration on Align focused on taking user input into account; the "22%" has been aligned, and the marketplace text color has been updated to increase readability.

Check it out above !

6. Takeaway

What I Learned

critical analysis

Working with a pre-designed app provided valuable practice in identifying and critiquing features. It also honed my ability to substantiate my critiques, facilitating a user-friendly redesign process.

confidence

Working with an existing model allowed me to blend my creativity with design skills while staying true to the original vision. Deciding on changes and enhancements demanded confidence in my claims, which I supported in the redesign process.

Reflection

Redesigning Align has helped me continue to grow my skills by creating an empathetic and streamlined experience for users. Adding my own touch as a designer while refining an experience that I've also been a part of taught me where there's room for creativity, and where it's best to stick to the basics.

Designing Align has further proved to me design isn't simply aesthetics, it's about bringing an experience that innovates and eases users' lives.

Thank you for reading 💙

Check out my other projects