Code for PDX
Making tech-philanthropy easier.
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
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.
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:
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.
Using a single page site for a launching pad is a great way to get volunteers to navigate quickly and purposefully through a site.
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.
CFPDX clearly has plenty of great qualities, and to let them shine, we need to address their shortcomings.
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.
The copy on the BAMC site is sometimes unclear, further confusing users.
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!
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.
From my research user research, I created the persona of Rosie.
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.
•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
• 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 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.
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?
With some strong problem statements and how-might-we statements in place, we can confidently move into design!
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.
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!
After thoroughly sketching and wireframing, we arrived at a mid fidelity prototype that we could test on users.
•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.
•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?
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:
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.
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.
As an ongoing project, I look forward to the insights, challenges, twists and turns that this redesign presents.