Toothnotes

Overview

Redesign of an existing Wordpress website; including updated branding, improved design, better accessibility, and a simpler and more enjoyable experience. Scope included a redesigned homepage, header, footer, pricing, resources, about us, and contact us pages for both desktop and mobile.

View WebsiteArrow pointing to the right. Link to more projects

Background

Toothnotes is a software that helps dental teams quickly create thorough and compliant chart notes. They had a basic website on Wordpress that has severed them for years, but with the increase in sales, it was time for a refresh.

Purpose

Design an build a responsive site that would include updated branding from a newly released video.

Existing Site

The site was built on Wordpress. It included a lot of stock images, legibility issues, text heavy, and dated looking generic site that made for a heavy and complicated user experience.

Stock Images

Utah Pain Summit homepage

Legibility Issues

Speaker section of the Utah Pain Summit websiteSpeaker Bios for the Utah Paint Summit Website
Description Section of the Utah Pain Summit WebsiteA new approach to pain section of the Utah Pain Summit Website

Text Heavy

Sponsor section and contact form on the Utah Pain Summit website

Dated

Ticket options for the Utah Pain SummitLodging section for the Utah Pain Summit website

Generic looking

Design Process

I went through and cataloged their current site and pulled out the elements I thought were most relevant. Simplified their text quite a bit to make it more succinct. Did research on other companies in or adjacent to the category. Took a lot of design elements from similar sites in other categories like Notion. Sketched out some options by hand. Made some grayscale mockups in Figma. Created two home pages to give some options. Had the client choose between a 3D minimalistic design with an updated logo I designed, or one based more on their branding and existing image. I liked them both, I thought the 3D one looked more professional and corporate, and the cartoon one looked more fun and lively. Client went with the second option so I designed out the rest of the pages. Got started on building the site. Finished the first page and got some feedback, made some tweaks and changes based off the client feedback. I then jumped into the other four pages. Once those were done I received some requests for minor changes, got those adjusted, and that’s how we got to where we are now.

What I did

The site got a complete refresh.
I removed text that was overlayed over stock images and replaced it with the fun, updated, cartoon branding of their new video. Simplified the color palette and provided consistency with buttons, text, and colors
I simplified and updated banner image
Added the new video
Simplified their primary selling points
Better looking icons
Updated quotes
Simple call to action at the bottom to increase demo requests
Much cleaner and simpler footer
Smooth transitions and enjoyable yet subtle animations for a refined user experience


Improved pricing
Better alignment
Cleaner demonstration of main features


Better organization of articles
Phenomenal looking about us section.
Tried to really show, not tell, with images from Dr. Blake highlighting his achievements


Simple and clean demo section
Updated and interesting branding

Final design in the wild

Takeaways

I’m a huge fan of the updated site. I think it looks so much cleaner and much less generic. I think the branding is super fun and enjoyed incorporating it throughout the site. It was great making it mobile responsive as their previous site did not look great on mobile. It also provided me an opportunity to both design and build the site. I sketched out the initials ides, the mockups were done in Figma and I built the site in Wordpress. It was an awesome opportunity to grow my skills in a platform I didn’t have as much experience in. It took some time to figure out out to make things responsive and look good on a variety of screen sizes. I also got to incorporate ChatGPT for the first time to get some troubleshooting and coding options. Used to do some subtle animations and include custom CSS for the Wordpress site to adjust the base plugins. The client and I are both thrilled with the end result.

View More ProjectsArrow pointing to the right. Link to more projects