larlet-fr-david-cache/cache/c32d40fe5e2b4194a88e7476a0f3a5a1/index.md

title: Project Hubs: A Home Base for Design Projects
url: http://24ways.org/2013/project-hubs/
hash_url: c32d40fe5e2b4194a88e7476a0f3a5a1

<p class="lede"><span class="caps">SCENE</span>: A design review meeting. Laptop screens. Coffee cups.</p>

<p><strong>Project manager</strong>: Hey, did you get my email with the assets we’ll be discussing? </p>

<p><strong>Client</strong>: I got an email from you, but it looks like there’s no attachment.</p>

<p><strong>PM</strong>: Whoops! OK. I’m resending the files with the attachments. Check again?</p>

<p><strong>Client</strong>: OK, I see them. It’s <i>homepage_v3_brian-edits_FINAL_for-review.pdf</i>, right? </p>

<p><strong>PM</strong>: Yeah, that’s the one.</p>

<p><strong>Client</strong>: OK, hang on, Bill’s going to print them out. (3-minute pause. Small talk ensues.)</p>

<p><strong>Client</strong>: Alright, Bill’s back. We’re good to start. </p>

<p><strong>Brian</strong>: Oh, actually those homepage edits we talked about last time are in the <i>homepage_v4_brian_FINAL_v2.pdf</i> document that I posted to Basecamp earlier today.</p>

<p><strong>Client</strong>: Oh, OK. What message thread was that in? </p>

<p><strong>Brian</strong>: Uh, I’m pretty sure it’s in “Homepage Edits and Holiday Schedule.”</p>

<p><strong>Client</strong>: Alright, I see them. Bill’s going back to the printer. Hang on a sec…</p>

<hr/>

<p>This is only a slightly exaggerated version of my experience in design review meetings. </p>

<p>The design project dance is a sloppy one. It involves a slew of email attachments, <span class="caps">PDF</span>s, <span class="caps">PSD</span>s, revisions, GitHub repos, staging environments, and more. And while tools like <a href="https://basecamp.com/">Basecamp</a> can help manage all these moving parts, it can still be incredibly challenging to extract only the important bits, juggle deliverables, and see how your project is progressing.</p>

<p>Enter project hubs. </p>

<h2>Project hubs</h2>

<p>A project hub consolidates all the key design and development materials onto a single webpage presented in reverse chronological order. The timeline lives online (either <a href="http://bradfrostweb.com/blog/post/designing-in-the-open/">publicly available</a> or password protected), so that everyone involved in the team has easy access to it.</p>

 <figure><img src="http://media.24ways.org/2013/frost/food-bank-timeline.png" alt="Project Hub image"/><figcaption>A project hub.</figcaption></figure>

<p>I was introduced to project hubs after seeing Dan Mall’s <a href="http://rif.superfriend.ly/">open redesign of Reading Is Fundamental</a>. Thankfully, I had a chance to work with Dan on <a href="http://bradfrostweb.com/blog/post/entertainment-weekly/">two</a> <a href="http://bradfrostweb.com/blog/post/techcrunch/">projects</a> where I got to see firsthand how beneficial a project hub can be. Here’s what makes a project hub great:</p>

<ul>
	<li>Serves as a centralized home base for the project</li>
	<li>Trains clients and teams to decide in the browser</li>
	<li>Easily and visually view project’s progress</li>
	<li>Provides an archive for project artifacts</li>
</ul>

<h2>A home base</h2>

<p>Your clients and colleagues can expect to get the latest and greatest updates to your project when visiting the project hub, the same way you’d expect to get the latest information on a requested topic when you visit a Wikipedia page. That’s the beauty of <a href="http://www.w3.org/Provider/Style/URI.html"><span class="caps">URI</span>s that don’t change</a>. </p>

<p>Creating a project hub reduces a ton of email volley nonsense, and eliminates the need to produce files and directories with staggeringly ridiculous names like <i>design/12.13.13/team/brian/for_review/_FINAL/styletile_121313_brian-edits-final_v2_FINAL.pdf</i>. The team can simply visit the project hub’s <span class="caps">URL</span> and click the link to whatever artifact they need. Need to make an update? Simply update the link on the project hub. No more email tango and silly file names. </p>

