Tag: Design

Design Your Stories with Transparency: The Trust Project at SNDCLT 2017

Posted on by Gabriel Hongsdusit

Last week I had the chance to attend Unite + Rebel, the Society for News Design’s annual conference in Charlotte, North Carolina. It was a wonderful opportunity to engage in conversations about design’s role in journalism and innovations in visual storytelling. Here’s a take-away from one of the workshops I attended.

What is design’s role in building the public’s trust in news? That was the primary question raised by Sally Lehrman of The Trust Project, an organization dedicated to deciphering technology’s role in ensuring trustworthy journalism reaches the public.

Structuring the News Page with Integrity

We know that journalism is distinct from other kinds of information on the web. Signalling that stories are produced with a commitment to transparency and integrity is crucial to building a relationship of trust.

Above is a live prototype from The Trust Project’s design workshop that demonstrates one way newsrooms could potentially integrate transparency within the article page. The prototype shows how you can integrate information like named/un-named sources, corrections, and citations in an easily accessible manner within the story.

One Size Doesn’t Fit All

News consumers are not a monolith. To rebuild trust in the news, one must also engage different types of users. Lehrman identified four categories of news readers:

  1. The Avid reader actively curates personally relevant news and spreads it on social media, believing that being uninformed is dangerous.
  2. The Engaged reader believes that news should be an equal opportunity offender: If no news offends you, it isn’t doing its job. These readers seek out quality local news.
  3. The Opportunistic reader thinks that most news is trying to sell a viewpoint or agenda. This reader consumes news in a much more passive manner – scrolling through Facebook, listening to the TV during lunch breaks – as opposed to the Avid or Engaged.
  4. The Angry and Disappointed reader feels disconnected and disappointed with news media and has the least trust in the news.

What Do Readers Want?

After researching different types of news consumers, Lehrman summarized what readers seek from the media.

  • Transparency: To build a trustworthy relationship with your readership, you need to share some information about your organization itself. Readers need to understand your positioning and agenda – they want to know why you publish the stories you do.
  • Reliable Reporters: Readers need to have confidence in the person telling the story, and they want to know about a reporter’s history, expertise, and biases.
  • Variety of Perspectives: While the general public frequently gravitate toward stories that reinforce their own worldviews, readers recognize that stories with multiple perspectives are more trustworthy. It’s important for readers to know why the story is relevant to them and to understand how their communities are affected.
  • Credible Sources: Readers check for the source of information to verify if a story is authentic. They want to know where the information is coming from and why those sources were chosen.
  • Participation: Readers want to be included in the process and make their opinions heard.

Trust Indicators

With these needs in mind, what can news organizations provide? Lehrman identified eight actionable trust indicators. These were defined through the Trust Project’s collaborative workshops with over seventy news organizations and around one hundred and fifty people.

  • Best Practices: Provide resources like an ethics policy behind your organization and word choice explanations. An example might be explaining why your organization uses the word “migrant” over “immigrant.”
  • Author Expertise/ID: Provide details about the reporter, share background information about their expertise, and acknowledge any biases they have. Let readers know who the author is and show them information about other projects the author has produced. A simple way to do this is having the byline be linked to an author and story archive.
  • Label Story Type: Clearly identify different types of content to distinguish reports from opinion.
  • Citations and References: Give readers access to the sources and facts. Include the reasoning behind why they were chosen.
  • Methodology: Readers want to know how the story was created and what editorial choices were made. Tell the story behind the story.
  • Location/Local: News can have a greater impact on communities if readers know which stories are local to them.
  • Diverse Voices: Prioritize diverse viewpoints, and pay attention of which voices are included or missing from the story. Include viewpoints from multiple political or ideological perspectives, and make a point to include perspectives from women, people of color, and other underrepresented groups.
  • Actionable Feedback: Foster participation after publication by creating a space for dialogue for the reader to contribute to the story. Let readers reach out to the story’s producers and share their opinion. An example could be a Slack channel letting readers chat directly with editors and authors.

The Trust Mark

