Port over "Breathing With Both Lungs"

The "Breathing With Both Lungs" document bootstrapped the Building
Gittip website, and now we're at a place where we can fold that into
this. Yay! :-)

scss/overrides.scss

@@ -16,6 +16,11 @@ ol ol { margin-top: 1em; }
 blockquote {
     border-left: 2px solid $light-gray;
     padding-left: 1em;
+    margin-bottom: 1em;
+
+    p:last-child {
+        padding-bottom: 0;
+    }
 }
 
 

www/ia/account-elsewhere.spt → www/big-picture/ia/account-elsewhere.spt

@@ -19,3 +19,5 @@ Here's an example of an account elsewhere for an individual:
 
 Here's an example of an account elsewhere for a group:
     https://www.gittip.com/on/github/github/
+
+We also need to think about notifying users about unclaimed tips.

www/ia/index.spt → www/big-picture/ia/index.spt

@@ -10,15 +10,15 @@ the system by which we deliver this experience.
 
 Gittip basically has six kinds of pages:
 
-  1. [Homepage](/ia/homepage)
-  1. [Profile](/ia/profile)—A representation of an individual Gittip
+  1. [Homepage](/big-picture/ia/homepage)
+  1. [Profile](/big-picture/ia/profile)—A representation of an individual Gittip
     participant.
-  1. [Community](/ia/community)—A page aggregating many participants
+  1. [Community](/big-picture/ia/community)—A page aggregating many participants
     together.
-  1. [Account Elsewhere](/ia/account-elsewhere)—A representation of an
+  1. [Account Elsewhere](/big-picture/ia/account-elsewhere)—A representation of an
     account on a different social network or platform.
-  1. [About](/ia/about)—Documentation about Gittip.
-  1. [External](/ia/external)—Widgets, embeds, buttons, browser
+  1. [About](/big-picture/ia/about)—Documentation about Gittip.
+  1. [External](/big-picture/ia/external)—Widgets, embeds, buttons, browser
     extensions, etc. Off-site experiences that none-the-less are part of our
     information architecture.
 
@@ -30,9 +30,9 @@ but rule of thumb we have 10x-100x the off-site impressions that we have
 on-site.
 
 The first on-site experience most users (65%) have is a [profile
-page](/ia/profile), with a significant minority (24%) starting out on
-the [homepage](/ia/homepage).  [Community](/ia/community) pages and [accounts
-elsewhere](/ia/account-elsewhere) get a lot less traffic.
+page](/big-picture/ia/profile), with a significant minority (24%) starting out on
+the [homepage](/big-picture/ia/homepage).  [Community](/ia/community) pages and [accounts
+elsewhere](/big-picture/ia/account-elsewhere) get a lot less traffic.
 
 <p><iframe width='500' height='300' frameborder='0'
     src='https://docs.google.com/spreadsheet/pub?key=0AiDJ5uiG6Hp3dDUyNTFiZUlSUGNFY3d3UXZzRmtBT2c&single=true&gid=0&range=a1%3Ae11&output=html&widget=true'></iframe></p>

www/big-picture/ia/profile.spt

@@ -0,0 +1,25 @@
+nav_title = "Profile"
+[---]
+[---] text/html via markdown
+
+The profile page is the most complex page on the site.
+
+The most important thing on the profile page is the ability to give someone
+money.
+
+For active patrons, the ability to manage giving is important. From Nick Coghlan:
+
+> From the perspective of someone that is primarily a giver on gittip, the
+> thing I most want on my own profile page is the ability to review & update my
+> gifts.
+>
+> 1. Easily see where my money is going (kind of exists already, but the
+> visualisation isn't great - might be one of the rare cases where a
+> pie chart is actually a decent visualisation. Would also be good to
+> be able to map my donations to teams and communities - especially if
+> I'm giving directly to a member of a team when giving to the overall
+> team might be more appropriate)
+>
+> 2. See how much the current recipients need it (their goals and current receipts)
+> 3. Easily add a new recipient without leaving the page (if I already have
+> someone specific in mind)

www/big-picture/index.spt

@@ -1,34 +1,45 @@
 nav_title = 'The Big Picture'
+nav_children = ['brand', 'audience', 'product', 'ia']
 [---]
 [---] text/html
-<h2>Mission and Vision</h2>
 
-<p>Gittip&rsquo;s mission is to redeem the economy.</p>
+## Mission and Vision
 
-<p>We envision a future in which the economy is characterized by trust,
+Gittip&rsquo;s mission is to redeem the economy.
+
+We envision a future in which the economy is characterized by trust,
 collaboration, cooperation, sharing, openness, transparency, care for one
 another, inclusion, inspiration, purpose, generosity, patience, empathy,
-optimism, and love.</p>
+optimism, and love.
+
+
+## Process
+
+*by Chad Whitacre*
 
