Locking Down Permissions

One of the biggest problems Otis had was with its users; they were allowed unfettered access to create new pages, and add them to the main menu. This lack of conscientious information architecture led to bloated sites with obtrusive link titles, ridiculously sprawling microsites, and a plethora of pages containing almost no content.

In order to fix this problem, we had to start limiting users ability to create pages and modify the site. The ability to add new pages was removed, access to the menu was prohibited, and creation of new pages would have to be done through the web team, where we could curate new content.

Feature Audit

Otis College’s website had many features that were expensive to maintain, such as ‘radar’, which operated as an aggregation hub for blogs relating to art and design. By the time I arrived at Otis, the blogs had become outdated and the radar system was still occupying a valuable section of the site real estate.

With the creation of a redesign, some of the most difficult choices can be what to keep and what to replace. I wanted to ensure that Otis would continue to be true to itself without being hampered by having to support obsolete features that saw little to no views. Since I was leading a team of two I knew that scoping the product was of the utmost importance.

New Branding

In 2016, Otis College completed its first identity rebrand in over a decade. Part of the initiative called for a new website that would unify the new visual identity. The branding came with three logo lockups, the line logo, the block logo and the preferred stack logo. For web, I knew that the stack logo would present a challenge in terms of hierarchy and layout, so I did some brainstorming to see what the new vision for Otis would be like in 2017.

Ultimately I think I did a good job, but there were some elements of the design that I felt could be improved upon. A refresh of the college website header launched in September 2018 with an improved design.

Usability Testing

One issue I found time and again with Otis was that features would be brainstormed, designed and implemented without regard for what the user would think. How would they react? What direction would they prefer? Shiny new features are all well and good, but they don’t matter at all if users needs aren’t being anticipated.

The first part of research I conducted was a qualitative survey with open-ended questions. What did people think about the existing website? What did they think was done well? What were the areas with the greatest opportunity for improvement?

In addition to the survey, live sessions were conducted with alumni to get their opinions on the redesign and new direction for the college.

Lastly, an extensive redesign of the main menu was tested and vetted by both internal and external audiences for effectiveness. Optimalworkshop’s treejack application helped us shape the information architecture to suit users needs and to remind us that internal language was far less effective than simple language.

With just two people as part of what is essentially Otis College’s ‘product’ team, any kind of overhead that could be taken off the team’s shoulders was worth looking into. One such task that proved to be incredibly time consuming was drupal hosting related concerns. Our host at the time was decent, but not entirely optimized for running an enterprise drupal website.

Given the design and development overhead, and the lack of DevOps knowledge my team had, it made sense for us to move hosts to Pantheon’s managed infrastructure. Our site has seen much better uptime, and the development tools allow us to operate as effectively as a two person team could hope for.

Homepage Design

The Homepage on the old site was updated seldomly; stakeholders felt that this needed to change on the new site, so I made sure to include dynamic content areas so that the site would stay fresh.

Many users complained about the old design’s layout on phones, which didn’t have an intuitive interface. The new design focused on utilizing common design patterns and effective use of smaller screen space to transmit Otis College’s message and promote news, features and events.

Landing Page Design

Perhaps one of the most egregious examples of bad user experience on the old design was the Landing Page Design. Instead of providing content to justify the page’s existence, these landing pages simply existed as a collection of subdirectories and sublinks. Primary landing pages for important departments to Otis had no internal marketing or calls to action, even Admissions and Programs of Study.

The new landing page design provides clearer direction to users, as well as ways for Otis Marketing to effectively steer prospectives toward enrollment. Individual departments were also given the ability to feature video content (shown to be highly engaging with our users) as well as promote different areas of interest. 

Some parts of the landing pages are dynamically driven, such as Headlines, which aggregates news items tagged with for each landing section.

Information Architecture

Sprawling, out of control, needlessly complicated. That’s how I’d describe the information architecture (IA) on Otis.edu before the redesign. Since users were able to create new pages and add them to the menu, the Otis site quickly spiraled out of control. Without a gatekeeper asking “why?” users were free to spin page after page after page into existence. Before I took a hatchet to the sitemap, there were almost 4,000 unique pages on otis.edu.

One boon with the timing of the redesign is that Otis was implementing an intranet portal, which allowed us to offload internal-oriented subsites such as Human Resources, letting the main public site focus on funneling prospective students towards applying.

Once we finished cleaning up the main menu tree, we vetted the new IA using OptimalWorkshop’s TreeJack product. Users were about 15% more successful using the new IA in achieving goals vs our control group, and we saw bounce rate decrease by nearly 11%.

Let's Talk Tech

The old site was designed (mostly) internally before my arrival, and developed through partnership with a creative agency. But frequent changes, budgetary issues and scope changes created an imperiled development process that left many features incomplete, buggy or half-implemented.

Otis College runs on Drupal 7, and the old design used many proprietary pieces of code that were, frankly, unsustainable with a development team consisting of two people. In order to be more strategic with our resources, many features that were demanding to sustain were culled from the new site, and wherever possible, proprietary codebases were dropped in favor of open-source or managed third-party plugins.

We dropped Bootstrap in favor of Foundation as our front-end development framework. This gave us many, many advantages such as a flex-grid based layout, sticky containers, responsive embeds and accordion design patterns.