Providing these indicators on the story page is a challenge – how can we make this information easily accessible to the reader but not be overwhelming? One possible solution is placing a “Trust Mark” on the story page. The mark would signal that the story was produced with quality and transparency. Readers would be able to click on the mark to see the different trust indicators.

Questions, Questions, and More Questions

The end of the workshop was opened to the audience for suggestions, reactions, and ideas. Some of the topics raised included:

How effective is the trust mark? If people already don’t trust the news, will a trust mark do anything to change their opinion? Fake news sites are implementing increasingly sophisticated designs on their homepages, making the distinction between real news and fake news even harder. What’s to prevent them from creating their own badge of legitimacy?

How do we increase news literacy? Building a relationship with your readers requires that people read more and develop skills for discernment. How can we educate the public on these skills?

And the big question...

How do we spread real news? Publishers frequently focus on producing news rather than circulating it. It can be a challenge to encourage real news to spread across the ideological bubbles perpetuated by social media, but The Trust Project is providing actionable solutions to help newsrooms foster deeper audience engagement and highlight the competency, ethics and dependability of their work.

The Ghost of Print Still Haunts Us: Analyzing 7 Different News Homepages

Posted on by Gabriel Hongsdusit

My morning ritual involves visiting my daily rotation of websites, including The Atlantic, Vulture and Buzzfeed. How are these homepages designed to make their stories more easily accessible and appealing?

This is a question that’s been on my mind recently. The INN tech team has been working hard on planning Largo 2 to make it a more powerful WordPress framework. One area that we’re working on is how to make Largo’s default theme more customizable to different newsrooms’ needs.

I’ve started looking at various mainstream news homepages to brainstorm possibilities for Largo’s new default theme. Specifically, I’ve analyzed the homepages for The New York Times, The Washington Post, Vice, Eater, Vox, Vanity Fair, and New York Times Magazine. Here is what I’ve discovered.

Old Print vs Modern Blogs

After creating wireframe mockups of these 7 websites, I found that I was able to separate them into two groups: the traditional websites (Washington Post and New York Times) and the modern ones (Vice, Eater, Vox, Vanity Fair, and NYT Mag).

The Ghost of Print

Unsurprisingly, the Washington Post and New York Times are very similar in layout design.

These sites are the web versions of what you would find in front of your doorstep (in 1996). Compared to modern news sites, there is much more content on these homepages, and most of it is stuffed “above the fold.” A reader can take a glance at the homepage, briefly read all the headlines and then click on stories that interest them.  

The goal is to give the reader a summary of what’s going on that day.

The disadvantage to this layout is that the homepage can feel cluttered and overwhelming, given that there’s so many stories competing for your attention.

Modern and Edgy

On the other hand, the modern news sites functioned like blogs.

 

These layouts are much more focused; there are a lot less stories and content “above the fold.” Rather, certain featured stories are given space to draw attention to themselves.

Unlike the older, traditional layouts, these websites are designed to get readers to click on the latest content. The reader does not get a comprehensive view of the day’s stories that the New York Times  and Washington Post provide.

With this dichotomy in mind, let’s get into the specifics.

Layout Differences

The goal of these traditional news sites is to include as much content as possible above the fold, so they range between 4-column to 6-column layouts.

Whereas the modern sites tend to have only 2 to 3 columns.

Design Choices

The traditional websites are quite conservative in their design choices. Color schemes tend to be grays, blacks, and whites (the Ghost of Print coming up again) and main navigation bars are simple.

Red is used sparingly

The modern websites take a lot more design risks. For example, Eater has their main nav under their featured stories, something that I haven’t seen anywhere else.

Vox places headers over images and frequently uses their signature yellow.

Featured Stories

On traditional homepages, featured stories are highlighted in very subtle ways. On the Washington Post, the header size is what draws your eyes to the feature.

Font-size is 30px, to be exact.

Whereas in modern news sites, featured stories are emphasized through size and white space.

Special shoutout to New York Times Mag, which always has visually dramatic feature stories that make my heart swoon.

Conclusion

