I put this chart together after a friend told me my project productivity was unusually high. I picked out the major web projects I've done over the past several years and highlight how they've influenced subsequent (or previous) projects. Every one of these projects launched or shipped... except the DigitalBicycle, which is why it holds a special place in influencing all Project Design (we never did make those "defunct" t-shirts).

Related posts:

1. “Describe the basis for your approach to this project. How did you determine the need for this project now and who was included in its design?” From the Gilbert Center in an excellent article entitled “Asking the Wrong Questions: Challenging Technocentrism in Nonprofit Technology Planning”: In...
2. Shirt sales, scraped daily I am remiss to finally get around to blogging Day of the Shirt, which I launched back in October, 2010....
3. Data-driven, content-first design I’m working on an app for the DonorChoose.org Hacking Education Contest. DonorsChoose works by having teachers submit classroom project/supply needs that...

I am remiss to finally get around to blogging Day of the Shirt, which I launched back in October, 2010. It's a straightforward and (hopefully) aesthetically-pleasing t-shirt aggregator.

What's nifty about Day of the Shirt is that it's built entirely with PHP Simple HTML DOM Parser. And when I say entirely, I mean entirely: there is no database backend, everything is scraped, including itself. Day of the Shirt...

1. scrapes t-shirt vendors to get names, links and thumbnails (which are cropped and cached);
2. scrapes, parses and rewrites its own DOM when new shirts are added (we're serving completely static html);
3. and scrapes itself to compose its daily tweets.

That last step is a little extravagant, but I wanted to separate the early-morning website update from the mid-morning tweeting---otherwise only the early birds would ever see the tweet. Of course, I re-used the tweet-composing algorithm from Panlexicon.

Now the unfortunate part of this project was that I did a fair amount of competition research prior to building this website---but it wasn't until about a week after I launched that I discovered an equivalent service: Tee Magnet. C'est la vie.

Related posts:

1. Protest shirts Regular readers of this blog are aware that posts rarely reference the present, let along the contemporary. But on Day...
2. The 48 hour mobile web app: Drunken Stumble Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I’m not sure why they called...
3. Reductionist function and practice Rob Haitani on Palm OS from Designing Interactions: One bit of advice that I gave to people designing the Palm...

Above is the signup form from Brompt, the blog reminder service I built a few years ago for undisciplined bloggers like myself. I'm very proud of this form: it's clear, it contextualizes the data being requested within the functionality of the application, and it drives people to action.

There are a few areas for improvement: asking for your RSS feed rather than your blog's URL is a bit roundabout (autodetection is still in the feature parking lot) and it could use a little explanation at the top in case you bypassed the front page's explanation of the service.

Another reason I'm proud of this form is that it was built using Drupal's Forms API---and Drupal uses awful, unintuitive forms like they were going out of style.

Related posts:

1. The 48 hour mobile web app: Drunken Stumble Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I’m not sure why they called...
2. 7 years in Boston This August marks the completion of my 7th year in Boston, with the loose exceptions of the 1 month I...
3. Meet AmeriCorps no more This month, the lights on Meet AmeriCorp—a directory and messaging service for AmeriCorps members that launched in 2006—has gone dark...

Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I'm not sure why they called it a hack day) competition sponsored by the Boston Globe and held in the MassChallenge workspace. The goal of the event was to develop tools that would improve the lives of Bostonians. My team won "Best Mobile App" as well as the "Crowd Favorite" award for the pub crawl app we built: Drunken Stumble.

Update: You can also read about the process from some of my teammates: @nikibrown on the design, @unruthless on frontend and whip-cracking, and @mikemiles86 on the backend and interface.

(And if you're wondering how a pub crawl app would improve the lives of Bostonians, you must not be from Boston.)

About the Project

Our team formed Friday night. On the frontend we had @nikibrown (designer) and @unruthless (frontend developer)---who knew each other prior to the event. On the backend we had @mikemiles86 (application developer) and myself (API and interface developer)---who happened to be standing near the cheese table.

Together---and with the muse of the open bar---we came up with the idea of creating an application that would help people perform a pub crawl. While other teams proposed concept demos and APIs, we set our goal to be the delivery of a complete product by the end of the weekend. Defining a minimum viable product meant keeping a lot of great ideas in the parking lot (like drink lists and multi-user crawls) but helped us focus on delivering a tight, attractive and functional pub-crawl application that lets you:

• use your smartphone to find nearby pubs
• get walking directions to that pub
• invite your friends to the pub via social media (Twitter and Facebook)
• find the next pub for your crawl and get directions to there from your current pub
• track your nightly progress (or revisit it the next morning)
• call a cab home at the end of the night

About the App

We built Drunken Stumble as an HTML5 mobile web application---testing it on both iPhone and Android. As an HTML5 mobile web app, we can access smartphone features (like GPS and Portrait/Landscape modes) as well as quickly write, test and deploy. Both @mikemiles86 and myself are Drupal/PHP developers so (with some reservations) we decided to use Drupal as a framework---using its paths, forms, database and template systems and nothing else.

I focused most of my development on interfacing with external APIs. Originally we planned on using Yelp to provide business data for locating pubs, but their API is extremely limited with only 100 lookups per day. Fortunately, we found an awesome service called SimpleGeo that currently offers unlimited lookups for businesses based upon location. Using SimpleGeo we were able to quickly write a rich, location-aware application that works anywhere in the United States, not just in Boston.

Once we knew we had a source for business data, the next step was telling the application where you are. HTML5 offers native geolocation which means we can (politely) request exact location data based on your smartphone's GPS. If your smartphone doesn't have GPS (or it's turned off) you can type in an address and we use Google Maps to geocode it into a latitude/longitude. If you do use your GPS, we also do a reverse geocode (again using Google Maps) to show you your street-level address to confirm that's actually where you are ("42.331528,-70.94425" could be in the middle of Boston Harbor for all I know).

Google Directions is the special sauce that ties it all together. We provide your starting location and the location of your next pub and Google Directions provides walking instructions and waypoints along the way. We display the walking directions and overlay the waypoints on top of a (static) Google Map. Unfortunately, Google Direction's API also has a rather low limit of lookups (2,500/day), so should we go over our limit (as we did about 2am Sunday morning), we alternatively display a link that will launch your smartphone's native maps app (or push you to Google Maps directly) to get directions there.

There was one last benefit of using SimpleGeo's well-populated business database: our app's design isn't limited to just pubs. For example, we decided rather late in the process to offer a list of local taxicab phone numbers at the end of the pub crawl. Because we had already tapped into the SimpleGeo API, we just needed to filter nearby businesses for "taxis", rather than "bars & pubs". Which is an important thing to keep in mind: with a few minor changes, our app can facilitate routing for any type of business or geographically based event---like a taco crawl or artists' open studios.

About the process

The process was awesome. We got down to business about 8:00pm on Friday night and went live at 1:45pm on Sunday. Sure, we missed deadlines, our final feature list shrunk (and the parking lot grew), the architecture is far from "robust", and the final design didn't match our initial sketches (it was better!), but we met our goal of delivering a complete and functional product.

I think it was our focus on "completeness" that helped us win more awards than any other team (2 awards). Other than a few all-hands decisions, our small and diverse team focused separately on our individual areas and integrated as necessary---@mikemiles86 and I used Git to sync progress on the backend, while I think the frontend mostly looked over each other's shoulders. For me that meant moving from API wrangling at the start of the project to templating at the end. I also can't overstate the value of @mikemiles86 pulling an all nighter on Saturday (the rest of us ejected at 3am for about 4 hours of sleep)

The Crowd Favorite award was not only a function of our easy-to-understand concept, but also the stellar work of our frontend team. @nikibrown quickly produced strong branding and interface mockups that were key to creating early buzz: as other teams walked around and mingled, we could easily show off our idea. @unruthless became our de facto project manager and spokeswomen, explaining the app to visitors and pushing progress updates to Twitter and the #bostonhack hashtag for the event. We also lived our values, bringing in a wide selection of beer to carry us through Saturday and Sunday (and sharing it didn't hurt our chances of winning the Crowd-Favorite award either).

About the future

It's only been a few days since the event but we've kept up a steady stream of chatter over Twitter and pushed a few minor updates to the server too. The intensive hack model worked really well for building a minimally viable product, but time will tell whether we can keep the momentum and updates coming---turning Drunken Stumble into a maximally functional application.

In the meantime though, happy stumbling, sober or otherwise.

Related posts:

1. A modest web-app proposal Advanced algorithms analyze your social graph to provide deep introspection through animal shapes and SEO-optimized pithy sayings. Once we close Series...
2. 7 years in Boston This August marks the completion of my 7th year in Boston, with the loose exceptions of the 1 month I...
3. A form from my favorites Above is the signup form from Brompt, the blog reminder service I built a few years ago for undisciplined bloggers...

This is not a website; it's a scrapbook, a swipe file and a memory hole. There is no separation between content and design, form or function: all is one. Island 94 looks like a blog insofar as this is the necessary form for its proper function: a legitimating feature and rhetorical device.

Rhetoric is the issue: just as curriculum requires an instructor, information requires delivery. The worst textbooks have always been readers: excerpts disconnected from their authors' greater work and padded with soft introductions.

I admit weakness in the face of emancipated content---I love my RSS reader and happily feed the beast---but that is only vane productivity. Enlightenment, if it is to be found on the web, shall come from unity, not incoherence.

Related posts:

1. Advocacy in print — Survival News for 2011 Today I sent another issue of Survival News—“the voices of low-income women”—to the printers; this is my second year as...
2. A form from my favorites Above is the signup form from Brompt, the blog reminder service I built a few years ago for undisciplined bloggers...
3. Data divides and umbrellafication Jesse Lichtenstein in “Transparency for All”, writing for Wired: The concern that open data may simply empower the empowered is...

Myself and the Nonprofit Millennial Blogger Alliance are proud to announce the launch of a new website: NonprofitMillennials.org: "We blog about the millennial generation and nonprofits!"

The Nonprofit Millennial Blogger Alliance is made up of young writers collectively bringing important issues about the nonprofit sector to the forefront. While each of us looks at the sector from a different perspective we share the view that millennials offer something valuable to nonprofits.

By sharing our knowledge and experiences from within Generation Y we can help prepare the next generation—and engage current generations—in addressing the pressing issues that continue to shape the nonprofit sector and the world

The website aggregates posts from all members of the alliance in one place, making it easy to find a fresh article, subscribe to everyone's RSS feed all in one place, or easily find us on Twitter (@npmillennials) where new articles are posted too.

I led the technical development and design on the website and am very proud of the outcome. The concept for a central aggregating website had been batted around for several months and I was able to take the lead as closer. We wanted a straightforward website that would highlight but not overshadow the writings of individual bloggers. It's built on WordPress, and posts are aggregated via the FeedWordPress plugin (which does an awesome job linking all posts back to their original author's website, not ours!). Because the main focus is on our authors, not their content, there is a little secret sauce holding it all together.

So if you're a millennial blogger writing about social change or the nonprofit sector, please consider joining us. And don't forget that "millennial" has 2 N's (I do, all the time).

Related posts:

1. A form from my favorites Above is the signup form from Brompt, the blog reminder service I built a few years ago for undisciplined bloggers...
2. Shirt sales, scraped daily I am remiss to finally get around to blogging Day of the Shirt, which I launched back in October, 2010....

Tomorrow is launch day for a blog aggregator website I worked on, but because I can't write about that just yet I thought I'd write about a website whose development has influenced a lot of my approach to minimal webdesign: Pantextual.com

(Few things ever die on the Internet, but Pantextual is definitely past its prime and has aged poorly as functions have been disabled to thwart spammers. Be that may...)

Pantextual was a micro-blogging experiment developed by Rebecca White and me in 2006; before we were completely sure we wanted to blog via text message. As an experiment, our intent was more of exploration than refinement---and refining with Drupal 5RC would have taken all the fun out of it. Our about page read:

Sometimes even a little bit is too much.
But what if it was really beautiful, interesting and fun?
Then you might not notice all the other irritations of life so much.
Perhaps you might enjoy it.

Our goal was to fit as much content into a square box as possible and yet still make it a pleasure to read and an invitation to explore.

There was the obvious: nice typography (and Rebecca is to thank for the lovely ligature in the logo); gracefully overflowing if the content wouldn't fit (you never know); not overwhelming the reader with content, even if it's brief; and being playful: short content tends to be pithy content and we wanted a functional design to match.

The biggest problem by far was metadata. We wanted to stick with the standard conventions: date, author, categories, comments; we needed to find a place to put them and where we put them would determine if they were meaningful. Categories were the most fun to explore.

On Pantexual, we put categories inline, creating a custom syntax for tagging words as categories within the content itself. We also only displayed those words as categories if there was more than 1 post with that category. As the website filled in, we would place other content related through the categories next to the post itself, inviting exploration.

All in all, we did pretty good with a 400 pixel square box... maybe we should resuscitate it.

Related posts:

1. An excellent example of Writing Practical #3 I subscribe to too many media-strategy blogs, which rile me up from time to time with their lack of attention...
2. Minimal Mass I was searching for something else in Google Reader, but it seemed timely to resurface this note: A great example...
3. Shirt sales, scraped daily I am remiss to finally get around to blogging Day of the Shirt, which I launched back in October, 2010....

I launched ProducersForum.org 4 years ago. At the time there was a need for a "Yahoo Groups"-functionality that offered:

• RSS Feeds
• Wikis
• Sub-lists for working groups that would still be accessible/cross-searchable

It seems rather quaint now, but there was a need for this for community media groups in 2006. Built using Drupal, it is the only website I know that followed Zack Rosen's Magic Groups recipe to turn Drupal into a mailing-list manager that could create an arbitrary number of email lists, allow users to post via email or via the website, and archive beautifully-threaded conversations on the website. Built with Drupal 4.7, I learned quite a bit in optimizing user workflows and smoothing Drupal's poorly executed content creation interface.

Memories...

Related posts:

1. The 48 hour mobile web app: Drunken Stumble Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I’m not sure why they called...
2. A form from my favorites Above is the signup form from Brompt, the blog reminder service I built a few years ago for undisciplined bloggers...
3. Social Media Community Architect and Manager Exploring the recesses of my email I came across some bad ideas I gave to a good friend, neighbor and...

One of ReCaptcha’s problems is that the words are sometimes hard to read. To deal with that, I used this tip from a Stumbleupon developer in the comments of this post entitled ReCAPTCHA’s quality is going down? : putting a link to reload—Recaptcha.reload()—the CAPTCHA in the explanation. To do that, I pasted this into the Challenge Description setting on the CAPTCHA admin page:


To prevent spam, please type the two words you see below separated by a space. <a href="javascript:Recaptcha.reload();" title="Get a new set of words">Can't read the words?</a>


I also used CSS to hide the fieldset border box and title from the comments to cut down on the cruft too.

No related posts.

via one of our VISTAs's personal website UI and Me.

Background

    * Goals. What are your specific goals? Consider:
          o company/brand awareness,
          o product/services awareness,
          o product/services sales,
          o community building,
          o entertainment,
          o knowledge sharing, and
          o internal communications. 

    * Promotional Fit. How should your Website fit with current promotional and marketing strategies and materials?

    * Deadlines. What are the schedule or deadline requirements?

    * Funding. What are the budgetary constraints?

    * Measurement. How will you measure the success of the site? 

Next Steps:

   1. Develop a ranked (from most- to least-important) Goals Master List.
   2. Create a mission statement for the site.
   3. Identify how the mission and goals of the site might change from short-term to long-term, given the direction of your organization and industry. 

Audience

    * External. Who is your EXTERNAL audience? Consider:
          o current customers,
          o potential customers,
          o suppliers,
          o professional/trade organizations,
          o investors,
          o competitors,
          o children,
          o schools/educators, and
          o the sight-impaired. 

    * Internal. Who is your INTERNAL audience? Consider:
          o all employees,
          o management,
          o marketing/sales,
          o operations, and
          o IT. 

    * Sub-groups. Determine all subgroups within the audiences identified above.

    * Define. Identify the interests, technical skills and special issues for each audience group and subgroup. 

Next Steps:

   1. Create a ranked Audience Master List.
   2. Develop an Aligned Master List by matching the Audience Master List to the Goals Master List.
   3. Create usage scenarios based on Aligned Master List. 

Resources

    * Project Roles. Who are the resources that will be responsible for content management and technical support (include their names, titles, roles, and contact info)?
    * Team Skills. What are the technical and content management skills of each resource? 

Next Steps:
For each resource, identify any training, software, hardware, scheduling and budgetary issues.

Competition

    * Identify Competitors. Identify the sites of competitors and others that may provide direction for your site.
    * Important Elements. Identify the important elements of each competitor site:
          o functional features,
          o technologies used,
          o breadth of content and
          o look-and-feel.

Content

    * Functionality. Which functional features should your site offer? Consider:
          o ecommerce/shopping cart,
          o site search,
          o customer service/support,
          o tech support,
          o discussion forums,
          o newsletter,
          o catalog/information
          o order forms,
          o feedback form,
          o member logon,
          o password protected areas, and
          o SSL-encrypted areas. 

    * Information. Which informational elements should your site contain? Consider:
          o About Us page,
          o Contact Us page,
          o copyright notice, and
          o privacy statement. 

    * Structure. What is your site's hierarchy? For each of the 4-7 (though you can have more or less) main areas of the site, identify:
          o each main menu item,
          o all submenu items, and
          o additional content. 

      Think of a tree-style hierarchy with the home page at the top. 

Next Steps:

   1. Describe in detail each functional feature. What exactly will it do?
   2. Identify the resources required, and any technical and budgetary issues associated with each functional feature.
   3. Provide detail for each informational element.
   4. Assign content responsibilities to the resources identified above.

Related posts:

1. Data-driven, content-first design I’m working on an app for the DonorChoose.org Hacking Education Contest. DonorsChoose works by having teachers submit classroom project/supply needs that...
2. The 48 hour mobile web app: Drunken Stumble Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I’m not sure why they called...