Knight Foundation

lead UX and UI Designer, team of 2 at Octopus

Knight Foundation wanted to realign their web experience with the needs of employees and a wide range of prospective grantees. I created and designed a modern, open-ended, and modular design solution that enabled them pursue a long-term vision toward thought leadership.

View the live site

One of the problems with the old homepage was a lack of focus and direction. I pushed the new design with a simple hierarchy to have extremely clear calls to action and wording for prospective grantees looking to apply for funding.

Color plays an important part of distinguishing between content types across the site. The color for each focus area was applied based on associations from the meaning behind it, as well as inspiration from Knight Foundation's newspaper-based (think CMYK) history.

Knight Foundation publishes a lot of content and shares it across multiple social media channels every day, meaning users are often deep-linked to specific content. I wanted to ensure that they weren't isolated from the rest of the site, so the redesign connects related content and associated challenges to blog posts and press releases.

A simple example of this relationship is shown above—the Communities focus area has an open challenge associated with it. Given that, a link to apply for funding appears beside related articles and also on each communities article page itself.

Without using overlays, blurs, or other effects, I was challenged to find a solution to place titles over several different types of uncontrolled imagery. A solid white block highlight was bold but highly functional decision. At the end of the project, the white block highlight became a defining characteristic of the redesign.

The mobile version of the site makes good use of swiping gestures. I'm a fan of the mobile navigation pattern used in Google's Material Design, so I decided on swipeable overflow-style links instead of hiding them inside of a hamburger menu.

Moving the faceted search options horizontally provided me an opportunity to keep the existing card component structure in three columns (rather than two), which kept things perfectly consistent with the rest of the site.

While it's a non-standard practice to have search filters across the top, it aides in the overall usability and works much better on mobile.

Check out the live site. The full version of this project is private. If you're interested hearing more about it, send me a message! I'd be happy to walk you through it.

More work