Analyzing these different approaches to layout design will continually be helpful to us as we start to brainstorm the architecture of Largo’s new default theme. We want Largo 2 to have powerful design and customization capabilities to make your news website look just as polished as these 7 homepages.

Stay tuned for future blogposts on repeating UI patterns, widgets, and much more!

Illustrating and Animating for the New Largo Project Site

Posted on by Gabriel Hongsdusit

 

Have you noticed something different about the Largo Project site? We redesigned it to make it more engaging and helpful to users.

This was also an opportunity for me to create a set of product illustrations and icons that would liven up the user interface. Here’s my process for creating those product illustrations.

Style Mapping

Illustration conveys information; what did I want to convey about the Largo Project? Given my experience working with the tech team, I wanted my illustrations to feel:

  • Friendly
  • Approachable
  • Hand-crafted

I brainstormed a few different styles and talked with our lead designer Julia.

After sketching and playing around with various ideas, I came up with these approaches.

Style exploration

We agreed that the “Abstract Matisse” style was fun, original and visually interesting. However, I was concerned that it required too much interpretation from the viewer. I also didn't want the illustrations to overshadow the copy surrounding it.

With that in mind, I decided to explore a more literal route.

Simple vector illustrations are the go-to for websites nowadays; just check the front page of Dribble. They convey information effectively and look good, but also tend to be devoid of any personality. I knew that this style would be a straightforward way to get the job done, but I also wanted to challenge myself.

My goal: to find an effective medium that incorporates the fun, loose style of “Abstract Matisse” but doesn't require too much interpretation. Here’s what I came up with:

The style was abstract enough to be visually interesting but literal enough that you wouldn’t need to guess what it represents. And with that style in mind, I created the following illustrations.

 

Animation

Animation can be that extra pop that brings standard illustrations to life. While creating various icons for the Largo site, I found an opportunity to incorporate animation to make the user interface more dynamic. It’s an added effort that reflects how the Largo framework is crafted with care.

I tinkered with CSS to display the animation on hover states, as seen below:

I didn’t want to incorporate animation into every illustration; that would feel too noisy and chaotic. Instead, I decided to add a subtle animation to our Support Page that would function as a nice surprise.

If you hover over the cat, she'll start wagging her tail!

Animated GIFS like these look complex but are actually quite simple.  A GIF is really just a series of still frames being played in a loop.

For this particular GIF, I only had to make 8 different frames to create the full animation. With each frame I made a slight modification to her tail. Here are the different frames.

I put the different frames together in Photoshop, added some background visual elements and ta-dah!

You can check out all of the illustrations, icons, and GIFS in action on the Largo homepage and support page. Thanks for reading!

 

Apartment Buildings & Cowboy Boots

Posted on by Gabriel Hongsdusit

Happy New Year!

Back in fall I created spot illustrations to liven up the “Resources and Guides” section for our re-design of Rivard Report. Here is my process for creating them.

The Purpose

I had to create two graphics that:

  • Represented the stories of Where I Live and Apartment Guide, respectively
  • Were visually cohesive
  • Fell in line with Rivard Report’s color scheme

I started by reading stories from both columns to get an idea of what the illustrations needed to convey.

Where I Live is a column of stories written by San Antonio locals about the places they live in. It is about the symbolic power of home. The column celebrates the quirky side of the city, focusing on the special relationship that people have with their houses and neighborhoods.

The Apartment Guide is a compendium to modern apartment buildings around San Antonio. It informs readers of buildings and complexes that reflect a metropolitan lifestyle, so the illustration needed to have an “urban” feel.

Sketching

I had an idea of what the two sections were about; it was now time to start sketching!

I wanted to illustrate San Antonio’s urban landscape for the Apartment Guide illustration. I played around with drawing the city’s landmarks, but later decided that the idea felt too cliched and obvious.

Instead, I took inspiration from the guide itself.

apartment-guide-inspiration

The various apartment buildings highlighted in the guide all had fabulous architectural elements. I played around with those elements and came up with this starting sketch.

While I was researching the city’s landmarks, I came across San Antonio’s North Star Mall boots; the landmark felt quintessentially Texan and representative of the city. With cowboy boots in mind, I created this starting sketch for Where I Live.

