Website for Jean Flanagan (2016)

A redesigned professional website for a science education specialist, writer, and editor.

This project was originally completed and worked on from 2016-07 to present.

This writing was last updated 2016-10-09.

A couple of years ago Jean and I collaborated on the design and development of her personal website. Recently we decided to revisit the design. Like the previous version the site is responsive, built with Jekyll, and hand-designed. But we had some new goals and approaches. We iterated: we kept what already worked and enhanced other aspects of the design.

A small-screen view of Jean’s old website designed in 2014

Before: The 2014 design.

A small-screen view of Jean’s new website designed in 2016

After: The new design.

Improvements over the 2014 design

Highlighted features

A focused home page

Having collaborated recently on an “available for hire” page for me, Jean and I initially planned to create a similar page for her. After sketching and planning, we realized that this approach would be better suited as a replacement for the home page on her site. We borrowed a few ideas from my hire page, but otherwise started with a clean slate.

We shifted away from featuring articles and photography on the home page, and towards better explaining Jean’s work. This allowed us to do away with a separate “about” page, letting the content on the main page serve that purpose. While the existing articles and photos are still indexed and available to browse, the focus is on presenting Jean’s professional background. The fluid layout allows for future blocks of content, like featured writing or introductory text.

Grid view of home page for Jean Flanagan

Redesigned home page layout for Jean’s site.

Grid view of hire page for Oliver Pattison

My hire page that served as an initial design inspiration.

Color and typography

Our goal was a professional, restrained visual design. This time around, we took a more subtle approach to color and typography. The design needed to be highly legible and organized.

The previous iteration relied heavily on washes of green and did not use contrast effectively enough. The new approach is monochrome with slight blue color accents that call attention to points of interaction. A single hue of blue is the basis for all of the colors and shades for the design (except for hover and focus states). We use higher contrast font weights and colors, with body text set at a smaller scale, but thicker and more legible.

After auditioning a couple dozen typefaces, we decided to seek a flexible, modern, geometric sans-serif typeface with a variety of weights and OpenType features. That led us to select the typeface Soleil, which offers a bit more personality than a typical geometric typeface. Soleil suited equally well to body text and headings. For performance reasons, we limited the design to only two weights, adjusting letter spacing and using small caps in some places.

Progressive disclosure

With dense content on the home page, we needed a pattern to selectively show and hide sections of writing. A common pattern that can be seen everywhere from e-commerce sites to search engine results is a progressive disclosure pattern with an indicator arrow. I had recently been using a similar style for pattern blocks in my pattern library for my own website, and it made a lot of sense in an expandable (that is, progressively disclosed) list of skills on Jean’s home page. These are sections of content with more text than can be comfortably displayed on a single page, but not so much that we wanted inner pages describing each item.

Progressive disclosure pattern – list items with expanded or contracted summaries.

A common pattern for progressive disclosure.

Process notes

I have been incorporating pattern libraries into all of my projects recently. Pattern libraries are highly useful methods to communicate and maintain a design. In my process for designing this site, I used a pattern library as a design tool to develop modular patterns and establish baseline typographic styles before working on layout and structure for the site. Even before I knew the shape of the site, I had a sense of what some of the components would look like. Now that the site is mostly complete, I have a living library where those visual forms, CSS styles, and HTML markup are displayed and documented. Pattern libraries form a point of reference for future design iterations to branch from, and to ensure that the design is doing what it is supposed to be doing.

It was an interesting challenge to start completely fresh on this project. We reused barely any code from the earlier iteration, but improvements in our process helped us to work much more efficiently. At the same time, we improved every aspect of the site, leaving both of us much happier with the implementation and design.