Building Staff Directory
Stucturing and Designing Contact Information
December 3, 2017
I recently rebuilt the staff directory on simons-rock.edu. Here are some notes on my approach and how I did it.
Examples
Compare the before and after.
Deliverable
The assignment was to reformat the college directory. Take what is now the legacy directory website and make it look consistent with the design of simons-rock.edu.
Backend
The legacy website is a PHP export from the database. In order to work with the data in simons-rock.edu, we had the database output an XML file. The site pulls in the data and outputs HTML with XSL. Here’s an example.
<!--define variables-->
<xsl:variable name="directory-database" select="doc('https:yourdomain.com/directory/filename.xml')/nodeparent"/>
<xsl:variable name="directory-sort-value" select="lastname"/>
<!--pull in code, and sort-->
<xsl:for-each select="$directory-database/nodechild[nodesort=$directory-sort-value]">
<xsl:call-template name="directory-listings" />
</xsl:for-each>
<!--Structure Output -->
<xsl:template name="directory-listings">
<!--output goes here-->
</xsl:template>
Every night the database outputs an updated XML file and the website republishes any updates.
Design
Before I worked on colors and typography, I started with functionality. The directory enables users to search and browse using three approaches.
- Search By Name
Users can search by name, department, or title by entering a search into the query form. - A-Z List
Users can view an alphabetical list of faculty and staff names and then drill down. - Campus Departments
Users can browse departments and then get more information about the department, including personnel and contact information.
Compared to the original design, I made the three ways to search more explicit for the users. The three choices appear together in equivalent hierarchy that can be toggled on the same page.
I opted for a slider, since the site already makes use of this visual pattern in other places. To implement, I made a variant of the bootstrap patterns already in place.
For each of these search tasks, the goal is to create a layout that provides information that is scannable. It needs to balance containing useful information, minimizing clutter, and minimizing the number of clicks.
For the lists of departments and staff, I repurposed the list style already in place on the website.
For the search, I used list.js. This feature enabled us to get away from PHP, while also providing a search with updates on every key stroke.
For the staff by department, I reused the bootstrap accordion already in place on the website.
Bonus Features
The project met our requirements while giving us some additional benefits. Overall, I think the information is organized better and provides a better experience.
Having the XML file also enabled us to repurpose this data elsewhere on the site. Prior to this project, we were maintaining contact information on department pages manually, and now the data is automatically synced from the XML file.
We have also customized the directory data, adding a layer of overwrites and additions to the XML data. We’ve added links to building locations, departments, and faculty bios so that the directory data is better integrated with other areas of the website. We’ve also overwritten names to include nicknames and preferred names. This is something we can’t do in the database but have business needs to do so.
For the next step, I’d like to take on a similar project and build out structured data for our courses and faculty bios. I can use this project as an example of how to move data into an XML file, modify the data, then display in various ways and in various places to meet various needs.
Learn more about creating effective media, view my Production Remarks.