rivard-report-where-i-live-sketch

Illustrator Magic

Now that the sketches were finalized, I recreated the images in Adobe Illustrator. This process required time and patience; the building shapes and spacing between objects had to be mathematically precise. Illustrator’s Pathfinder and Align functions were necessary in creating this.

Creating vector shapes is the boring and tedious part, but the results are oh-so worth it.

apartmentguide_colored-outline-grey-bkgd-01

where-i-live-rivard-report-outline-01

Color Scheme

The basic shapes were all created; now comes the fun part!

rivard-report-colors

Color brings the illustration to life. I based the color palette on Rivard Report’s branding, which features a blue and orange that would contrast well and play off each other. One illustration would be mostly orange; the other mostly blue.

apartmentguide_colored-no-shadows-01

where-i-live-rivard-report-behance-noshadow-01

Additionally, I strategically placed small pops of blue and orange to create visual points of interest. This added to the richness of the illustration.

rivard-report-illustration-color-pop

Texture and Gradients

At this point, the graphics were nearly completed; the only thing that remained was to add textures and shadows to further create depth and complexity.

apartmentguide_colored_final-01

where-i-live-rivard-report-final-01

I relied on this helpful guide to add texture to my illustrations.

All Together Now

Woo hoo! After staring at a computer screen for hours, the illustrations were finally complete. Here are GIFS summarizing the process.

apartmentguide

rivard-report-gif-test

And here are the illustrations in action on the Rivard Report homepage.

rivard-report-screenshot

Buildings, Buildings, and More Buildings

Posted on by Gabriel Hongsdusit

As part of re-designing Mississippi Today, we were commissioned to come up with a new web banner for their site. Inspired by INN’s commitment to documentation and transparency, here is my creative process for creating that web banner.

The Original Web Banner

MSToday-banner-final-L_1170x240-1170x240-1

This was the original banner that they were using, which had areas that could be improved upon. The problems that I saw were:

  • The logo and the photo weren’t integrated. The separation between the two design elements was jarring.
  • The photo itself didn’t feel appropriate. Most of the photo space was taken up by dark tree branches, and the lighting of the State Capitol at night had a spookiness that didn’t make sense.

So I had to find a solution – something that incorporated the logo, looked modern, and felt representative of the stories that Mississippi Today reports. Here is how I went about that process.

Sketching

MSTodaySketch-1

It started with the basics: pencil, paper, and good ol’ Google Images. Here I tried to get a feel for the subject and develop a familiarity with the visual elements. I asked myself:

  • What qualities of the State Capitol building make it look like the State Capitol building? In this case, it would be architectural elements: windows, pillars, engravings, statues.
  • What’s working? This is a question I always go back to. In my experience, attempting to recreate what I envision in my head never works. I find it better to let the process lead me; the little mistakes and blunders along the way tend to lead to better ideas.
MSToday-Sketch-Original
Messy but quirky

I wasn’t sure if the client wanted to go with an illustrated web banner so I did a quick freehand sketch. The proportions and lines weren’t drawn precisely but it has a breezy quality that gives it whimsy.

Banner #1 - A Starting Point

MT-Banner-1

Pros

  • The logo is integrated with the banner and doesn't feel jarring.
  • The banner features the state capitol building (both old and new).

Cons

  • The dome of the building is hidden, so it isn’t specifically recognizable as the Mississippi State Capitol.
  • The illustrations and proportions aren’t precise.

Verdict

The clients liked the illustrations! Woo Hoo! However, they’d like them to look more like the Missippi State Capitol. Which means...

Back to Sketching

MSTodaySketch

Illustration is pain - especially when you’re drawing a building! You really just have to power through it. This time, I spent more time on making lines straight and getting the proportions right.

MSTodaySketch-2

I don’t have formal architectural skills in drawing buildings, so most of the sketches still retained a looser, abstract quality to them.

One of the problems I encountered while designing the first banner and continued to deal with was finding a good white space balance. Given the proportions of the Mississippi State Capitol, I had to:

  • Crop the State Capitol Building while finding a way to keep it recognizable.
  • Find a way to fill up all that white space.

