Kaeti Hinck – INN Labs

How We Redesigned INN in 60 Days

Posted on March 10, 2015March 10, 2015 by Kaeti Hinck

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.

Join Us for Book Club at NICAR 2015

Posted on February 23, 2015 by Kaeti Hinck

Join us for a very special NICAR edition of the News Nerd Book Club. We'll be gathering, IRL, on Thursday, March 5, from 11:20 a.m. to 12:20 p.m.

This month, we're reading The Design of Everyday Things by Don Norman. We'll talk about how design principles and the fundamentals of human psychology influence our understanding of the world — and the work we do as data journalists.

Plus? We'll *probably* have pie.

The book club gathering will be part of NICAR Conversations — a facilitated conversation track curated by Erika Owens and David Eads. Learn more about it here.

Design Feedback Tools for Remote Teams

Posted on December 23, 2014 by Kaeti Hinck

Good design doesn't happen in a vaccuum. As a remote team, though, we don't get to sketch around a table together, see each other's whiteboards, or have other daily opportunities for in-person collaboration.

Instead, we mostly share screenshots in group chat and, sadly, a lot of ideas don't even make it that far. It can feel like a high barrier to entry to post something online for the team to review — just by uploading, it becomes *Important* even if it's a simple sketch.

But if we're not able to share work in progress, we miss out on the value and ideas of our teammates and can end up working toward disparate goals. I want to dismantle barriers and make feedback and conversation about design a regular, fun part of our team process. It's essential to share half-baked designs, interface sketches, and unpolished ideas — even more so because we don't inhabit the same physical space.

Everybody agrees our products and apps will be better for it, but like all things with remote work, it takes an intentional commitment. You have to build even casual feedback into your workflow. With that in mind, I've been testing a few design tools meant to help facilitate asynchronous design feedback and communication. Here are my notes and thoughts on the three products we've tried so far.

Red Pen

Overall, Red Pen was the fastest and most intuitive tool. This was also the service that everyone on the team actually tried and used successfully — the other two had much lower participation. This, more than anything else, is an indicator of its value. If nobody uses it, it's useless.

Pros:

It's easy to share and comment on designs without having to create an account (plus the workflow for account creation is smart).
Easy to navigate through designs using keyboard.
Simple and fast commenting. All our team members contributed with ease.
Tells you who has seen a comment (e.g., "read by meredith") and a few other nice interface features like that.
Retains all versions of a design.
Browser and email notifications tell you when there are unread comments.

Cons:

When we tested it there was no way to customize notification settings — some of us got email updates, some of us didn't, and it wasn't clear why. While the notifications were fairly intuitive, it would be nice to be able to adjust preferences.
No "view all comments" option, yet. They say they're working on this feature. Without it, there's no way to get an aggragate view of all feedback for a project.
No way to see all versions of a design at once.
There doesn't seem to be a way to easily download files (not a huge deal for us).
You can only upload png files.

Not seeing all the comments is actually a pretty big deal for me. As the lead designer, I want to be able to take all the feedback, consolidate and translate it into tasks (which live as tickets in GitHub or JIRA). Red Pen would work better for quick feedback on sketches and design ideas, less so for long conversations or contentious feature decisions.

Red Pen is also the most expensive of the tools we tested. I sent them a couple of emails about nonprofit rates and haven't heard back.

InVision

InVision is like the Photoshop of design feedback tools. It can do a lot of different things, and feels a bit bloated as a product (when looking solely for design feedback, at least). But they have put a lot of thought into the design and functionality of their suite of tools, and you can tell that this was created by and for designers.

Pros:

You can draw/sketch on designs and toggle comments on and off.
Notification options can be set at a user level and changed with each comment.
You can build clickable prototypes using wireframe images.
Ablility to upload all the file types (or at least a lot of them) and vector handling. There is also a separate repo for assets.
There is a conference call feature for live design walkthroughs. We tested this recently with wireframes for a new site and it worked well.
The project history page has rich data — I'm not sure how practical any of it is, but it was fun to see.

Cons:

Conversations are harder to access (a few clicks to see full thread).
Inviting people to comment takes a few more steps, and the sign up process is not intuitive.
Navigating between designs within a project, and between different projects, takes quite a bit of menu searching and clicking.

This is not a lightweight product, and while there are a lot of fun features, our team didn't consistently use — or even try — most of them. If we're attempting to cultivate a lower barrier to entry for feedback, this is not the tool I would choose.

InVision does offer nonprofit discounts for the more expensive payment tiers, and has been responsive and helpful when I've reached out.

