People first. Information first.

Jeremy In Flight

Steel City Codefest postscript

“Here’s what Deb Hopkins, the executive director of Pittsburgh Cares, knows: 55 percent of the people who visit her organization’s website on a mobile device bounce. That’s more than half of her mobile audience taking a quick look around, and then taking off. What Deb doesn’t know is how many volunteers she’s losing out on because of this. And when Pittsburgh Cares loses out, Pittsburgh loses too.”

So began my pitch to the judges at last month’s Steel City Codefest. Four weeks later, and turns out I’ve still got it more or less memorized.

My team took on a challenge presented by Pittsburgh Cares, a nonprofit that matches volunteers to the organizations that need them. With only 24 hours to spare, our goal was to design and build a mobile site that would solve Deb’s 55 percent problem while fundamentally supporting the Pittsburgh Cares mission of sustainable volunteerism. By the hackathon’s end, we were recognized as one of six finalists among more than two dozen competing teams.

I wrote about the hackathon a couple of posts ago, so this isn’t another “think piece.” The postscript is that now we’re trying to move this project forward and give Pittsburgh Cares something it can really use. It’s one thing to hack together a design over a weekend. It’s another to build something that will not only be useful but also durable. To that end, we’re collaborating with another codefest team that worked on the same challenge, and we’ve reached out to developers who have the necessary expertise with Salesforce, which powers the backend of Pittsburgh Cares’ current site. I couldn’t say enough about the generosity of the people who have offered their time and energy to make this happen.

With new team members on board and a meeting scheduled to hash out requirements and priorities, I thought it’d be a good idea to revisit my research, sketches, and designs from the hackathon, giving them a more polished and presentable look.

Taking the time to reflect is invaluable. Looking back at these wireframes now, I see tons of things I would do differently, but even so, I’m proud of what we accomplished because I know we were on the right track. These designs were grounded in considerable thought and research … at least, as much as possible leading up to and during the codefest. Going forward, if our designs are largely integrated into in the final website, I’ll be thrilled. But even if they aren’t, I’ll be thrilled too, because this has been a learning experience, and at the end of the day, Pittsburgh Cares and all the people it helps will be getting something better. And that’s what counts.


For reference, this is what Pittsburgh Cares' website looks like now when you access it on a mobile device. A nightmare to navigate, browse volunteering opportunities, register, or offer to volunteer.

[1] Organization logo. On all screens, site design would reflect PGH Cares branding and colors.

[2] Envisioned to be a map -- static or dynamic, TBD -- showing pinpoints of volunteer opportunities in the PGH area. Meant not only to be visually appealing but also to convey to potential volunteers that there are chances to help nearby and that other people are already doing so. 

[1] Social cues help users hone in on the right volunteering opportunities and encourage them to act. Options include urgency cues, e.g.: "10 spots left!" Bandwagon cues, e.g. "15 people starred this cause" or "36 have offered to help." Another idea is a "Need Meter" that would combine multiple factors into a single indicator of how badly an event needs volunteers.

[2] Just enough information to give users a sense of whether they'd be interested.

[3] Long scroll of volunteer opportunities. 

[1] Optional for some volunteer opportunities, as necessary. 

[2] Some opportunities allow users to immediately sign up. Others involve a more complicated process by which they offer to volunteer or "express interest" and then may be screened by the affiliate nonprofit to see whether it's an appropriate match of need, skills, and (in some cases) proper clearance.

[3] Facebook, Twitter, Email ... whatever social mechanisms will make the most sense for PGH Cares and at this particular touchpoint in the volunteering process.

[1] Pared down to absolutely only the necessities, making this process as easy as possible. This is perhaps the single most important screen. Users will be prompted to return and further flesh out additional profile information later on.

[1] If a user is already signed in, the dashboard is essentially the home screen -- a place to manage hours, opportunities, and profile information all rolled into one.

Codefest photos

Making my pitch at the final public presentation:

Getting feedback and discussing our prototype with teammate Chris Diana:

The crowd at the final public presentations:

Jeremy BurtonComment