Dan Nolan

Visual Designer
User Experience Designer

DJN monogram
Project:

FRONTLINE Website

Year:

2019

Roles:
  • user experience
  • visual design
  • CSS
View live site >

Awards Update

The FRONTLINE website has been honored with an award:
  • Webby Award: Websites and Mobile Sites, News & Politics

In 2015 I led the redesign of FRONTLINE’s website as part of a team at GBH Digital. After that I joined FRONTLINE as their in-house designer—working on interactive documentaries, visual stories and website user experience. In the years since the website redesign we've been able to target key areas of the site for improvement and add new features.

We use several methods to gain insight into how our site is being used and to help us determine what features to work on next: analytics data, competitive research, SEO audits, surveys and user testing.


Our film page had some technical and usability problems. Also, an SEO audit turned up a key issue preventing Google from recognizing the page as one with a video.

The previous documentary film page template, launched in 2015.

I designed a new template that made the video smaller and brought more important content up higher on the page. We tested this new design against the old one and the new one proved to be more usable and appealing.

We also uncovered some SEO issues with our article page template. A large image at the top was pushing the headline down and even below the fold on some devices.

The previous article page template, published in 2015.

I redesigned our article template to bring the content up higher on the page, using a layout model that would work for all types of articles. We included a new sidebar to surface more related content and topics.

Our podcasts were expanding from one series into multiple series and our website structure needed to be revisited to accommodate this. We created an expanded and redesigned podcast section.

FRONTLINE is now offering events that align with our documentaries. People can attend virtual conversations and live events featuring our reporters and filmmakers. We needed our website to support this new effort by showcasing these events and by allowing users to register with FRONTLINE and attend the events.

After gathering information from stakeholders I began sketching out the experience and created user flows for registering for an upcoming event and for watching a past event video.

I created a rough wireframe prototype so the team could interact with the experience very early on.

I quickly iterated on this prototype and added higher fidelity styles so it could be tested. We received critical user testing feedback early on in the process.

We continued to iterate on the components and layout as the structure was being built out in code. Once the base designs were approved and user testing feedback was integrated. I built out detailed UI variations for all the components.

After our developer implemented the initial structure and layout, I moved into code to implement the final layer of style and design polish right in the browser. At this stage I also implemented the detailed responsive style work.