A screenshot of the type system specifications from my initial Sketch file.

A screenshot of the type system specifications from my initial Sketch file.

Background

My team at Fresh Tilled Soil was hired to redesign the website of a major Ivy League university in Boston. Well, not in Boston, but nearby. No, not Tufts. The project was brought to us purely as a visual refresh. We would not be able make major modifications to page structure or add/remove pages and flows from the site. We decided to take this as a challenge in how far we could stretch those parameters to improve the site without breaking the rules.

My contributions to the project were coordinating design and dev work, rebuilding and testing the information architecture, designing and coding the type system, and assisting with the visual design of secondary templates in the system.

Challenge 1: Organizing Chaos

While we couldn't add/remove pages or change their heirarchy we decided to see if we could get away with changing how those pages were presented in the primary navigation, to improve the ability of users to find what they were looking for.

Solution

A photograph of the resulting categories and page relationships from one of the card sort exercises I ran.

The resulting categories and page relationships from one of the card sort exercises I ran.

I ran several card sort exercises, some with other designers and the rest with random people that could fit into the categories of students and parents. The card sorts revealed common trends for grouping major pages, and a trend that people were more likely to find the information they were looking for if it was organized in a way that labelled the audience they were part of. We were able to structure the navigation so that the most important non-audience focused pages were grouped logically, with a secondary structure that named the audiences and collected resources specific to their needs. For example; Faculty, Staff, Students, Alumni, Parents, Visitors, and Media.

Here is a PDF of our IA presentation with these recommended changes.

A diagram of our proposed navigation restructure from the presentation we gave to support it.

A diagram of our proposed navigation restructure from the presentation we gave to support it. You can view the full presentation in PDF form.

Result

We were able to improve task completion in usability tests from less than 40% to over 80% (I no longer have access to the exact numbers). Based on these results the client allowed us to move forward with the navigation restructure as part of the design refresh.

Challenge 2: Refining the Typography

Towards the end of the project I was finding myself with less work to do as the effort shifted from strategy and planning to execution. I decided to use this opportunity to make sure the typographic system for the site ended up being very polished. I'm a type nerd at heart, so putting a lot of effort into this was really fun.

I've read The Elements of Typographic Style by Robert Bringhurst several times, cover to cover. So I was delighted when I came across this article partway through the project. I figured the best chance I'd ever get to use this original scale and have it be relevant to the project was right in front of me, so I went for it.

A screenshot of my first version of the type system, using a tool called Typecast to design in the browser.

My first version of the type system, using a tool called Typecast to design in the browser.

Solution

I'm a big believer in testing type in the browser, so after I finished an initial mockup in Sketch I moved all the work into HTML and CSS. You can see the resulting system in this Codepen.

I wrote the code for setting type size and relationships on an earlier project and have used it as my default type styling system for several years. This allows the developer to declare type sizes based on their mathematical relationship to the base system, rather than remembering the exact sizes themselves. Scott O'Hara showed me some improvements I could make so that the Sass mixins were more efficient, and this is what we ended up shipping in the final site.

Result

The redesign was able to be completed with a beautiful, classic typographic system underneath it all. While the typical visitor will never actively notice the system, it helps to refine the entire site and make it easier to read and navigate.

Final Thoughts

The redesign was very well accepted by the client team. While we didn't typically take on projects that were pure visual refreshes, the prestige of the university in question made us decide to give it a try. I was proud of the team for taking every opportunity to stretch the boundaries of the project and show the clien that design is more than just the surface visual layer of a site.