The best kind of structure to a complex website, such as a directory website, is the kind you barely notice because it’s so well thought out it feels natural.
You probably don’t notice it when it’s done right because it’s done right. But you certainly notice it when it’s a confusing hot mess.
Bringing Order to Chaos in complex Information Architecture projects
Some of my favorite website projects are the kind when someone hands me a complex directory website or conference website that is the web version of the kitchen junk drawer, and tells me to have at it and do what I think is best.
I usually start off with a large empty wall in my office when planning a directory website or similarly complex project, and start putting the different pieces of the website on sticky notes. Sometimes I connect it with a string.
Yeah, like this guy.
(Okay, maybe not quite that chaotic)
I’ve also used digital tools instead of sticky notes to plan out sites of this scope (usually Miro), figuring out how to best make connections between the pieces of information on the site, so visitors can easily find what they’re looking for. Somehow the sticky note method works better for me many times, at least when I’m starting the planning process.
It’s key to having an easy to use, well thought out website with relationships connecting categories of information, called Taxonomies. When we talk about taxonomies for websites, we usually mean categories, tags, or any other similar custom category or tag we’ve set up using the functions.php file or a tool like Crocoblock JetEngine.
Building a Complex Conference Website with Custom Post Types, Custom Templates, and Dynamic Relationships
So, on this website, I created custom post types for Sessions and People. Then I built a relationship between those two post types, so we can connect a session to the person speaking in the session. Why? So anyone reading about the session can learn more about the person teaching it. And anyone reading about a particular speaker, can see at a glance the sessions that person is teaching.
I added a custom taxonomy for topic track and a custom field for the time slots we have available for the breakout sessions so I can then use that information to automatically populate a Session schedule grid based on tracks and time slots. This means no one has to build the grid from scratch each time, and visitors to the website can see the schedule with all of the tracks and time slots and sessions at a glance. If they want more information on a session, they just have to click on the grid cell, and the session page opens up.
Although this may seem complex at the outset, building a website like this saves time and energy in the long run.
Custom fields in the post types for sessions and people automatically populate templates I built. This means, anyone editing the website just enters information and it goes to the right spot on a template, without touching the design at all. And, even better, it fills in the information on several different pages that are waiting for it, including the individual pages for sessions and conference speakers and the breakout session schedule.
Building a Women-Owned Outdoor Brand Directory Website
Another site I worked on recently was designed by someone else, but implemented by me. This website is for a directory of women owned outdoor brands. We created a custom post type for brands, custom taxonomies for the kind of brand (for example, apparel, workshops, conferences, blogs, gear, etc.).
The custom fields allowed us to ask for information about each brand, such as the website, social media, and what the directory owner loves about the brand.
From there, the custom fields populated a template I created in WordPress using Elementor based on the designs they had in Figma. All of the information went where it was supposed to go automatically on individual brand pages and on different listing archives of brands.
By setting it up this way, the owner of the directory was able to hire a VA without web design experience to enter in all of the data, which then dynamically showed up in the template with some web developing magic.
Thinking through how each of these brands and taxonomies would connect to one another, what form fields would best collect the data we needed, and how to best dynamically call it into the templates was the first phase of this project. Then, the implementation, including ensuring any empty fields disappeared from the template if there was no information to display.
Finding Connections and Creating Ways for Users to Filter Information on Complex Websites
I try to find connections and ways to sort the information best to serve the users and what they are looking for. We’re serving the people coming to the site, right?
For both the conference website and the directory website I reference above, I created a filtering system to help visitors find the information they were looking for using Crocoblock JetSmartFilters, which allowed me to create filters based on custom fields and taxonomies.
On the directory website, a visitor can filter the brands shown based on taxonomies like whether or not the brand is veteran-owned, or sustainability focused. There are about two dozen filtering options we created. Each time a box is checked, the brands shown pare down even more.
For the conference website, visitors can filter the faculty members listed on an archive page based on their positions or topic tracks.
You can see this filtering at work on my portfolio page too, where you can filter out my projects based on the kind of niche they belong to.
So if you have an idea for a complex website like a directory, a conference, or maybe a community event calendar, I’d love to help you bring this project to life with better information architecture, templates, and easy to edit custom post types with custom fields.
