HarlemGrown
Expanding the nonprofit’s reach through a new sign-up flow and site redesign.
Click image for prototype.
Style Guide.
A new style guide was created to bring a youthful, kid-friendly aesthetic to the site. The current site is mostly grayscale, so adding color and the images provided by Harlem Grown brought life to the UI.
Overview.
Harlem Grown is an independent, non-profit organization whose mission is to inspire youth to lead healthy and ambitious lives through mentorship and hands-on education in urban farming, sustainability, and nutrition. Founded in 2011, they operate local urban farms and increase access to and knowledge of healthy food for Harlem residents.
The Problem.
Their sign-up process for farm tours and volunteering involved a lot of Google forms and a clunky user experience for both people wanting to visit Harlem Grown’s gardens, and for the Harlem Grown employees tasked with keeping up with all the forms.
The information that users were seeking out was spread out across social media outlets, proving hard to find during usability testing.
Finally, the Chief of Staff, Maisha, wanted the site aesthetic to look more youthful and kid-friendly to reflect the great work that the organization does for Harlem youth.
• How might we encourage people to sign up for farm tours and programs by having the process be as actionable and easy as possible?
• How might we use the existing resources of Harlem Grown’s social media, and embed it on their site in a way that makes the main website feel like the hub for all of the various resources?
• How might we make all HG information cohesive on the website, instead of bits and pieces scattered throughout the social media platforms?
The Solution.
Streamline user sign-up process to keep users on the site instead of navigating away to a confusing Google form.
Change the information architecture of their site to include missing pieces of information that was spread out across social media.
Create a new style guide that reflects a youthful organization.
Results.
Increased success rate of farm tour and program sign up
Successfully decreased number of steps to sign up for a farm tour from 26 to 5
Created a library to house all prerecorded/on-demand videos so that users do not have to search outside of the website
My Role.
UX Designer: Research, Interviews, Analyses, Wire Frames, Information Architecture, Prototyping, Usability Test
Lead Visual Designer
The Team.
I worked with 2 other UX Designers throughout a 4 week design sprint.
Tools.
Figma
Whimsical - remote collaboration tool
Optimal Workshop - virtual card sorting tool
Adobe Illustrator
Project Goals:
Streamline sign-up process
Create a youthful, kid-friendly aesthetic
Consolidate all program, tour and volunteer info onto the website
Research.
To supplement and confirm the information provided to us by Harlem Grown’s Chief of Staff, my team and I gathered insights from a competitive analysis, usability tests, and interviews with teachers, parents, and program organizers.
Methods:
Task analysis
3 Usability Tests
Insights:
Users are unable to complete any tasks on the site without emailing or calling the organization directly.
There are no obvious CTA’s on the site.
Users are consistently led away from the site to find information, sign up for programs, or watch HG’s educational videos.
It took 26 steps to sign up for a live virtual or in-person program.
Method:
Competitive Analysis
Insights:
COVID-19 related help and updated information should be clear and obvious.
YouTube and Facebook videos should be embedded on the site.
A map can show their area of impact and show users where their farms are located.
Method:
Interviews
Insights:
We interviewed 8 parents, teachers, or program organizers.
Pictures and testimonials from past participants would help build trust in the organization.
Users expect sign-up processes to be stressful, so a streamlined process with simple prompts and fields to fill in is appreciated.
Users would rather have all the info they are looking for on the website instead of social media.
Parents want quick and simple ways to directly contact the organization if they can’t find what they’re looking for on their site.
They appreciate concise information, not text-heavy because their time is limited.
Persona.
Anna was created based on the data we gathered from the interviews and usability tests of the current site. We continuously referred to Anna to guide our design decisions to ensure we were consistent in designing with the user in mind.
Journey Map.
To further identify the pain points, I created a journey map to show emotional journey of Anna during the current sign up process.
This map was presented to the stakeholder to show where the user was getting frustrated and the specific pain points in the process that we would later fix.
Defining the Problem
Anna feels overwhelmed when trying to find a community-based educational activity because the online resources available are confusing, have long registration processes, and take significant time to verify their legitimacy.
After talking more with our main point of contact, the Chief of Staff at Harlem Grown, we learned that the organization decided to pause all in-person programming, except for offering farm tours to small groups.
We decided to shift our focus to farm tour sign-up, donations, and volunteering to best help the organization during the COVID-19 pandemic.
There was a lot of missing information on the current state of educational programs on their website, so we decided to implement a specific COVID-19 message that lets users know about the programming pause.
Current User Flow.
Usability testing and interview data showed that users would rather stay on the HG site to complete the task than have to open a new tab. Users were looking for the gratification of completing a sign-up task instead of waiting on a response or confirmation.
During some usability tests, participants had 3-4 tabs open while trying to find the information they were looking for and sign up. My team and I aimed to eliminate that lengthy process by creating a sign-up flow within the site.
Solution.
We proposed a new user flow that would keep users on the site with a streamlined registration process that doesn’t require emailing or calling the organization to request a sign up.
From here, users would be able to sign up for a tour and receive a confirmation message after filling out a form to indicate that their tour request was received. The forms below overlay the website so that users do not need to navigate away to an email or Google form to easily sign up for a tour on the site.
New Sign Up Flow.
Our solution to streamline the user sign-up process to keep users on the site instead of navigating away to a confusing Google form came to fruition in our high fidelity prototype. The new sign-up flow:
Gives users bite-size bits of information at a time so they don’t miss any important details
Keeps users on the site by giving them a pop-up instead of a new tab
Offers users a confirmation message to let them know that their request has been received, instead of them having to email someone at the nonprofit and wait on a response.
Design Studio.
With our goals and processes in mind, my team and I started sketching out different ideas to explore adding more CTA’s, breaking up chunks of text with more images, and reworking the global navigation. Those sketches were refined and turned into our low fidelity prototype.
But does it work?
We conducted 4 usability tests of the low fidelity prototype to ensure key functionality and spacing before moving into the high fidelity design.
The grayscale design allowed users to focus more on the functionality of the website instead of getting distracted by color, pictures, and font choices. Although, the main feedback was, ‘I really want to see pictures!’. Alas, we discovered some important changes to make to the design before adding pizzaz, like increasing the text size, limiting negative space, and renaming parts of the global navigation.
High Fidelity.
Final Thoughts.
Our client was really happy with the redesign. We addressed each of the goals that she wanted to focus on and came out with a simplified scheduling process that eliminates the need for excessive forms. The changing landscape of the pandemic made getting all the necessary information difficult as the organization works to find new ways to help their community. However, given the research we were able to conduct and the time we had, I’m happy I was able to help out a nonprofit that’s doing such amazing work in their tight-knit community of Harlem.