<h2>Deciding in the browser</h2>

<blockquote>
	<p>Let’s change the phrase “designing in the browser” to “deciding in the browser.”<br/>
<cite><a href="http://the-pastry-box-project.net/dan-mall/2012-september-12/">Dan Mall</a></cite></p>
</blockquote>

<p>We make websites, but all too often we find ourselves looking at web design artifacts in abstractions. We email <span class="caps">PDF</span>s to each other, glance at mockup <span class="caps">JPG</span>s on our desktops, and of course kill trees in order to print out designs so that we can scribble in the margins. All of these practices subtly take everyone further and further away from the design’s eventual final resting place: the browser.</p>

<p>Because a project hub is just a simple webpage, reviewing designs is as easy as clicking some links, which keep your clients and teams in the browser. </p>

<p>You can keep people in the browser with yet another clever trick from the wily Dan Mall: instead of sending clients <span class="caps">PDF</span>s or <span class="caps">JPG</span>s, he created a simple webpage and tossed his static visuals into the template (<a href="http://rif.superfriend.ly/designs/lit-facts/v3/">you can view an example here</a>). This forces clients to review web design work in the browser rather than launching a <span class="caps">PDF</span> viewer or Preview. </p>

<p>Now this all might sound trivial to you (“Of course my client knows that we’re designing a website!”), but keeping the design artifacts in the browser subconsciously helps remind everyone of the medium for which you’re designing, which helps everyone focus on the right aspects of the design and have the right conversations. </p>

<h2>Progress over time</h2>

<p>When you’re in the trenches, it’s often hard to visualize how a project is progressing. Tools like Basecamp include discussions, files, to-dos, and more, which are all great tools but also make things a bit noisy. Project hubs provide you and your clients a quick and easy way to see at a glance how things are coming along. Teams can rest assured they’re viewing the most current versions of designs, and managers can share progress with stakeholders simply by providing a link to the project hub. </p>

<p>Over time, a project hub becomes an easily accessible archive of all the design decisions, which makes it easy to compare and contrast different versions of designs and prototypes.</p>

<h2>Setting up a project hub</h2>

<p>Setting up your own project hub is pretty simple. Simply create a webpage with some basic styles and branding. I’ve created a project hub template that’s <a href="https://github.com/bradfrost/project-timeline">available on GitHub</a> if you want a jump-start.</p>

<p>Publish the webpage to a <span class="caps">URL</span> somewhere that makes sense (we’ve found that a subdomain of your site works quite well) and share it with everyone involved in the project. Bookmark it. Let everyone know that this is where design updates will be shared, and that they can always come back to the project hub to track the project’s progress.</p>

<p>When it comes time to share new updates, simply add a new node to the timeline and republish the webpage. Simple <span class="caps">FTP</span>ing works just fine, but it might make sense to keep track of changes using version control. Our <a href="http://foodbank.bradfrostweb.com/timeline/">project hub</a> for our <a href="http://bradfrostweb.com/blog/post/greater-pittsburgh-community-food-bank-open-redesign/">open redesign of the Pittsburgh Food Bank</a> is <a href="https://github.com/bradfrost/pittsburgh-food-bank-timeline">managed on GitHub</a>, which means that I can make edits to the hub right from GitHub. Thanks to the magical wizardry of <a href="https://help.github.com/articles/post-receive-hooks">webhooks</a>, I can <a href="http://jonathanstark.com/blog/deploying-code-automatically-with-github-webhooks">automatically</a> <a href="http://jonathanstark.com/blog/deploying-private-repos-automatically-with-github">deploy</a> the project hub so that everything stays in sync. That’s the fancy-pants way to do it, and is certainly not a requirement. As long as you’re able to easily make edits and keep your project hub up to date, you’re good to go. </p>

<h2>So that’s the hubbub</h2>

<p>Project hubs can help tame the chaos of the design process by providing a home base for all key design and development materials. Keep the design artifacts in the browser and give clients and colleagues quick insight into your project’s progress.</p>

<p>Happy hubbing!</p>