Landing page makeover

Landing page makeover

The Problem

The Social Science Research Council has several top-level, high traffic entry points for different kinds of content. I have participated in long-term strategy planning about the need to move to dynamic, interactive pages to better feature our best content. Behind the scenes, this means a substantial overhaul to our database and content management system.

In the meantime, I made a proposal for an interim redesign of these pages. I thought, we can get better organization and a refreshed look using our limited resources to put us on the path towards world-class splash pages.

I conceived of this project, developed a written summary, wireframes, static mockups, and ultimately coded the new pages' HTML and CSS.

programsold4.png

What did I just land on?

The program landing pages are indended to give an overview of the program's priorities and activities, and to direct users to content they might be interested in. As is often the case, the desire to communicate every detail has lead to an overwhelming block of text.

programsold.png

If I squint, I can read the words on that jpeg...

A program's related publication illustrations are among the most visually-compelling content we had available. Unfortunately, the design ensured they were always too small to make any sense of.

The page layout varied by content. And I don't mean it was flexible.

The technical limitations of the old site meant that responsively reflowing the page layout based on content needs was out of the question. This meant that we had to constrain our content in order to fit the space we had! Ever tried to find shorter synonyms to prevent line breaks? Even then, we often had jagged, accidental-looking page layouts 

programsnew.png

Redesign

Keeping within the constraints of our non-profit's resources, abilities, and aging web platform, we were nonetheless able to make some small but impactful improvements.

Simple CSS text-overlay styling gave us more room to show off our images while creating more compelling affordances to encourage click-through.

Some light content strategy confirmed that we would be OK removing some of the content from the landing pages, because it was easily accessible elsewhere.

Clearer section headings and alignment are more easily scanned.

Tools

  • Photoshop
  • CSS

Deliverables

  • Project Outline
  • Wireframes
  • Visual Design
  • Dev Specs

 

Content Strategy & Development

Content Strategy & Development

HTML Newsletters

HTML Newsletters