Playing-Around

This time I got an idea - what if I used the various architectural elements as visual motifs? That would be a way to fill up that pesky white space. Back to more sketching.

Motifs-Collage

Banner #2

MT-Banner-2-01

Pros

  • It's overall more colorful, graphic and richly textured than the first banner.
  • The line work is more precise.
  • The colors are fun.

CONS

  • The design elements feel crowded; a lot is going on.
  • Theres's less emphasis on the logo because of all the visual noise.
  • I don’t like how the elements are cropped!

Screen Shot 2016-08-24 at 1.34.17 PM

The interplay of the architectural elements somehow gets lost in the process of cropping.

Verdict

The clients wanted something more in line with the first banner illustration, which puts the logo in the foreground and the illustration in the background. They also like the looser brush style of the original illustration. Back to the (literal) drawing board!

More Sketching

I used a brush pen to outline my first illustration of the State Capitol building, so I knew to go back on that style for my next illustration. By this time, I was much more familiar with drawing the Mississippi State Capitol, which made drawing all those pesky windows and columns (slightly) less painful.

MSToday-Sketch-3

The final result has the "looser" quality of the first illustration but the precise proportions and line work of the second illustration. I added some color and the American and State flags to make sure that it was recognizable as the Mississippi State Capitol.

I was happy with the results. The style was reminiscent of Jean Jullien, a fantastic illustrator who juxtaposes bold brushwork with pops of color.

Now it was time to put this bad boy in a web banner!

Banner #3 - Is this "The One"?

MT-Banner-3

Pros

  • The new illustration is more similar in style to the original illustration, but done with more precision.
  • The illustration doesn’t draw attention away from the logo.
  • There's enough white balance so that it doesn’t feel crowded nor too sparse.

Cons

  • Lines are precise but it overall lacks the free spirit of the original illustration.

The Verdict

The clients actually wanted to go back to the original illustration of Banner #1. Which happens! There’s something about the original illustration that’s charming and quirky, and it gets lost in the other two banners.

It's about enjoying the process as much as the results.

Here are the different explorations of the banner:

mt-optimized

And here is the final illustrated banner in action:

mississippi-today-screenshot

Conclusion

My first illustration commission was a fabulous experience; I pushed myself to explore new styles and learned a lot in the process. I also improved my skills at drawing buildings - I'm totally adding "Professional State Capitol Drawer" to my LinkedIn profile.

How We Turned Nonprofit News Leaders Into Budding Product Managers at #INNProduct

Posted on by Adam Schweigert

Last week we hosted #INNProduct, a workshop in Chicago for about 20 newsroom leaders from INN and LION member organizations.

The goal was to help them become more effective at managing technology at their organizations while also providing an introduction to design thinking and product management.

That's a lot to cover in two days, but fortunately we had a number of great speakers and mentors to help. Here's a rundown of the sessions and some resources speakers have shared for folks who weren't able to join us.

Congratulations, you’re a product manager! 

Rebekah Monson of WhereBy.Us introduced everyone to product management, helping them think not just about telling great stories but also how to distribute those stories, who they want to reach, what impact they want to have and, above all, how to turn that into a business. Congratulations, you’re a product manager! View her presentation.

Planning and budgeting for tech projects 

Amanda Krauss, now an independent consultant but most recently of the Texas Tribune, and Adam Schweigert of INN talked about planning and budgeting for tech projects, sharing lessons we've learned over our years of managing projects and tools and techniques to eliminate the guesswork, including INN's project definition template and our process documentation.

Beyond pageviews: Getting the most out of analytics and impact tracking 

Lauren Fuhrmann of Wisconsin Watch and Ryan Sholin of Chalkbeat presented an overview of the latest best practices around measurement and impact tracking. View their presentation.

10 Ways to Recruit & Manage Talent Without An HR Department

To kick off day two, Andrew Ramsammy of UnitedPublic Strategies shared tips for recruiting and managing talent at small organizations including how to build a world-class team that is as diverse and inclusive as the audiences and communities you serve. View his presentation.

