Saying Goodbye To My Favorite Nerds

It's so hard to say goodbye to yesterday.

Today is my last day at INN. In a couple of weeks, I'll be joining The Washington Post to lead its data/news apps team. It's a bittersweet transition; I'm excited about the new role, and sad to say goodbye to such an amazing and supportive team.

Together, we've tirelessly documented our processes and team values. We redesigned and launched the new inn.org. We helped dozens of clients and nonprofit news organizations build websites. We released updates for Largo. We created a newsletter, hosted a monthly book club, and gathered for weekly office hours.

There has also been a lot of pie, good meals, ridiculous music, and countless gifs. And I got to work with some of my favorite people — the kind of colleagues that make hard work bearable and fun work feel like no work at all.

(Interested in working with these wonderful people? We're hiring a lead designer.)

I can't wait to see how INN grows in the future, and I'll continue to follow along as our members publish some of the best in-depth and investigative journalism out there. See you at NICAR?

hissnoswears

Nerd Alert 54: Holidazzling

HOT LINKS

What we're reading this week

  Adam: I love this list from Quartz of the best Twitter bots of 2015. It includes some old favorites (like @thinkpiecebot) and some sure-to-become favorites (like @MagicRealismBot).

  Ben: If you’re like my family, the walls, stairs, and end tables of your abode are covered in books: a de-facto personal library. It has mass and visual presence. But what does a digital library look like, and how do you accumulate media in it? And how do RSS, Atom, and Twitter likes play into it?

  David: Animated SVGs will return some of the freedom Flash gave designers to create complex animations. This post from Smashing Magazine explores animating with SVG clipPaths.

  Jack: As somebody once said it’s difficult to make predictions, especially about the future. But here are a few predictions for journalism in 2016 that might be plausible. Or at least fun.

  Kaeti: This week BuzzFeed released their new CSS and component librarySolid. Here’s how they made it.

  Ryan: George Hotz is developing an autonomous vehicle system to best those offered by the likes of BMW, Teslam, Ford, and GM. He's doing so on a $50k budget, working out of his garage and aiming for a $1000 kit that can be fitted to nearly any modern vehicle.

  Inndy: Come back later, I'm watching my stories.

SHOUT OUT

Work we admire by our journalism peers

ProPublica had a big week. We recommend taking time to dig into these projects:

Devils, Deals and the DEA
We Blew $17 Billion in Afghanistan. How Would You Have Spent It?
An Unbelievable Story of Rape

SOME OTHER STUFF

Gather ye rosebuds

LISTEN: Courtesy our friends at NPR, 31 hours of this year's best music

WATCH: Federal interest rates as a Rube Goldberg machine

BAKE: 52 #hottips for smarter holiday baking

EAT: This giant cinnamon roll

Nerd Alert 53: Talk less, code more

HOT LINKS

What we're reading this week

  Adam: Given that homepages are less relevant than ever, why not use your homepage as a place for relatively low-risk experimentation? It’s been fascinating to watch the evolution of the homepage at Quartz over the past few years as they’ve tried different approaches. The latest iteration just launched this week and they shared some of the thinking behind it.

  Ben: Styling the number on ordered lists with CSS is, well, a pain. But with a pseudoelement and the counters introduced in CSS 2, you can make the numbers do whatever you want.

  Jack: Data journalism is leading to new forms of storytelling, but acquiring the needed technical skills can be challenging. If only there was a really excellent book on the subject to guide the way.

  Kaeti: Give native CSS variables a chance.

  Ryan: University of Washington's GRAIL (Graphics and Imaging Laboratory) demonstrates their digital puppeteering software, which can construct a controllable model of a person based on a photo collection.

  Inndy: Who wants an omelet?

BE OUR GUEST

This week's guest contributor

Our guest this week is Sarah Glen (@saraheglen), a product associate at Chalkbeat.

I've been thinking a lot lately about how to incorporate design thinking into the daily decisions we make at Chalkbeat. The caveat here is that I'm not technically a designer, so I sometimes question the extent to which I can shape our strategy in this area. Enter Erika Hall's piece We're all imposters (so be a good one!) and this wonderful reminder:

"An interesting person is interested in things. Being interested in things makes you good at things because you will ask questions rather than hide your ignorance to protect your ego."

YES. 

So, consider this a reminder that titles don't matter, and if you're passionate about something you will find a way to do it well. For additional life upgrades, consider reading Erika's book Just Enough Research (which I highly recommend) or diving into her Medium archive.

SHOUT OUT

Work we admire by our journalism peers

Quartz released an epic guide to bad data. Learn from the mistakes of those who have gone before you.

End the elections arms race! If you use data from the AP, check out the collaborative work happening with Elex.

WE MADE A THING

Our projects, manifest

We're working hard on getting the next Largo release ready, including a major revamp of our social sharing tools. Coming soon!

SOME OTHER STUFF

Gather ye rosebuds

LISTEN: You've probably heard the new Serial, but have you listened to the latest episode of Reply All?

WATCH: Hear My Train a Comin'

EAT: Next-level pancakes.

Enjoy your weekend.

Nerd Alert 52: Break it ’til you make it

HOT LINKS

What we're reading this week

  Adam: Browse the web like it’s 1999.

  Ben: Version numbers should be Breaking.Feature.Fix, not Major.Minor.Patch.

  David: Photon is effectively Bootstrap for Electron-based desktop apps: It’s the missing link for rapidly integrating common user interface patterns into your HTML5 app.

  Jack: Climate change is global, so why shouldn’t journalism about climate change be global too? And maybe even build a new model of republishing with several dozen newsrooms around the world.

  Kaeti: Finding better color palettes for data visualization.

  Ryan: Elon Musk recently announced plans to host a Hyperloop competition next year at SpaceX headquarters in which competitors are to arrive with fully-functional, half-scale "fifth mode" transportation prototypes for a demo on SpaceX’s test track. Development of this speed-of-sound mass transportation system is well underway with over 300 teams around the world submitting design plans. (h/t ThomasJThoren)

  Bert: No thanks.


BE OUR GUEST

This week's guest contributor

Our guest this week is Jonathan Stegall (@jonathanstegall), user experience engineer at MinnPost:

I've been writing CSS for more than a decade, and I usually think I know how to float items next to each other. But I spent more time than I'm comfortable admitting wondering why Chrome wouldn't float two fieldsets next to each other at 50 percent width, and then I ran into this. Min-width to the rescue.


WE MADE A THING

Our projects, manifest

We are so happy to announce the release of Largo 0.5.3!

Meanwhile, back at the ranch, Adam and Ryan recapped their experience at SNDMakes in Austin.


GET A JOB

Good jobs with good people

Chalkbeat is hiring a full-stack engineer.

The Google News Lab Fellowship looks pretty interesting.


SOME OTHER STUFF

Gather ye rosebuds

LISTEN: I see the light.

WATCH: And now for a brief intermission...

FOOD: Finally, it's punch season.

Nerd Alert 43: We want to believe

HOT LINKS

What we're reading this week

  Adam: From Modern Farmer, the definitive guide to raising alpacas.

  Ben: Time to dig out that list of web-safe fonts, because people are blocking web fonts.

  David: I love the anecdote about the blue iPod in this.

  Jack: You think those mobile ads that help pay for content don’t cost you a thing? Get a load of this.

  Kaeti: Why is it so hard to get “simple” right?

  Ryan: Internet service providers are terrible, especially in rural areas.

  Bert: Two paths toward our robot future.


 

GET A JOB

Good jobs with good people

Religion News Service is hiring a full-time web developer.

MinnPost is hiring a development director.

INN's tech team is hiring a contract WordPress developer, and applications are open for spring 2015 apprenticeships.


 

SHOUT OUT

Work we admire by our journalism peers

Our country now has a style guide. This week, 18F and the U.S. Digital Service published the U.S. Web Design Standards, and it's a great example of an open source pattern library and visual style guide.


 

SOME OTHER STUFF

Gather ye rosebuds

LISTEN: It's fall, which means it's time for The Cardigans.

COOK: Apple cake, enjoy with a glass of fresh cider.

WATCH: The X-Files official trailer dropped this week. We're cautiously excited.

GIF: Remote work lifestyle.

Remote Control: Introducing a New Series About Remote Work

The landscape of media work environments is changing, and many organizations now allow for flexible schedules and locations, with employees spending more time in Slack than conference rooms. Along with increased freedom and flexibility, distributed work comes with its share of challenges. Being remote, even part time, requires thinking intentionally about how to communicate, structure our days, and set boundaries around work and life.

Here on the Nerds blog, we've talked about how we make remote work work. We've shared our tools and process in our extensive collection of open-source docs. Today, Source and INN are launching Remote Control, an occasional series of interviews with remote workers that explores how journalists and technologists make remote work work: what their set-ups look like, how they organize their time, and what they do in the face of frustrations. We hope to collect honest portrayals of our modern working life and learn from each other in the process.

We’re kicking off the series with the incomparable Mandy Brown, formerly of Typekit, A Book Apart, and Editorially, and now with Vox Product.

Check out the full interview over at Source. Interested in participating? Get in touch.

Nerd Alert Issue 26: Gyroscope Creep

nerdalertfinal

HOT LINKS

What we're reading this week

  Adam: I’ve been at the annual Investigative Reporters and Editors conference this week in Philadelphia and will be here through the weekend if anyone wants to meet up! Just shoot me an email: adam@inn.org.

  Ben: For all you data reporters out there: download a copy of the data behind The Guardian’s tally of police-involved deaths, The Counted.

  Dani: To get an excellent review of the data science fields, check out this article by Kurt Cagle. Cagle goes over the data science software and methodology trends for the past year and this year. Of particular interest is his distinguishing between the know-it-all data science “unicorns” that recruiters look for and reality, clarifying that different individuals with distinct experiences are needed for a successful data team.

  David: How could news developers benefit from the mindset of Glenn Jones, a T-shirt designer in Auckland, New Zealand? What if we shared preliminary design ideas on Twitter and with users? Sought more inspiration from the physical world? Another great Envato Made By installment.

  Kaeti: Email, the scourge of the otherwise decent human who just wants to get some work done. One thing that really helps? Templates and form responses, especially for saying no. I've modified Selena's form responses to my own needs, and in the process have reduced decision (and emotional) fatigue.

  Meredith: “Different sites, different countries, different rights: this is one of the many ways, citizenship, politics, and the internet are deeply and inextricably intertwined.” Traveling the web, you leave a data trail behind. Citizen Ex is publishing stories about digital citizenship and potential implications in six countries. They have also created a browser extension that creates a portrait of your own algorithmic citizenship with careful consideration to privacy. The project was created for the Web We Want conference.

  Ryan: Check out pass — a command line password manager written by Jason Donenfeld. Pass uses gpg encrypted files to store passwords. The files can be organized as you like, stored in a repository, shared across computers, and generally manipulated using standard Unix command line file management utilities.

  Will: As organizations optimize their sites for social media traffic, Josh Elman argues that while this "side door" traffic is important, "the truly valuable and beloved companies have built a real front door  —  one that converts to repeatable, direct visits."

  Bert: Do you know your DARPA robots?

This week's guest contributor: Cathy Deng, developer at DataMade, @cthydng

The most interesting thing I read this week was this piece on the history of dashboards. It's kind of heavy and long, but it grabbed my attention because it has historical/sociological perspectives that are pretty relevant to the whole Smart Cities/IoT movement.

It covers the relationships between dashboards and control, several government dashboard initiatives, and the dangers of framing cities as a bunch of components to optimize. I think folks should read this because it has a bunch of thoughtful and critical blurbs, and is a nice antidote to all the Thought Leadership on Big Data floating around. This piece on predictive policing also had some similar ideas.


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.

WE MADE A THING

Our projects, manifest

We're changing up the way we do our open office hours. Starting today, they'll be happening every week on Friday. We especially want to focus on offering code and design reviews for people who may not have access to that kind of feedback in their organizations.

Interested? Sign up here.

SHOUT OUT

Work we admire by our journalism peers

How well can you hear audio quality? This fascinating quiz from NPR lets you test your ability.

SOME OTHER STUFF

Gather ye rosebuds

LISTEN: Janelle Monáe, all day every day. Start here.

COOK: Mini pretzel dogs sound adorable and probably taste good, too.

GIF: Go forth and weekend.

How We Redesigned INN in 60 Days

inn_logo_blue_finalToday, 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.

Old INN home page

 

INN logo

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.

sketches_tri

I  filled up dozens of pages in my sketchbook, working through potential themes and shapes, killing my darlings left and right.

image_3

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

image

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).

wireframe_home

(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):

sketch_doc

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.

LogoCycle_Single_0309

Starting from a simple, three-block mark, we developed a full nine-mark system.

inn_logo_preso

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.

fonts_compareThe 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.

Screen Shot 2015-03-09 at 7.20.21 PM

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.

alllogos

 

With the colors and logo locked down, Tony and I started pulling together the guidelines for use (download the full PDF).

 

logotype

 

clearspace

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.

Screen Shot 2015-03-09 at 7.29.50 PM

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:

beforeafter

 

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.

INN-Symbol-Reversed-6

Join Us for Book Club at NICAR 2015

designJoin 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

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

RedPenCommentsRedPenAddComment

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

InVisionnewCommentInvisionAllComments

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

ConjureDrawer

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)