Case Study: Department Website

Architecting a thoughtful, dynamic new website for a Duke University department

Includes: user research, content model, sitemap, wireframes

previous website homepage

Goals

Graduate Liberal Studies is a degree-granting program in Duke University’s Graduate School. While their current site has served its purpose well, it pre-dates responsive design and other modern web approaches, and it was time for an update. GLS hired Duke Web Services to create a new site with these top goals:

  • Better usability for content editors
  • More flexibility across devices and contexts
  • Improved user-friendliness, with a focus on clear navigation and easy access to important information
  • Attention to multiple communities, including prospective students, current students, and alumni
  • More student presence on the site and a stronger sense of brand identity

Process

As Information Architect on the project, I was responsible for developing the site structure and content model. I worked in close coordination with a designer, developer, and the clients to make sure the plans met the project needs, incorporated innovative ideas, and were technically feasible.

Research

I started the project with a review of the current site content, peer / competitor sites, and analytics data. A key analytics finding was that two of the top-level sections of the site had high rates of users moving to a next page within the same section, suggesting that those sections were clear and people were finding what they needed. For two other landing pages, however, there were more people jumping to other sections, which could suggest that they were not finding what they expected when they visited this section.

This project also included a dedicated user research phase at the beginning. I met for in-depth individual interviews with seven current students and recent alumni, which covered two of our three main audiences. Since the interviewees had all been prospective students at some point, we were also able to learn about that audience indirectly by discussing their application experiences. A big takeaway from the interviews was that the site’s audience was somewhat unusual in the amount they were interested in reading. While they still needed quick, clear access to relevant information, most of them had spent a significant amount of time poring over the website while they were deciding whether to make the commitment to go to graduate school. The carefully crafted, in-depth descriptions of courses and professors on the site were especially important, which helped us to prioritize that information as we moved into information architecture.

Information Architecture

Next, I took the information that I had learned from this research and from talking with the client and started developing a content model. I created a list of each type of information that seemed like it might usefully become a structured content type on the new site, along with potential fields, relationships to other content types, and places where it might appear on the site. For instance, a piece of “course” content might need a title, description, term offered, day/time, location, and course number; it might be taught be a faculty member, whose profile would be a separate but linked piece of content; and it might appear in a date-sorted list of courses. In a series of meetings with the clients, we worked through the list and decided which items were priorities (faculty, courses, and student topped the list) and which could be removed (for instance, a running list of alumni, which might have made for interesting browsing but would have been labor-intensive to maintain accurately).

notes on potential content types

At the same time, I also developed a sitemap with notes about the potential content and formatting for each page. Because much of the site is made of structured content and the remaining structure is relatively simple, I was able to work with the clients on specifically covering each page. Going forward, though, they will have the ability to add pages and adjust the menu as needed.

planned sitemap

Wireframes

With the site architecture established, I created wireframes to start establishing the layout and formatting of key site pages. I worked closely with the creative director at this point to start thinking through elements that would be baked into the visual design of the site. However, the wireframes themselves are intentionally visually bland - grayscale, no images, no typography decisions made - to keep the focus on bigger-picture decisions at this point. Over the course of several rounds of meetings and revisions, I started with low-level screens that form the core of the site (such as the courses, faculty, and student pages that were high content priorities), then worked upward to end with the homepage. I also paid extra attention to the behavior of the site navigation at different responsive breakpoints.

courses list page, with expandable sections

faculty details page

homepage

navigation behavior across different breakpoints

Product

I continued to be involved with the project, working through IA challenges as they emerged, as our creative director created the visual design and the developers built out the site. The final product is a thoughtful, dynamic site that represents the breadth of interesting experiences and opportunities that the GLS program offers its students. It provides content that meets the needs of each of the core audiences, highlights the most important points, and is easy to navigate. The content structure (along with the move from a legacy CMS to Drupal) has also helped meet the goal of creating an easier experience for the site’s editors: despite being in the middle of an intensive content entry phase, they have expressed excitement about the work they’re doing on the site, which is probably the best compliment I could receive! The site is currently in staging and will launch when content entry is done.

courses list page

homepage on staging (missing events section)

sample faculty page

▲ Top