Today, INN announced that we have changed our name to the Institute for Nonprofit News (formerly Investigative News Network). This change reflects the organization’s refined mission and commitment to nonprofit journalism. You can read more about that in the official press release.
When we found out about the name change, it seemed like an ideal opportunity to refresh our visual identity and relaunch inn.org to reflect our updated mission and direction moving forward. The catch? We had a little less than two months to make it happen.
Here's a behind-the-scenes look at how we redesigned both inn.org and our visual identity during the last eight weeks.
Where we started
INN's focus has always been on providing services and support to our members. As such, our own web presence and branding hadn't really been a top priority.
When I joined INN as design director a few months ago, I wanted to take that opportunity to establish a stronger and more consistent visual identity — something that better reflected our commitment to forward-thinking journalism.
Planning and sketching
Our team met at INN headquarters in California to start hashing out goals for the project. We discussed design direction and everything we wanted INN's brand to represent. From these conversations, we put together the initial creative brief for the identity redesign (you can read the full creative brief on Google Docs).
Together, we also finalized the project summary for inn.org — a short guiding document that we write for all of our web projects. The summary identifies goals, features, stakeholders, timeline, and user profiles.
We decided that we wanted a bold and simplified visual identity, with a website to match. The former INN homepage was trying to do too much and made it hard for users to navigate. The INN brand was being applied inconsistently across our various properties and didn't evoke any sort of organizational personality.
With initial discovery and planning done, I jumped right into sketching.
I filled up dozens of pages in my sketchbook, working through potential themes and shapes, killing my darlings left and right.
I started playing with blocks and geometric elements (representing pieces of a whole, like INN's members). Around this time, I also reached out to a Minneapolis-based designer, Anthony Lane, to work with me on developing the logo and to help us put together all of the collateral pieces that go with rebranding (think business cards and swag). Tony's clean, bold style was a natural fit with the design direction I envisioned.
Wireframes and building
While we worked on getting closer to our new logotype and symbol, we also needed to start building out the architecture of the new site. Working with Adam, I put together wireframes and presented a prototype to our project stakeholders (we used InVision to do this presentation remotely, which worked quite well).
(Feel free to browse all the wireframes.)
After incorporating excellent feedback from our CEO, Kevin Davis, we set to work on building the site. Adam used Largo to create the general framework and began developing the custom layouts.
As Adam dove into the code, I created some mockups and style tiles to point us in the right visual direction. Here's a glimpse of the mess I lived in as I worked on brand elements and web styles concurrently (one of many Sketch pages):
Visual identity
Meanwhile, Tony and I had homed in on a direction for our logo and presented it to the team. Starting from the building blocks concept, Tony suggested pursuing a flexible system — a living logo and identity that would reflect our mission.
Starting from a simple, three-block mark, we developed a full nine-mark system.
We got the go-ahead to pursue this direction and started to finalize typography, symbols and the color system. If you're a designer, you know that this part of the process involved a lot of back and forth that would look like nonsensical minutiae to anyone with a bird's eye view.
For the logotype, we were down to the wire choosing between GT Walsheim and FF Mark. Both are highly geometric and modern without being kitschy. We wanted something that would have personality while also standing the test of time. FF Mark won out over Walsheim — it felt like the stronger typeface overall, was less cartoonish, and had great readability at all sizes.
The color system was also close to final at this point, inspired by the bold simplicity of the logo mark. We chose bright, saturated colors that would read well in print materials and on the web.
We encountered some issues with the vertical space of the original logo in horizontal situations (specifically the website's navigation) and adjusted the lockups. The resulting system feels more balanced and will end up being more flexible in the long run.
With the colors and logo locked down, Tony and I started pulling together the guidelines for use (download the full PDF).
Launch and what comes next
Throughout this, Adam, Ryan and I were working on refining the functionality and styles of the new inn.org. Laura took the lead on content strategy and revised almost every piece of copy throughout the site.
The entire INN staff helped us edit, revise copy, test features, and QA the site to get it ready to launch today. It wouldn't have been possible without them.
Did we get to everything on our to-do lists? Not even close. But we're tackling this project like everything we do — iteratively, learning and refining as we go. We're looking forward to seeing how people respond and will use what we learn to adjust strategy over time.
Just for fun, you know I love a good before and after shot:
Many thanks to Tony Lane, the tech team and the entire INN staff for making this possible. I'd love to hear your thoughts or suggestions for our new site and visual identity. In the end, I think our new look exemplifies who we are aiming to be — bold, forward thinking, practical, and, above all, a community.