+Gittip is a new kind of organization called an &ldquo;[open
+        company](http://blog.gittip.com/post/26350459746/the-first-open-company).&rdquo;
+Anyone can volunteer to help with almost anything at any time, and [everyone
+        who volunteers](https://www.gittip.com/Gittip/members/) gets to [take
+                some of the
+                money](https://medium.com/building-gittip/eba0a27825b8) that
+        has been given on Gittip to Gittip itself&mdash;Gittip is funded on
+        Gittip.
 
-<h2>Projects</h2>
+Our prime directive is:
 
-<p>A project is a high-level, months-long effort that encompasses a number of
-lower-level milestones and issues. Not all of our work fits into a project,
-and, in fact, we only have one project right now:</p>
+> Design from the outside in, build from the inside out.
 
-<p><a
-href="https://docs.google.com/document/d/1TQATN7-IxphyguJzEqxgo-99hJYavdOObNYNlVoX0us/edit?usp=sharing">Breathing
-With Both Lungs: The 2014 Gittip Redesign Project</a> </p>
+We organize our work into high-level [projects](/projects/), medium-level
+[milestones](https://github.com/gittip/www.gittip.com/issues/milestones), and
+low-level [issues](/policies/label-github-issues). Dive in to find something to
+work on. Reach out on <a href="https://twitter.com/Gittip">Twitter</a> or
+[GitHub](/policies/label-github-issues) or <a
+href="irc://irc.freenode.net/#gittip">IRC</a> when you get stuck.
 
+Thanks! :-)
 
-<h2>Milestones and Issues</h2>
 
-<p>At a lower level we use <a
-href="https://github.com/gittip/www.gittip.com/issues/milestones">milestones</a>
-and <a href="/policies/label-github-issues">issues</a> to track our work. Dive in
-there to find something to work on. Reach out on <a
-href="https://twitter.com/Gittip">Twitter</a> or <a
-href="irc://irc.freenode.net/#gittip">IRC</a> if you get stuck.</p>
+## More of the Big Picture
 
-<p>Thanks! :-)</p>
+{{ toc(nav_current) }}

www/big-picture/product.spt

@@ -0,0 +1,35 @@
+nav_title = "Product Overview"
+[---]
+[---] text/html
+
+Gittip is a way to give money every week to people and teams you believe in.
+Here are the four main features of the www.gittip.com website as we understand
+them (per the 2014 Gittip company retreat):
+
+ - **Giving.** We enable individuals and groups to participate in the stories
+   of others through long-term, no-strings-attached, small financial gifts.
+
+ - **Profiles.** We enable individuals and groups to tell a story about how
+   they're making the world better, and receive financial gifts.
+
+ - **Teams.** We enable groups to receive and distribute funds openly and
+   transparently.
+
+ - **Communities.** We enable communities to share and sustain a collective story.
+
+Here are the ways that www.gittip.com interfaces with the outside world:
+
+ - **Accounts Elsewhere.** We support connecting as many other services as
+   possible to a Gittip profile.
+
+ - **Widgets & Embeds.** We provide ways for participants to embed Gittip
+   functionality on other websites.
+
+ - **API.** We provide APIs that enable third parties to build tools for
+   participants to work with their data stored in Gittip.
+
+ - **Browser Extensions.** We provide extensions for all major browsers, adding
+   Gittip links on websites with whom were not yet partners.
+
+ - **Partnerships.** We seek out partnerships with third parties to add Gittip
+   links to their products. We practice engineering as marketing.

www/hackers/index.spt

@@ -1,4 +1,4 @@
-nav_title = 'Hacker’s Reference'
+nav_title = "Hacker's Reference"
 nav_children = ['sa', 'style']
 [---]
 [---] text/html

www/index.spt

@@ -1,21 +1,12 @@
-nav_title = "Introduction"
-nav_children = ['big-picture', 'brand', 'audience', 'ia', 'hackers', 'policies', 'appendices']
+nav_title = "Building Gittip"
+nav_children = ['big-picture', 'projects', 'hackers', 'policies', 'appendices']
 [---]
 [---] text/html
 
-Welcome! This website is for people building [Gittip](https://www.gittip.com/).
+*by Chad Whitacre*
 
-Gittip is a new kind of organization called an “[open
-        company](http://blog.gittip.com/post/26350459746/the-first-open-company).”
-Anyone can volunteer to help with almost anything at any time, and [everyone
-        who volunteers](https://www.gittip.com/Gittip/members/) gets to [take
-                some of the
-                money](https://medium.com/building-gittip/eba0a27825b8) that
-        has been given on Gittip to Gittip itself—Gittip is funded on
-        Gittip.
+Welcome! This website is for people building [Gittip](https://www.gittip.com/).
 
-Our main principle is "Design from the outside in, and build from the inside
-out." So that's how this site is organized. We start at the outer layer, and
-work our way inward to more and more specific details.
+First time? Start at ... [the beginning](/big-picture)! :-)
 
 {{ toc(nav_current) }}

www/policies/label-github-issues.spt

@@ -3,7 +3,8 @@ nav_title = "Label GitHub Issues"
 [---] text/html
 *by Chad Whitacre*
 
-This document explains our use of GitHub issue labels.
+This document explains our use of GitHub issue labels. Click on a label below
+to go to a listing of related issues.
 
 Every ticket should have exactly one of the following:
 
@@ -12,7 +13,7 @@ Every ticket should have exactly one of the following:
     - <a href="https://github.com/gittip/www.gittip.com/issues?labels=%E2%98%85%E2%98%85%E2%98%86">&#9733;&#9733;&#9734;</a>
     - <a href="https://github.com/gittip/www.gittip.com/issues?labels=%E2%98%85%E2%98%86%E2%98%86">&#9733;&#9734;&#9734;</a>
   - <a href="https://github.com/gittip/www.gittip.com/issues?labels=Blog Post">Blog Post</a> is
-    for planning blog posts and <a href="https://github.com/gittip/www.gittip.com/issues?labels=Marketing">Marketing</a> is for other marketing-related TODOs.
+    for planning blog posts, and <a href="https://github.com/gittip/www.gittip.com/issues?labels=Marketing">Marketing</a> is for other marketing-related TODOs.
   - <a href="https://github.com/gittip/www.gittip.com/issues?labels=TeamX %E2%98%85">TeamX
     &#9733;</a> and
     <a href="https://github.com/gittip/www.gittip.com/issues?labels=TeamX">TeamX</a> are for high-

www/projects/breathing-with-both-lungs/index.spt

@@ -0,0 +1,85 @@
+nav_title = "Breathing with Both Lungs"
+[---]
+[---] text/html
+
+*by Chad Whitacre*
+
+## The 2014 Gittip Redesign Project
+
+This document lays out a plan for a major redesign of www.gittip.com in 2014.
+We built a [strong developer
+        team](http://blog.gittip.com/post/74460469599/with-first-retreat-gittip-team-becomes-a-reality)
+in 2013, and in 2014 we're going to learn how to design, so we can build a
+truly world-class product. We're going to breath with both lungs.
+
+This document starts with a history of Gittip's design, and then we define the
+goals and deliverables of our redesign project.
+
+
+## History
+
+Gittip launched in June, 2012, and has been growing exponentially for the past
+12 months, doubling every five months or so. When the site launched it looked
+like this (courtesy of [Ryan
+    Deussing](http://ryandeussing.com/blog/2012/09/24/chad-whitacre-gittip/)):
+
+<a href="2012.png"><img src="2012.png" width="100%" alt="2012 design"></a>
+
+Pretty bare bones. After six months we launched our [first
+        redesign](https://github.com/gittip/www.gittip.com/issues/66), in
+January of 2013. The design was contributed by Damon Chin of our close partner
+company Balanced Payments, with Nick Sergeant and myself implementing the
+design in markup. Here's what the site looks like now:
+
+<a href="2013.png"><img src="2013.png" width="100%" alt="2013 design"></a>
+
+Along with the January, 2013 redesign we also started building the Gittip team
+in earnest, with a blog post about
+[hiring](http://blog.gittip.com/post/39687487576/gittip-is-hiring) in general,
+and another one [reaching out to the design
+        community](http://blog.gittip.com/post/41348666944/design-gittip) in
+particular. We succeeded in building a developer team over the course of the
+year, with 20 people attending the [Gittip company
+        retreat](http://blog.gittip.com/post/74460469599/with-first-retreat-gittip-team-becomes-a-reality)
+in early January, 2014. Now we're going to spend 2014 building our design
+capability, so that we can "breath with both lungs," and deliver a world-class
+product.
+
+
+## Goals
+
+*by Karolina Szczur*
+
+Here is what I'd like to acheive with the redesign:
+
+ * brand and design consistency across the product
+ * ease of use
+ * clarity of product's purpose and call to actions
+ * voice and tone incorporated into visuals and copy
+ * full-on responsiveness
+
+These are, so to say, top-level goals. More specifically:
+
+ * optimization for HiDPI displays (using SVGs, improving font rendering)
+ * better typography and thus, hierarchy
+ * more white space
+ * less patterns, more distinction of call to actions (more *leading the user* kind of thing)
+
+
+## Deliverables
+
+This Building Gittip website is the first deliverable of the redesign project.
+Our prime directive is:
+
+> Design from the outside in, build from the inside out.
+
+So we're writing content on this site that starts with our
+[mission](/big-picture) and zooms in progressively through brand guidelines,
+audience, product overview, and information architecture. From there we can
+start talking about the system architecture for the software necessary to
+deliver the experience we want to deliver, and on down to specific libraries
+and tools.
+
+Then we can start building back out. The second deliverable will be a
+redesigned www.gittip.com, the first project delivered using our new Building
+Gittip infrastructure.

www/projects/index.spt

@@ -0,0 +1,6 @@
+nav_title = "Projects"
+nav_children = ['breathing-with-both-lungs']
+[---]
+[---] text/html
+
+{{ toc(nav_current) }}