Code for PDX

Making tech-philanthropy easier.

Prototype coming soon!

Intro

 

Team: Group Project

 

Role: UX Designer and Researcher

Timeframe: Three Months

Tools: User Research, Affinity Mapping, Journey Mapping, Wireframes, Prototyping, Usability Testing, User Flows, UI Design, Competitive and Comparative Analysis, Feature Inventory, Wireframes, Prototyping, Usability Testing, Iterative Design, Style Guides

Problem

Code for PDX is the Portland, OR chapter of Code for America, bringing together civic-minded, tech-savvy professionals to work on philanthropic endeavors. Unfortunately the current website for Code for PDX lacks navigability and is a major pain point for those trying to volunteer.

Solution

Based on ample user research and design best practices, I am redesigning the CFPDX site to allow volunteers to more easily sign-up for philanthropic projects.

Getting to Know CFPDX

While the Code for PDX site is in need of a redesign, they still come to this project with a great many assets:

 
Transparency 

The current Code for PDX site has an abundance of information about who they are, the organizations that they work with, and who sponsors them, creating a sense of goodwill and trust with the user.

Economy

Using a single page site for a launching pad is a great way to get volunteers to navigate quickly and purposefully through a site.

Visibility​

Using conventional nav elements like the donate button and sticky header reduce cognitive load for the user so they do not need to think too hard about how to use the site.

Improvements

CFPDX clearly has plenty of great qualities, and to let them shine, we need to address their shortcomings.

Information Architecture

While Code for PDX has a ton of information on their organization, users had a fair amount of difficulty in signing up to volunteer. Improving the information architecture—how the site is organized and laid-out—could resolve this issue.

Copywriting​

The copy on the BAMC site is sometimes unclear, further confusing users.

Research

So let’s dive into the competitive and comparative analysis to see how CFPDX can make best use of their strengths, and how they can ameliorate any shortcomings

From the looks of this here C and C analysis, it appears that areas in which Code for PDX are lacking are related to signing up and navigation. Let’s validate this assumption with user testing!

 

Our User

User Interviews and Affinity Mapping

I conducted a thorough round of interviews,  with civic-minded, tech savvy individuals to see how they experience the Code for PDX website. Here’s what they had to say:

 

“I do not know how to sign up”

Users consistently found signing up arduous if not impossible, and for an organization that runs on volunteers, this is an obstacle.

“I found myself on another website, either by accident or on purpose.”

Whether it was by accident that they clicked an outbound link or they simply got frustrated by what the current site offers, users found themselves whisked away from the site.

“I want to see a volunteer button.”

When users come to the site for a very specific purpose—in this case to volunteer—they expect to carry out that goal with ease.

Persona

From my research user research, I created the persona of Rosie.

Bio

Rosie is a tech savvy gal that resides in the Portland Metropolitan Area. Since moving to Portland, she’s been enamored of the tech scene, and not just because it’s cutting edge; it exercises a social consciousness that’s been lacking from other cities in which she’s lived.

Core Needs

•To sign-up for local volunteer opportunities

•To learn about local volunteer opportunities

•To keep her portfolio fresh with new case studies

•To keep her skills sharp

Frustrations

• Rosie wants to volunteer for a local cause, but her favorite organization’s site is a little difficult to navigate.

• Though she generally finds the information she needs on the Code for PDX Meetup page or its Slack channel, it would be more convenient—and less stressful—if there was a single place where she could find all relevant info. There are often a few choice bits of info that seem to elude Rosie because she has to jump back and forth between disparate platforms.

Rosie.png

Scenario

Rosie likes to volunteer as a way not just to give back to the community, and also as a way to stay busy and build her portfolio. Recently, she found out about the Code for PDX Meetup, and she’s pretty jazzed to work on something that gives back to her adoptive city. 

Problem Statement​

Rosie needs a reliable way to browse and sign-up for volunteer opportunities through the Code for PDX site.

How Might We...​

•How might we help Rosie reliably sign-up for local volunteer events?

•How might we help Rosie stay informed and up-to-date with local volunteer events?

Design

With some strong problem statements and how-might-we statements in place, we can confidently move into design!

Information Architecture

Something that CFPDX users have mentioned is that they find it difficult to navigate the site. To this end, we want to reorganize the site’s information architecture (how site resources are organized and displayed). This new site map prioritizes the secondary navigation items—donate, volunteer, projects, contact, and attend—that should make navigating the site a more intuitive experience.

 

Mid-Fidelity Prototype

Ahhh, yes! We've got some beautiful plans laid! Now it's time for a mid-fidelity prototype. And with a mid-fi prototype, guess what else we can do? Usability tests!

Midfi.png
Usability Tests

After thoroughly sketching and wireframing, we arrived at a mid fidelity prototype that we could test on users. 

Tasks​

•Fiddle with the prototype. What activities can you do with this application?

•You want to volunteer with Code for PDX. Show me how you’d find what you're looking for.

Questions

•How easy was it to sign-up for a volunteer project?

 

•At any point did you feel confused, or hesitant?

•Is there anything that stood out to you as really terrific, or really bad?

•Is there anything that I did not address that you’d like to mention?

 

Next Steps​

There are certain features that fell outside of the scope of this sprint that we’d like to encourage BAMC to pursue in the future:

Usability Tests

User input has been vital to this project, and it will continue to be. I have begun scheduling usability testing so that I can move onto designing a high fidelity prototype.

High Fidelity Prototype

 

To truly gauge how well a user will engage with my redesign of the CFPDX site, it needs to be as immersive as possible. Working closely with the development team, I am focused on creating a product that will surpass its predecessor.

Design Hand-off

While I am focused on working hand in hand with develop, I am also prepping the dev team for when I hand off the project, so that they needn't rely on me. This includes using components and using thorough documentation.

 

Conclusion

As an ongoing project, I look forward to the insights, challenges, twists and turns that this redesign presents.