Conjure

Conjure fell somewhere in between InVision and Red Pen for me. It wasn't as feature heavy as InVision, but wasn't as fast or intuitive as Red Pen. There are a lot of nice elements, but it was the least used by our team during testing.

Pros:

A nice way of highlighting particular areas of a design to comment on (drag to select).
Pro level is currently free during beta.
You are able to approve a project when the feedback period has ended.

Cons:

There's a separate menu you have to click to see the full thread of a comment. You can't see responses to a primary comment on the design itself.
Adding collaborators is more complicated than other tools we tried.
Navigating between projects and designs is clunky.

Overall it comes down to what our team will actually use. InVision has so many great features, but it also feels needlessly complicated for the purposes of fast feedback. We don't need every single customization option when looking for quick opinions on a design direction. Red Pen, on the other hand, had the most intuitive interface and was the product everyone actually used while testing. It is opinionated in its simplicity and that works to its advantage here.

Despite the higher price and some interface limitations, Red Pen will likely be what we use for sharing sketches and mockups. As with so many things, the right tool is the one that people will use.

For clickable prototypes and more formal design presentations and walkthroughs, I will continue to use InVision. To me it feels more like a protoyping and client-services tool than a home for internal feedback. (For a detailed comparison chart of other prototyping tools, check out http://prototypingtools.co.)

	Red Pen	Conjure	InVision
Pricing	$30/month for 10 projects	$25/month for unlimited projects (currently free in beta)	$22/month for unlimited projects (one designer)

Nerd Alert: Issue Four

Posted on December 19, 2014December 19, 2014 by Kaeti Hinck

HOT LINKS

What we're reading this week

Adam: As a distributed team we’re always on the lookout for tips to up our remote working game (Kaeti wrote up some of our tips a couple weeks ago). I’m not an extrovert but I still found this post by Automattic’s Steph Yiu on working remotely for extroverts to have a lot of great advice. As an added bonus, the post Steph links to at the end is another great read.

Ben: Google offers web developers many tools to help figure out what’s making your page slow. Probably the most useful is PageSpeed Insights, which tells you how well your pages perform on desktop and mobile browsers.

Kaeti: Designers and developers joke a lot about terrible client feedback (“make it pop,” anyone?). But if you’re getting vague, frustrating feedback it’s probably your fault. We can do a lot more as web professionals to teach people how to ask good questions and frame criticism in a way that’s productive for everyone involved in a project. This feedback framework is helpful both for clients and the folks building things.

Meredith: Searching for navigation examples led me to this award winner,Trendvi z. To visually explore their tool for news analysis, select a company (mostly pharmaceuticals) and navigate through their data — sorting by articles, topics, sources, relevance and tone of voice. They also published a white paper [pdf] about Big Data and its value (with a tool like theirs).

Ryan: David Clark describes the importance of having a code style guide and how to incorporate automated style guide enforcement into your workflow with SCSS and SCSS-Lint. Clark breaks down each component part of SCSS, explaining his guidelines for each, some being well-established best practices and some being personal preference. He also includes a SCSS-Lint configuration file that will enable you to enforce his rules automatically.

Will: A new year, a new GitHub streak. While the 365 day GitHub challenge might be overkill, there’s some good lessons to be learned from Brandon Amos who hit one straight year of contributions this week.

Bert: We robots are nothing if not practical. (Psst, update your Git clients.)

This week's guest contributor: Abe Handler, software developer and data journalist with The Lens

Last week, I read a summary of the recently-released CIA report on torture in the Washington Post. The content of that report was of course unsettling — but the way the findings were presented really caught my attention. The Washington Post showed readers highlights from the document, and then made it easy to jump to the original quotes in context if readers wanted more details. A friend on Twitter told me that this document was an example of "stretchtext" — coined in 1967 by the same guy who came up with "hypertext." I'm thinking about how to bring more strechtext to my newsroom in the months ahead.

Each week we ask someone from outside our team to contribute a link, tool or idea. Are you our next guest star? We think you might be. Send us a note at nerds@inn.org.

SHOUT OUT

Work we admire by our journalism peers

From the digital team at The Times, Doctop.js allows you access to a Google Doc in the same easy way that Tabletop.js lets you use Google Sheets. Quite useful indeed.

SOME OTHER STUFF

Gather ye rosebuds

LISTEN: Lose a couple hours with this beautiful animated sound kit. (There are some flashing images, so take heed if you're sensitive to such things.)

COOK: The science of pie crusts.

GIF: This is our last newsletter of the year. See you never, 2014.