Improving content hierarchy for the future of dentistry

Release:

December 2022

Deliverables:

Information Architecture, Site maps, Customer Journey, Style Guide, Design Documentation

Overview: The Discover section of the Dentsply Sirona website provides critical information on emerging products and brands, influencing dental professionals' purchase decisions. The array of over 300 different pages lead to inconsistencies that made the Discover section confusing for the global dental audience to navigate and complete their purchases.

I was the design lead working on a comprehensive content hierarchy overhaul by designing standardized page templates for future Discover pages designed to optimize the publishing process, save time, and lead dental professionals to make more informed purchase decisions.

Discover section wireframes
help circle

WHAT'S THE PROBLEM?

The vast array of the Discover section lacked cohesion and consistency. Without proper documentation, the authoring teams struggled to ensure uniformity in page publication. Usability also suffered, as dentists struggled to navigate the subsections seamlessly. The Discover section had evolved into a disorganized collection of one-off pages that no longer effectively served its core knowledge-sharing purpose for the professional dental community.

Poor information architecture of the Discover section caused unthoughtful content layout and disorganization

define icon

PROJECT GOALS

While it didn’t make sense to re-design all 300 existing pages, the goal was to create a strong foundation that embraced a rapidly evolving business and diverse product selection.

⚡️
Make the Discover pages fast and easy to read for dentists, so they can make informed purchase decisions.
📃
Document the Discover page design process to meet publication deadlines and decreasing the time to design new pages.
✏️
Create a shortened Style Guide for internal teams to be reminded of the company’s guidelines on color, type, iconography, etc.

The Process

Define and document the Discover section

How might we make it easy for dental professionals to navigate the large hub with ease?

There was no previous site maps, customer journeys, or structure for the pages previously laid out.

Early on, it was important to understand the current state of the Discover section and to identify any pain points dentists may have while navigating the site. I created a site map of the whole website to understand where the Discover section fits within the website as a whole while my lead product designer mapped out the Discover section

We were able to access how big the Discover section is and gave us a good idea of how many templates were needed.

Site map of the entire Dentsply Sirona website showcasing where the Discover section is locatedSite map of the discover section

Customer Journey

I also wanted to consider the customer journey to understand where the Discover section falls within the whole shopping experience. The information provided in the Discover section plays a key role in the consideration phase, given its focus on presenting information pertaining to various products and brands to aid in making informed purchase decisions.

Customer journey map highlighting the importance of the discover section within the journey

Audit the current website

In what ways have we not been consistent?

I needed to understand the similarities each type of page had with each other and remove any unnecessary information such as repeated content or outdated information.

Notes of the deign audit highlighting what could be improved on the current website

Create a template library

How do we make the Discover pages more cohesive with one another?

With a better idea of the types of wireframes needed, I defined a new content hierarchy structure and set guidelines for future pages by designing 21 different wireframe templates. I laid out existing components in a way that allowed the information to flow down the page and was easy for dentists to digest.

Screenshot of all the brand wireframesScreenshot of all the wireframe templates

Creating a complimentary style guide

I also created a mini style guide for our internal teams to help them know what colors we are using, the tone and voice, main components, and typography being used

Collection of screenshots from the new style guide
prototype icon

Constraints

Existing components needed development updates

Every project is not perfect, and this is where my project hit a minor bump in the road.

👨🏼‍💻
When designing these new and improved templates, we wanted to have some new components developed.
We discovered that some of the existing components needed to be restructured, however development was not available at the time.
✏️
I prepared notes in our document for development when they are ready to take on our project.

The Launch

New templates, new pages

By the end of 2022, we were ready to start using the templates. Both the templates and style guide were sent out to our internal teams including marketing, eCommerce, content, outside agencies, and of course, the UX team itself. It was finally great to see all the hard work come to life.

Utilizing the new templates

We had numerous new page requests at the start of 2023, which aligned perfectly with the launch of the new template system. These templates provide a guide for those who are designing, writing, and managing a product. They have helped project managers focus on the needs of the page, helped writers understand content length, decreased authoring time for AEM authors, and made designer’s create high-fidelity mockups of pages quicker.

Here’s how we put them into action:

ideate icon

The Impact

The documentation of the templates, style guide, and new site map has had a positive impact, internally overall. They have:

📃
Allowed us to condense the 300+ different pages into 21 different page styles
Designed and delivered page requests in half the time
👥
Laid out clear expectations for future page layouts

Sneak peak of what's next

Adding a splash of color to the templates

Next steps for the template project is to create an overall look and feel. We needed to find a way to differentiate the sub-categories within the Discover section. One solution was to assign each category a color and make sure the images of the pages follow the color scheme. Here, I have begun to pull all the different imagery used throughout the Discover section and assign them a color so you know what category you are in.

Discover overview of assigning colors for each Discover category
research icon

Project Learnings

Some things I would do differently next time or in the future

🛠️
Test new pages with users before launching them on the site to see if they understand the page hierarchy.
🦷
Conduct card sorting or heat mapping on the current site to understand what information is most relevant to dentists.
🗣️
Get feedback from the content and authoring team on how we can improve the templates.
This is some text inside of a div block.