Planning and executing successful data projects

Julia Smith of INN and Fernando Diaz of Reveal/CIR talked about how to plan and budget for data and editorial projects, work effectively with news technologists and create impactful stories that drive change. View their presentation.

User-centered design on a shoestring

To close out the event, Kyle Ellis of the Society for News Design talked about how to bring design thinking into your organization without breaking the bank and then led a workshop to introduce everyone the design thinking process. View his presentation.

Thanks so much to everyone who came and a special thanks to the Ethics and Excellence in Journalism Foundation, Knight-Mozilla OpenNews, the Society for News Design, Columbia College Chicago and LION Publishers for their support of the event!

We hope to repeat this workshop next year and we'd love to have you. Sign up for our newsletter to find out about future events we put on!

October Book Club Selection: Design For Real Life

Posted on by Adam Schweigert

Our October News Nerd Book Club selection is Design For Real Life by Sara Wachter-Boettcher and Eric Meyer.

From the description on the book's website:

Join Sara Wachter-Boettcher and Eric Meyer as they turn examples from more than a dozen sites and services into a set of principles you can apply right now. Whether you’re a designer, developer, content strategist, or anyone who creates user experiences, you’ll gain the practical knowledge to test where your designs might fail (before you ship!), vet new features or interactions against more realistic scenarios, and build a business case for making decisions through a lens of kindness. You can’t know every user, but you can develop inclusive practices that support a wider range of people. This book will show you how.

We'll be meeting via Zoom video call at 1 pm ET on Wednesday, October 12.

Here's the call link or you can join by phone at  (408) 638-0968; Meeting ID: 303 159 956.

Hope to see in a few weeks!

State Capitol Buildings & Google: Apprenticeship Thoughts

Posted on by Gabriel Hongsdusit
One of the many drafts of the Mississippi State Capitol
One of the many drafts of the Mississippi State Capitol

 

It’s been almost two months since I’ve started my design apprenticeship at INN; I’ve had a fabulous time working in a team with people that are hard-working, smart, and generous. It’s been a lot of fun.

Here are some of my takeaways so far.

Take small steps

Learning to code and work in a developer’s environment felt daunting and foreign. I spent most of my work as a designer in print - how was I going to make that transition to web?

Mastery of any skill takes time. It’s less about ingesting as much information as you can and more about picking up bits of knowledge everyday.

Google is a developer’s best friend

Running into problems with Largo and Vagrant has been frustrating and at times, stressful. But pairing up with team members on Screenhero has taught me the importance of knowing how to Google.

Good developers don’t have all the answers, but they know how to find them.

Don’t be afraid to ask for help

Working remotely has its perks. As a lifelong commuter to Los Angeles, I love having the free time that would otherwise be spent sitting in traffic. But I’ve discovered that one of the cons of remote work is the awkwardness of pinging someone for help.

Not being able to physically see if team members were busy made me feel like I was bothering other people when I pinged them for help on things like error messages. But everyone on the team has been spectacularly kind and patient. RC told me something that stuck with me: It’s better to ask for help when you’re stuck than sit on a problem for three hours.

Ask for help – your team will be glad to help you.

The Mississippi State Capitol has 43 windows

So far I’ve revamped INN’s branding assets, started work on our style guide project, designed some swag, and worked on re-designing Mississippi Today. I even had my first illustration commission: illustrating a new web banner for Mississippi Today.

That means a LOT of sketches of the MS  State Capitol building. Stay tuned for a post documenting my illustration process for this project.

Until then!

I-Have-Confidence

Welcome Our Summer Apprentice: Gabriel Hongsdusit!

Posted on by Adam Schweigert

Gabriel HongsdusitWe're excited to welcome Gabriel Hongsdusit to the INN Nerds team as our summer apprentice!

Before joining INN as a summer apprentice, Gabe worked as a graphic designer for Center for the Art of Performance at UCLA. His design sensibilities come from a background in print and he's excited about learning to translate those skills to online platforms.

