Deployable Dentistry


OBJECTIVE: Design a system of templates for dental practitioners that is universal, yet can be deployed for different dentists in a customizable way.

Platforms: Figma, Octopus, PicsArt, and Thrive Architect for Wordpress

Skills: UX Research, UI Design, Prototyping, and Iconography

Overview


In collaboration with Driven Dental Marketing, LLC, I worked in a team alongside UX/UI designers and project managers, to create a system of templates that could be deployed for multiple clients.

Driven Dental Marketing is a web development and marketing agency that specializes in providing high end websites for dentists and orthodontists across the country. In order to deliver a high quality product at a fraction of the time, we needed to create templates that could encompass the varying needs of clients while maintaining consistency and elegance. They needed to include a system for colors, fonts, images, and content to easily be replaced to fit with the brand of the dental client.

This system was created using Figma, and would later be developed into full websites using the Wordpress program, Thrive Architect. Therefore, we needed to keep in mind the full capabilities and limitations of the program to ensure we don’t run into problems when the design was finalized and developed into a website.

timeframe

From idea to final template design, this project spanned a course of six months. This included research, design, and development.

My Role

Lead in content research to outline the sections needed for design. Collaborated for all UI design elements, ensuring all necessary sections were created.

goal

Design a system of templates for dental practitioners that is universal, yet can be deployed for different dentists in a customizable way.

Deliverables

Using Figma, provide a template for each page that could be needed on a dental professional's website. These would be developed using Thrive Architect for Wordpress.

Discovery


As lead in content research, I started by researching already effective websites of dentists and orthodontists to establish what the best practices would be when putting together our own template. In order to make sure we designed enough sections that we could add to the template, I paid special attention to what each page of a website was composed of. From that, I developed a sitemap, complete with a list of sections that each type of page would need to be a well-rounded page that would attract users and convert them into clients.

Sitemap


RESEARCH HIGHLIGHT: 70% of users say that they judge the qualifications and abilities of medical professionals based on the usability of their websites.

user research


In addition to looking at competitors to develop a system of best practices, I also wanted to learn more about what's needed from the user's perspective. So I interviewed 20 potential users using quantitative and qualitative research methods.

Do you enjoy going to the dentist?

Yes - 5

No - 15

Do you judge the abilities of medical services from the usability of the website?

Yes - 14

No - 6

When scrolling through the service page of a medical professional, which section are you most likely to look for?

How do you make a decision about going to a medical professional over another?

Highlight Response

  • Obviously price would be a motivating factor, but when it comes to a medical professional, I want to make sure they know what they're doing. So I would be scouring their reviews and reading their credentials and experience to make sure that I can trust them. ~ User

What information would you need to see on a dental service page to make a decision? 

Highlight Response

  • Pretty much all of the sections you talked about are good in my mind. The basic information part probably wouldn't be as important to me as the process and doctor sections though because I would probably have already researched what service I need before even trying to find a dentist to do it. ~ User

Research Influence


The initial user research helped to establish the mindset of potential website visitors. With my findings, we adjusted the plans accordingly by adding these focus points to our design process.

the story

Because many users expressed apprehension when going to the dentist, we needed to organize the flow of the templates to create a story that will help establish comfort.

pricing section

Due to the large percentage of users who expressed that pricing was an important factor, we wanted to make sure to design a special offer and pricing section.

doctor credentials

In addition to telling the doctor's story, thanks to the potential user input, I added "Affiliations" and "Why Choose Doctor" to the Dr. Bio page template.

reviews

Rather than just showing before/after photos of patient results, I decided it was best to also incorporate reviews into those sections so potential visitors can also use those as a deciding factor.

design guidelines


To aid in the UI design, we decided on a system of design guidelines to help us in putting together the templates, similar to how a brand guide would behave.

Section Design


As we approached the scale of this project, to simplify the process, we decided to design the template using sections.

For consistency purposes, we knew we would be re-using the same layout of different sections, mixing and matching them on each new page. So we outlined the types of sections we'd need:

  • Header
  • Hero
  • Information
  • Process
  • Services
  • Doctor Bio
  • Meet the Team
  • Pricing
  • Reviews
  • FAQ's
  • Call to Action
  • Footer

When designing most of the above sections, we created both a light and a dark version of each element. Depending on where we decide to put each section on a client's page, it could either be light or dark, hence the need to create both visuals.

Prototype


Following the original sitemap I had created, along with the changes that research influenced, we put together the sections we had designed into a collection of pages (Home, About, Doctor Bio, Service Category, Service, and Contact Us).

I added a video example of how the pages can intertwine by including an interactive prototype of a Service Category page, leading to the Dr. Bio page, leading to the Contact Us page.

Click to play

Homepage

Service Category

Service

About Us

Dr. Bio

Contact Us

iconography


Because icons had a prominent part in the services section of the templates, we also needed to create an icon strategy.

We started with organizing a library of existing icons sourced from icon companies like Flaticon, collecting three different styles: thin line, thick line, and solid.

After utilizing the templates for a few different clients however, we realized that the thin line style prevailed as the most popular. With that, we sought after more icons with a similar style, but ran into constant hurdles trying to find icons that fit some of the more niche services of dental clients. 

With the go-ahead from my project manager, I created a pack of custom icons.

These icons were based around an icon entitled “Healthy Tooth” by designer Prettycons that was originally found on Flaticon. I took the basic shape of the tooth and added various elements to create each icon in the new pack.

general dentistry

holistic dentistry

biological dentistry

dental implants

sedation dentistry

emergency dentistry

periodontic dentistry

laser dentistry

cosmetic implants

gum surgery

design flexibility


  • Colors: Can incorporate branding with text, background sections, buttons, and icons.
  • Typography: Can have custom fonts to match client logo.
  • Content: The beauty of designing the template in sections means we can duplicate or remove sections based on the content needed for each client.
  • Icons: By having a library of different icon styles, we can match the style to the logo and brand.
  • Images: Choice between our library of stock photos and their own custom photography.

Final Thoughts


From idea to final template design, this project spanned a course of six months and included four complete revisions. However, like any good UX/UI design, it has proven to constantly evolve. 

Since its design, these templates were developed using Thrive Architect for Wordpress, with sections of the template being utilized in over 30 different client websites.  This has been good practice to see the effectiveness of the design. We've found that establishing the brand's design guidelines, modeling the template's guidelines, helps us insert their branding quickly and easily. 

We've used the iconography pack I created for a few of the clients, and stuck with packs from Flaticon for the others.

This was a great experience for me as a UX/UI designer as it involved working in a team environment and creating designs that matched the visions and designs of other UX/UI designers and project managers in the team. To stay on track, the project managers established deadlines and weekly check-in meetings to review the assigned project work and make decisions together about what does and doesn't work.

Get In Touch


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.