Deployable Dentistry

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.

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.

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.

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:

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.

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.

design flexibility

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.

View More of My Work