Gabe recently graduated from UCLA with a bachelor's in Linguistics and Mandarin Chinese. During his time there, he was involved with OutWrite Newsmagazine, America's first collegiate LGBT/Queer periodical, and led as Editor-in-Chief from 2014-2015. Through OutWrite, he fell in love with journalism, editorial illustration, and community engagement.

He starts with us in mid-June and will be working on an upcoming revamp of our style guide, contributing to Largo and helping our members and clients with various upcoming projects.

Welcome to the team, Gabe!

INN Nerds Invent Tools To Promote Community At SND Makes Austin

Posted on by Adam Schweigert

A couple weeks ago a group of designers, developers, community managers, educators and students met up in Austin, TX for the latest edition of SND Makes. The group included two members of our team, Ryan Nagle and Adam Schweigert, among representatives of 22 different news organizations from around the country.

This was the latest of a series of events presented by the Society for News Design and our design challenge for the weekend was: "How might we invent tools that promote community?"

There were ten teams in total and SND has a recap post that you should check out showcasing all of the projects to come out of the weekend. Here are the two projects our respective teams cooked up and a bit of the thought process and work that went into them.

The Gist: Giving Topic Pages A Makeover

gist

Topic pages on news sites tend to be very static and are often just a reverse chronological list of stories about a given topic or category.

Our team wanted to re-imagine the traditional topic page as something more dynamic. We wanted to also use the topic page as an opportunity to create and engage a more active community around any given topic and establish the reporter/editor at our hypothetical news organization as more of an authority on that topic by positioning them as a "host" of that topic page and community discussion.

What we created for our hypothetical news organization (called The Gist) is a re-designed topic page that would replace the traditional "Education" section front or topic page on the site. When visitors to the site click on "Education" and then land on this page, instead of being presented with the usual list of stories, they would instead see the topic for that week (or perhaps month if the news organization had a slower cycle of fewer resources). In our example we picked "Racism on Campus" because there was a lot of conversation around that topic this week and we believe that picking a more specific topic each week will lead to a more engaged community around that topic on The Gist.

At the top of the page we see the topic, a link to view the traditional list of stories in the education category (for readers who still want to get to that easily) and then an introduction to the topic for that week, the host of the page for that week and then everyone who has contributed content or added to the conversation.

Below, we see a list of curated stories, links to conversations on social media, promoted comments, photos, videos, graphics, etc. that have been selected and arranged by the page's host. We specifically call out content that has been added by the community to help them feel like their contributions are valued by The Gist. At the bottom of this river of updates, you might expect to find the usual comment form, but instead we ask readers what we've missed or what they'd like to add and then make it easy for them to contribute. The host for the page can then add this contributed content to the river above.

At the end of each week, we would have captured a collection of some of the best stories, discussions, personalities, sources, etc. on a given topic and then we would send out a weekly newsletter to either help people catch up or to give them some further reading on that topic. We also tossed around the idea of hosting a weekly QA with the host or particularly active contributors, experts on that topic, etc. so that the activity on the page each week would drive to some capstone event which could then also be recorded and offered as a podcast or on YouTube.

At the end of the week we would also announce the topic for next week and again invite the community to send us the best content, conversations and personalities they've found on that topic to help inform our reporting. And we would have an archive page that would allow you to see previous topics if you wanted to go back and reference them.

The team consisted of:

Cultivate: Unearthing Community Leaders

cultivate

Team Zilker created project Cultivate, which sprang from the desire to find and foster community advocates or leaders by analyzing the activity of community members on social media.

We used Twitter for our proof of concept since its API is relatively straightforward to work with and would provide enough data to make a real-world judgement using our algorithm.

The algorithm, as it stands after the event, is pretty naive. It assigns a score to individual users based on their mentions of a particular keyword (something associated with our brand or organization), their total number of followers and how many times their mentions are interacted with by other Twitter users.

The use case: team member Chris Coyier works for Codepen.io and is visiting New York. He wants to find Codepen community leaders in town and offer to take them out for dinner. With cultivate, he enters keyword "Codepen" and location: "New York, NY." He gets back a list of users ranked using the algorithm described above.

The team consisted of: