End-to-End Minimum Viable Product
Student Project: DesignLab
Role: Product Designer
Project Overview
As someone who has over a decade of experience in dentistry, I understand the needs in this space on a very personal level. I leveraged my knowledge and experience to create a patient advocacy tool that comes from a place of understanding and genuine empathy.
Problem: There often exists a gap between dental practitioners and their patients due to a lack of streamlined communication and personalized support. My goal for this project was to address the question: How can we create a platform that keeps users engaged, increases case acceptance, and maintains and grows the overall patient base?
Design Solution: To create a platform where patients can have optimized dental visits and a greater understanding of their appointments, thus maintaining patient retention and treatment plan acceptance. This, in turn, increases patient loyalty and strengthens the practice's revenue and overall growth.
Conducting user interviews
For some, a dental visit starts with crippling anxiety even before they leave the door, while for others, the impact doesn’t hit until they get the bill.
By structuring the interview around the stages before, during, and after the dental visit, we gained valuable insights into both the strengths and weaknesses of the user experience, as well as key pain points.
Affinity mapping the user research findings
An affinity map helped me organize all of the most important interview points to one location and discover patterns including what is lacking in the dental app space, what is important to users, and what are deal breakers.
Synthesizing findings from the user research
From the empathy map, I was able to group the positive and negative experiences users had at the dentist. I aimed to emphasize the ways in which users can have a pleasant experience during their dental visits, as opposed to an adverse one. My focus was to create designs that contributed to an approachable atmosphere for patients, and to promote a shift from potential anxiety and apprehension to a sense of ease and comfort.
Great experiences at the dentist
Effective and open communication
Transparency
Being able to voice concerns
Consistency with quality of care
Flexibility
Patience
Unpleasant dental visits
Inconsistencies in the office with staff, treating doctor, treatment expectations
Not understanding a procedure
Pushiness
The feeling of being taken advantage of
Lack of personalized care
Creating behavioral archetypes from the research
Creating behavioral archetypes was a crucial step for me in understanding and empathizing with the end users of the product. By delving into the psychology and behaviors of users, I was able to build a more user-centric and intuitive design that resonates with their preferences, motivations, and pain points.
Defining the problem with how might we questions
By understanding these archetypes, I was able to formulate "How might we?" questions that directly address the unique needs and preferences of each archetype.
How might we….
Make users feel that they are making decision about their healthcare with confidence?
Decrease anxiety and fear associated with going to the dentist?
Create a platform that will make the dental visit more approachable and understandable?
Creating an information architecture
Now that the user and target base was understood I was ready to create the structure for this platform. Creating a sitemap was important because it provided organization for all ideas and sections and it also provided architectural hierarchy which helped me focus on which pages to prioritize and which pages would house information that I didn’t necessarily have to design for.
Crafting Lo-Fi Wireframes
After structuring the user flow, I used Figma to create the low-fidelity wireframes. I chose a main “happy path” and mapped out the design of exploring a treatment plan down to the procedure. I also included two shorter flows that detailed accessing prescription information and resources to learn more about a particular topic.
User Logs In
Dashboard: After logging in, the user is taken to the account dashboard which will show activity, treatment plans, resources, etc.
Full Treatment Plan List: The user selects treatment plans to see what is planned for them and get a better idea of the upcoming appointments and details regarding the treatment they need
Specific Treatment Plan: After selecting a particular treatment plan the user is shown the plan breakdown which entails each procedure. At this point the user has the option of exploring each procedure further.
Individual Procedure Details: The final page of the flow shows the procedure selected in detail. There is a summary of the procedure, an animation, followed by useful information, and what to expect.
Fine-tuning the brand
With the design system, I wanted to create a brand identity that was patient forward and trustworthy. I started with creating a mood board that was reflective of all the qualities and feel for what I wanted the final designs to encompass. I used the mood board to help establish the values of the app. Once the voice and tone of the brand were decided, this set the basis for the color scheme, font choices, logo, and components.
Mood Board
Logo
Color Palette
Font System
Curating a component library
Once the parameters of the branding were set, the next step was to create a component library. The component library helped to build the designs in an easier and more efficient way. I started with the basic components of the nav bar which was decided on by an icon set I found on Figma, followed by the relevant CTAs and cards for each section.
Guiding users through the experience
Navigating the dental visit can be daunting and scary. The purpose of this flow is to eliminate any fear and uncertainty by giving the user the option to delve deeper into their treatment plan details as needed. After the user logs in, they have the option to select their treatment plan of choice with the end of the flow being the specific treatment page. It’s really up to the user how much information they would like to explore.
User logs in
Dashboard upon logging in
The user accesses the all treatment history page from the dashboard by clicking treatment completed or scrolling to all treatments.
The user chooses the most recent active treatment plan to see how the treatment is broken down into phases as organized by the provider.
The user can choose a specific treatment in the current treatment plan to learn more information about what procedure entails, what to know before, during and after, and common concerns.
Providing easy-to-access information and education
The second flow details how a user can access the “resources” section from the homepage and look further into a topic out of their own curiosity and education exploration. The example here shows a user looking into the specific procedure of implants, with the end flow detailing the procedure with easy-to-understand information, animation, advantages, disadvantages, and alternative treatment options. These categories were chosen based on user interviews and research.
From the dashboard the user can select the resources button to learn more about a variety of topics.
In this example, the user has selected procedures.
The user would like to learn more about implants, so the user is shown selecting the implant option.
This is the final page of the flow which details the implant procedure and at the bottom it utilizes the same structure seen in previous flows where the user can toggle left or right in a carousel and gain more information.
This shows the user having toggled to the right and new information is revealed highlighting the disadvantages, compared to the previous screen which showed advantages.
Offering in depth prescription information and tracking
The third and final flow shows how users can access their prescription information with a relevant summary, how the prescription was sent to the pharmacy, and a map confirming where the prescription was sent. At the end of the flow, there is an option, just with the treatment details page, to contact the dental provider with any questions or concerns regarding the prescription.
The user selects the prescription from the main dashboard.
The user is taken to this page which shows all their prescription history and if the user wishes to find more information regarding an active prescription they can do so.
The user is then taken to this specific medication page where they get all relevant details regarding this particular prescription.
Scrolling down the user gets information about how the prescription was sent to the pharmacy, what this means, and important things to know about this particular medication.
Continued scrolling reveals the location where the prescription was sent and an interactive map and it is at this point where a pop-up notifies the user if they have any questions they can contact the office.
Conducting usability testing to refine the experience
I tested the app with participants who have visited the dentist at least twice a year for their 6-month check-up, had dental treatment completed at some point in the past 5 years
My goal was to see how users navigate through the Bite App, what aspects are intuitive, what aspects are not as easily understood, and opportunities for improvement.
What I learned from user feedback:
How I addressed the issue:
Added labels and definitions where they were lacking and simplified wordage. For example, the term “referrals” was changed to “specialist” based on user testing.
Some of the terminology and labels were not obvious and a bit too technical.
I changed the formatting and structure to introduce information progressively, starting with essential concepts before delving into more detailed and advanced information. This gradual approach caters to users with varying levels of familiarity.
Implementing progressive disclosure by hierarchically layering information keeps the user from being overwhelmed.
User affordances have been added for clarity. These included adding a color change on hover, structuring consistent navigation patterns, and establishing a clear visual hierarchy with distinct headings, font sizes, and color contrasts.
Some cards were not perceived as clickable which affected important KPIs such as task completion time, time on task, and ease of use.
Positive effects on practice growth and revenue
Building trust helps retain existing patients and attract new ones.
Clear communication, educational resources, and treatment details through the app foster transparency, increasing patient trust and loyalty.
Providing users with more information and control increases treatment acceptance.
The app’s visual treatment plans help patients better understand procedures, addressing concerns and boosting case acceptance.
Providing easy access to information reduces unnecessary emergency and follow-up appointments, optimizing practice collections.
By reviewing recommendations, post-treatment instructions, and signs of complications, patients are empowered to follow care guidelines, leading to better compliance and fewer emergencies or follow-up visits.