UX/UI Design, User Research

Non-Profit Survey Redesign

Mock up of a laptop, iphone se, android showing a survey landing page

Surveys and the Mission

UpTogether, a non-profit in the realm of guaranteed income pilots, uses surveys to support their systems change work. The function of conducting surveys is to enable UpTogether to collect inclusive demographic data to support the organization’s mission to amplify the stories and experiences of undervalued communities, and to bolster policy expansion and funding opportunities.

Organization: UpTogether
Time: April 2022 - March 2024
Platform: Desktop and Mobile
Role: Lead designer, UX/UI, UX Research
Notes: The project had several stops and starts to accommodate changing roadmap, vendor changes, and the process of hiring a Survey Researcher. The final designs felt like the coming together of many projects, and their learnings.

Design Opportunity

During the 2020 pandemic, UpTogether's member-base and online platform grew quickly to meet the increased needs of low-income families and individuals in the United States. With it came a greater need for an updated survey system with greater usability that would be more engaging for users (their members.)

screenshot of a survey page
The original survey which had a layout lacked elements that would cause confusion and interfere with usability for users

How It Started:

How It's Going

Screenshot of a plain survey landing page with one questionscreenshot of a survey landing page featuring multuple survey options
The original survey landing page
The updated survey landing page

Research Goals

Heuristic Evaluation and Annotations

Screenshot of an excel sheet with heuristic scores
To evaluate areas of improvement we conducted an evaluation measuring nine areas of usability of the survey systems. Each area had a numerical score, which helped us determine which areas had the most opportunities for improvement. We then annotated screens in the survey flow identifying these opportunities.

Opportunities we identified included: designing with mobile first in mind as over 70% of the user base accesses UpTogther via mobile only, add a progress bar and length of survey, and increase color contrast on buttons to meet WCAG standards.

screenshots of survey questions with usability annotations in red
screenshots of survey heuristic annotations

Annotations on desktop and mobile survey screens noting areas that could cause confusion or are inaccessible.

Member (User) Stories

man avatar
I want to see, all in one place, available survey questions and any included incentives, or if a survey is a requirement to a fund I am involved in.
woman avatar
I want to be able to see a record of past surveys , if i have completed or uncompleted surveys, and upcoming surveys
woman avatar
I want to understand why I’m being asked to share information, what it will be used for, who it will be shared with.

Ideation

Sketches

The product team provided us with sketches that included information to prioritize in upcoming designs updates:
  • Show if surveys are optional or a required part of a fund members were participating in, and if the survey included compensation.
  • Include a record of previously completed surveys.
  • Information on why UpTogether, or partner organizations are asking members to complete surveys.
sketch of a possible survey landing page layout
sketch of a possible survey landing page layout
sketch of a possible survey landing page layout

Lo to Mid-fi Screens

  • Mobile and desktop experiences must be comparable.
  • How might small additions of illustrations and color make the platform feel friendlier and more inviting for members? 
  • What information needs to be shown? What can be placed within a second tab, or page?
screenshot of a workspace with many desktop and mobile survey landing page designs
Screens playing with different ways to present information.

Mid-Fi Mini-Prototype

While the organization deliberated over which survey vendor to move forward with, the UX team conducted a focus groups, experimented with prototype testing as exploratory research. We wanted to learn about member's their experiences. What did they find frustrating, or delightful? What were their experiences not only with UpTogether's surveys, but what were their experiences taking survey on other platforms? We use a mid-fi prototype to see how members would respond to a new layout.

  • In a focus group, users were asked about experiences with both UpTogerther’s Surveys, as well as any surveys they have taken outside of UpTogether.
  • 6 members of the focus group also went on to participate in a 30min user tests over zoom
mobile mockup of a mid fi prototype

Mini-Prototype Screens

This prototype featured a layout using cards to highlight upcoming surveys. Including information about each survey, who was conducting it, due dates, estimated task time, compensation status, as well as partner logos.
The survey flow added a previously missing informed consent page, detailing who would be conducting the survey (UpTogether, or a partner org) and why the data was being requested. A confirmation message upon survey completion was also added.

screenshot of prototype screens
Screenshot of the mini-prototype flow

Learnings

“ I think people are leery of [surveys] because the information goes into this black hole somewhere.”
-Focus group participant

Iteration

screenshot of multiple survey landing page designs

After a project pause, we were back!

We now knew which survey vendor we would be moving forward with. Using past research, and recent site updates, I made several new designs. After meeting with the product and engineering teams to discuss user needs, and development capacity. We were able to move forward.

High-Fi Screens

After receiving feedback from product and engineering, I made these designs. We did a quick round of 5 second user testing with 16 members to make sure areas we wanted to highlight were visibly higher in the information hierarchy.

For the empty states I altered some images from the www.storyset.com illustration library.
screenshot of high fi screens
Final screens.

Next Steps

elderly gentleman uses a laptop to take a survey
  • Future small updates to align the surveys and the platform with upcoming branding updates.
  • Follow up focus group to see how members receive the updates
  • Assess the need for further iterations based off of data analytics around survey completion rates, and any reports from the Support Teams regarding usability issues.

Thank you for reading!

If you like what you see and want to work together, get in touch!