Recent Work
Recent Work
The Door: Make getting involved Easily Accessible
This case study details the responsive redesign & the improvement of the user experience when seeking to get involved with the organization
Research / Responsive Web / Concept
The Door's a nonprofit that relies heavily on outside contributions to execute its mission. As a result, it's vital they have a solid digital presence with all the key information.
My Role
Scrum Master | UX Researcher | UX Designer (Team of 3)
Challenge
Our team was hired to revise the Door’s current website to create solutions to any uncovered pain-points plaguing everyday charitable supporters. In two weeks, we had to produce responsive web designs, for desktop and mobile, and provide a seamlessly accessible experience for any user seeking to extend their support to the nonprofit.
Project Time
2 1/2 weeks
Tools
Figma | Miro | Zoom | Keynote | Google Forms | Zeplin
Methodologies
Screener Survey | User Interviews | Affinity Mapping | User Persona | Journey Mapping | Competitive Feature Analysis | Design Studio | Wireframes | Rapid Prototyping | Usability testing | Iterative design | Competitive Matrix | User Flows
Key Takeaway
Successful handoffs are a huge aspect when producing positive user experiences. The key to successful handoffs lives within open communication, clear organization, and a true understanding of how developers use assets. Being able to peek into developers’ world helps you grow as a designer.
Problem
Nonprofit organizations are always in need of help, and considering the current social climate, people are looking to support causes they believe in now more than ever.
However, people only want to support nonprofits they feel comfortable endorsing & feel are credible, which not all non-profits are. This raised the question of how charitable people determine if a nonprofit is worth supporting?
Reseach Told Us
To answer that question, the team needed to further understand the key factors influencing the decision to support a nonprofit, or not.
​
Seeking honest perspective 6 user interviews were held with indviduals actively involved with nonprofit organizations either through donating, volunteer work, advocacy, or a combination of the three.
Our Primary Research Goals:​
​
-
Discover the ways users were getting involved with nonprofit organizations.
-
Uncover the main factors that help users decide if the nonprofit is worth their support.
All interviews provided valuable insights about the pain points users experience during the process of connecting with nonprofits and what they value when researching them.
Key Information & resources should be easy to find.
Values compelling stories: helps to form an emotional connection.
A nonprofit's legitimacy & value is determined by its visible impact
Social media offers
updates on social causes & allows instant sharing
Dylan's World
Feeling empathetic with our new understanding of users' frustrations and needs, a persona was generated with those four insights serving as the foundation.
Dylan represents a host of people who enjoy giving back to credible nonprofit organizations with a proven mission and morals that align with hers. She wants to be able to connect with an organization on an emotional level and feel assured in her decision to extend support.
(Click to Enlarge)
Dylan's Journey
Needing a better visual picture of Dylan’s current experience learning more about The Door and extending support, a journey map was completed. Visualizing the journey highlighted key frustrations and pinpointed opportunity areas to answer those frustrations.
(Click to Enlarge)
Key Journey Points
1) Discover: Interested & eager to learn more about The Door & what they stand for.
​
2) Research: Wishing the organization’s current work was communicated using more visuals than words.
​
3) Research: Bothered by the lack of clickable content on the homepage and having to rely solely on the main navigation.
​
4) Support: Glad to have donated & relieved the process didn’t involve several steps.
​
5) Share: Excited to share the donation on social media for others to see & support as well.
Defining the Missing Link
Dylan wants to support credible youth development organizations that share compelling stories and provide visible evidence of its mission’s impact.
How might we enhance her ability to connect with the nonprofit’s mission and access key information that will help convince her to contribute?
Establishing Design Focus
To truly redesign effectively, zeroing in on the existing website's opportunity areas was vital.
Searching for that key information, usability testing was held to pinpoint any flaws in the site's accessibility and content structure.
Key Testing Result
Users struggled to locate how to get involved with the organization.
​
1) Users chose several different options in the navigation when searching.
​
2) Users were never fully sure if they had reached the correct landing page.
​
This key finding coupled with the frustrations uncovered during journey mapping, helped the team established goals we wanted the redesign to achieve, and identify design features to meet those goals.
.png)
The way to Get Involved in now in a centralized location increasing it accessibility
Add "Get Involved"
category to
main navigation
.png)
Users can see the nonprofit's mission & reach in action
& determine legitimacy
Add on homepage
"News Corner" &
"See Your Impact"
Sparks empathy within users & creates an emotional tie to the nonprofit's work
Instantly provide a
compelling story
Add "Faces of the Door" video
Provide a more visual impactful experience with access to clickable content
Balance out the amount of copy with quality visuals
Clickable
Carousel
Clearly share nonprofit's impact on community
WHY?
HOW?
WHY?
HOW?
HOW?
WHY?
WHY?
HOW?
Design Goal
Design Feature
Need Met
.png)
Make Getting Involved an intuitive process
Design
Usability Feedback
1) 100% of users successfully located & completed the volunteer form on the volunteer page.
​
2) Users felt the volunteer form was too long & should only consist of basic information.
Seeking a testable blueprint for mid-fidelity wireframes the team conducted a design studio aimed to:
​
1) Restructure the Homepage to implement the features just highlighted.
​
2) Create a Get Involved Page & a Volunteer Page to complete the user flow.
​
The lack of a centralized way to access all the ways to extend support to The Door was the biggest area of opportunity and therefore became the design priority.
“The process was pretty easy. If I knew I wanted to get involved, I would know exactly where to go on the website.”
User
Design UI
Moving into our high-fidelity mockups, the team made several cosmetic changes to declutter the homepage and address all opportunity areas discovered during usability testing for mid-fidelity.
Homepage Header
Homepage
Get Involved Page
Volunteer Page
“Overall, I thought the entire process was simple & the structure was organized and self-explanatory. I'm also glad the form was quick!”
User
Going Responsive
In designing for the mobile breakpoint, the team sought to maintain the layout’s structure, content readability, and visual impact. All content was scaled down to size, but still provided the same level of accessibility as desktop.
What's Next
Always seeking ways to grow & improve, here are the next steps the team would focus on to elevate the website’s design:
​
1. On the volunteer form, have users select the role they are interested in before selecting the potential program they want to facilitate that role in. The role is of more importance when filling out the form.
​
2. On the volunteer form, add an option for users to fill out an “Other” within the role section to further provide users the ability to choose.
​
3. Rename the “Membership” label in the primary navigation so that it specifically indicates that it is for the youth wanting to be a part of The Door. Throughout the research, some tested users indicated that it was confusing.
​
4. Include a link to the “Volunteer” page on each program page, so that users can have easy access to getting involved.
More Cases
.png)
PairGap
The Door
