Nonprofit Mobile Site Design

PITTSBURGH CARES

THE GOAL

Relieve a major headache for a longstanding local nonprofit — a 55 percent bounce rate for anybody visiting its website on a mobile device. Additionally, ensure that any design solution fundamentally supports the organization’s mission of sustainable volunteerism.

What I Did

Stakeholder Interviews, Literature Review, Comparative Analysis, Personas, Requirement Elicitation, Heuristic Analysis, Experience Mapping, Sketching, Paper Prototyping, User Flows, Project Management, Collaborative Design, Project Presentation

Background

This project was undertaken as part of the Steel City Codefest, a 24-hour civic hackathon, although work extended both before and after the event in February 2014. My team of five consisted of myself as the design lead, two back-end devs, a front-end dev, and a marketing specialist.


THE QUEST

To gain a deep understanding of our client organization with limited time, I conducted a series of scaffolded interviews that yielded key insights about workflows, audiences, business rules, and pain points. From this and the synthesis of a literature review began to emerge a clear picture of who we were designing for and why.

With a literature review, we were able to take advantage of similar research that had already unearthed answers to questions about volunteers and their motivations.

How the Pittsburgh Cares website appeared on a smart phone.

I did a heuristic assessment of the current website and began to craft personas. During discovery, each new finding underscored that the problems we needed to address weren't just technical — they were systemic and cultural.

 

The relationship between Pittsburgh Cares, its partners, and its volunteers was built on a moving target of contextual touch points. This was critical. Drawing from my exploratory research, I sketched out an experience journey map. Later, I facilitated a parallel, collaborative design process with a teammate to produce our first wireframes.

A journey map showing the experience of our primary persona, Samantha, as she goes from being unfamiliar with Pittsburgh Cares to ultimately volunteering. Understanding these touch points over time was key.

 

After several iterations, we had paper prototypes ready for testing. Later, with wireframes in hand, I worked closely with our back- and front-end developers to bring a coded prototype to life.

HOME

(1) Organizational branding, and (2) a placeholder for interactive multimedia. Functionality pared down to essentials.

BROWSE

Volunteering opportunities appear with (1) faceted info and (2) just enough detail to draw interest, in a (3) long-scroll navigation. Sticky filtering up top.

DASHBOARD

The dashboard is the linchpin for engagement in both directions between PGHC and volunteers.

OPPORTUNITY

Clicking through to a given volunteer opportunity reveals (1) further details. Design accounts for (2) vital business logic and (3) hooks into social media.


THE RESULTS

I made the pitch, and we were named finalists — one of six teams from a field of nearly 30. Pittsburgh Cares was also later awarded a grant by the Forbes Fund to continue the project and make it a reality for the long-term, an undertaking which remains in development.

Running through a prototype with teammate Chris Diana.

 

The crowd at final presentations.

Making the pitch.

I think it's fair to say our clients liked us.

P.S. If you've got a project or opportunity you'd like to discuss, I'm all ears.