I'm
Responsive Website redesign for a local Chicago non-profit.
GirlForward is a non-profit in Chicago, IL and Austin, TX. Their mission is to be a community of support dedicated to creating and enhancing opportunities for girls who have been displaced globally by conflict and persecution. GirlForward resonated with our team, as we are a part of a diverse and multicultural country and want to support refugees searching for a home. We believe our efforts can help GirlForward grow and guide these refugees to a safe place in our community.
The plan is to observe the current site, research, develop, and propose a redesign for the GirlForward website and mobile experience. We aim to provide an effortless and satisfying user experience by improving the site navigation, showcasing the girls’ stories that demonstrate the GirlForward’s impact, and creating more opportunities to grow their community of donors and volunteers.
The first step is analyzing the current GirlForward website. I wanted to pinpoint areas of improvement. First, I noticed that it did not say “GirlForward”. The circle “gf” logo is not informative enough for newcomers, and it is very important to know who you are.
1. Find details on how much money it takes to help the girls.
2. Find requirements and information to apply for tutoring
3. Read about someone in the program
The first objective is observing how users currently navigate the current site, so we can improve the speed at which users navigate the same tasks on our prototype. We conducted user tests with 3 participants.
Key Takeaways• Users found the donate button clear and often, but did not find where the money went or what dividends specifically help the girls.
• Users demonstrated confusion between “ways to give” and “get involved” in the navigation. They also did not find a call to action button to submit their information to volunteer.
• Users found the “Meet Grace” category to be odd. They learned that Grace is a refugee in the program.
We conducted analysis of the websites of 3 large, non-profit organizations. We chose to observe well-known non-profits, so we can see what unique values they bring, where they provide a leg up, and if any drawbacks exist.
Advantages
• Shares stories with supplementing images of patients create emotions towards the children
• A large number of ways to donate
Disadvantages
• No way to engage other than money donations, so there are people who may be willing to engage who can’t.
• Wealth of information, hard to find exactly what you are looking for.
Advantages
• Website is clear and easy to navigate
• Able to help in many ways: donate time, money, fundraising, etc.
Disadvantages
• No clear way to get in contact with someone from the organization
• The personal stories are scattered about the website and not found in one place
Advantages
• The organization impact and how they use the funding is immediately available on the homepage.
• The hero image is an emotional call to action with obvious donation button
Disadvantages
• The Contact Us section should be easier to find
• Overall the website is clear, but design looks dated
I wanted to dive deeper into the successes of St. Jude, specifically by analyzing their website further. I observed many “donation” call to actions. Engaging patient highlights and captivating pictures which pull on the emotion strings. There is explanation of how you donation helps children. Everything is clear and concise, easy to pick up information at a glance.
We wanted to learn more about why and how people decide to donate or volunteer at an organization. The most efficient way was to conduct a Google Form Survey.
Survey Details:
18 Questions
80 Responses
64% Aged 25-34
65% Women
Key points that will lead us to success:
• Social media presence must be present on the site to help show current activity
• Personal stories need to be showcased
• Give equal importance to donating money and volunteering time.
We conducted interviews through Zoom with 3 women who have valuable experience with non-profits for at least 5 years. Their professional background helped us better understand how organizations fundraise effectively, build a community of support, and motivate engagement. They emphasized the importance of transparency to show donors the direct impact of their support and earn their trust.
“Community-based organizations stand out the most because you can really see the direct impact of your support.”
– Lorena Palacios
Masters + 5 years in non-profit
“People tend to be involved with issues in their community; it is visual and personal. It makes them more aware and want to do something about it.”
– Ally Levine
Bachelors + 6 years in non-profit
“Personal relationships inspire people to donate - and bring in trust in the organization.”
– Lizette Villarreal
Bachelors + 7 years in non-profit
We were delighted to connect, via Zoom, with GirlForward representatives. We spoke to the communications manager, a communications intern, and a program manager. Our timing couldn’t be better: GirlForward stated they are actually looking to redesign their site. We learned about their current processes and a wishlist for their new site.
GirlForward's Objectives:
• Highlighting girls’ stories
• Making donation options more obvious
• Easier ways to spread the word about GirlForward
• Visual changes to the site
• 21, Single
• Student studying Social Work
• Lives alone in Chicago, IL
User Insight
Maria, an introverted social work student, wants to connect and give back to her community while gaining relevant experience toward her degree.
User Scenario
• She is a daughter of Guatemalan immigrants and has a soft spot in her heart for social causes that help immigrant and refugee communities.
• For personal and professional reasons, Maria wants to get involved with a nonprofit organization.
• Maria finds GirlForward! She wants to help but doesn’t know how. Applications to be a mentor or tutor are closed.
• She doesn’t have much to donate.
Motivations
• Wants to be more outgoing
• To make an impact in her community
• Empathize with immigrants feeling out of place
Goals
• To make an impact in her community
• Find a program that is flexible on time to volunteer
• Empower women
• Wanting to be a social worker, she needs to increase her confidence and social skills
Pain Points
• Is very introverted, needs to get more comfortable working with people
• On a strict budget, doesn’t have extra money to give
• Struggles adjusting to change
Our user testing on the current site made it clear that the site’s information architecture needed to be reorganized.
Using Optimal Workshop, we created an online, open card sort with various people. 6 out of 14 participants completed the card sorting which took an average of 18 minutes.
The results were our guide to restructure the navigation and clean up the verbiage for a more intuitive user experience.
The card sort results helped us arrive at our main points of navigation and secondary categories. This updated site map is straight forward, combining donations, activities and volunteer opportunities under “Get Involved”. We learned from interviews that it is best practice to have multiple donate call to actions, so we will have “Donate” and “Volunteer” buttons very obvious for the user, in addition to the nav bar and footer.
Having knowledge from interviews and surveys in mind, our team brainstormed with the “I Like, I Wish, What If” Method. We dot voted, then organized items on a Feature Prioritization Matrix to help narrow down ideas.
Areas of focus:
• increased transparency on funding
• accept applications all year long to volunteer
• multiple ways to get involved
• rewarding engagement through shareable digital badges
Using the mobile-first approach, Sophia and I took lead on wireframe sketches.
Our sketches worked out ideas on navigation and donation pages. We also focused on ways to create personal connections with GirlForward.
We focused time in building and testing lo-fi prototypes so we could work through potential problems, saving time in the long run. For our first tests, we asked 6 users to navigate our mobile prototype for 3 three tasks, all focused on increasing engagement with Girl Forward. We conducted most tests through zoom, taking turns being the moderator or observing and taking notes.
1. Donate money to GirlForward.
2. Apply to be a mentor for the girls.
3. Read a story about one the girls in the program and share it to social media.
Donation: Users moved smoothly through the process, however 50% were confused by the “Employee Match” section. They complimented the badge to share after they donated, and they liked the confirmation of amount and frequency.
Mentor: Users were only successful 33% of the time, as they did not quickly understand that volunteering “time” would lead them to mentorship. We should just add mentor as a tab.
Stories: There was perfect success of users finding stories, but they found the page itself to be disorganized. Some overlooked the share button. We can clean up this design in mid-fi prototypes.
Another aspect we were focused on during low-fidelity user tests was the placement of the “Donate” and “Volunteer” buttons. It is important to make it the most convenient and easy way for users to donate or volunteer with GirlForward.
During our 6 user tests, 3 were given Version A, and 3 were tested on Version B. A key difference is when users scrolled on Version A, the buttons went away, where Version B stayed in place on the side.
Version B proved to give users more convenient access, because users resorted to using the dropdown menu on Version A most of the time.
Taking into account the pain points of the low-fi user tests, we iterated to a cleaner prototype in Figma. We moved the call to action tabs from the left to the right side of the screen to keep them within thumb-range, since most people are right-handed. We conducted three user tests, who were asked to perform the same tasks.
1. Donate money to GirlForward.
2. Apply to be a mentor for the girls.
3. Read a story about one of the girls in the program and share it to social media.
• Users were pleased to see what amounts can help on the splash donation page, however they wanted to click on those amounts to start the donation process.
• 100% success and ease for users applying to be a mentor
• Positive feedback having multiple badges to choose from and share.
• Users were looking for a share button at the bottom of Grace's story
• Once a user shared the story, it brought them back to the homepage, however the user said that they were not finished reading the story
Sophia and I took lead on stylizing the new look for GirlForward’s refresh. First, a mood board was built using InVision and we moved to Figma to create our Style Guide.
We wanted to honor Girl Forward’s brand by keeping their teal color from their logo, but we wanted to expand further. We learned from the interview with GirlForward that they hired an artist to create illustrations of the girls and other elements throughout their site. We leaned into that artistic bend of the illustrations already featured on the site. We aimed to have a papery/scrapbook feel to celebrate girlhood, confidence, and positivity. The flowers hold feminine qualities that also represents growth that these girls achieve within this program.
We made proper iterations that we learned from snags in user tests, and using elements from our Style Guide to bring the prototype to life.
With successfully designing mobile first, I moved into the expanded design for the Web. In particular, I wanted the navigation to relate to one another, even though it is a totally different format.
I wanted to create something fun and informative for the hero section. The sections are same as the mobile hero, however I had lots more real estate to work with on the web.
Hero sections are wonderful to showcase multiple aspects of GirlForward. There are 5 call to action areas, plus two images for an overall active visual. The 3 main sections can be seen at the same time, but 1 is larger to read more and reveal call to action buttons. The user knows you can click to view more sections with a highlight while in the hover state.
• Captivate the user with exciting pictures of the girls.
• Provide the user with Call to Action buttons to start learning more about GirlForward
• The user stays engaged and around longer exploring on the homepage
You may have noticed a profile icon in the upper left of our prototypes, this is GirlForward Community. We would love to introduce a closed community where girls in the program, alumni, mentors, and tutors can connect. Like a Facebook group, this could be an excellent place to ask questions, share life updates with each other, reach out for help to trusted allies, and more.
For everyone’s safety, only people within the GirlForward organization would be a part of this, approved by admin.
This project was truly a collaborative effort. We found our strengths and delegated responsibly and efficiently. We are really proud of our result.
I usually gravitate to leading the visuals, but I wanted Sofia to guide the vision, starting with the mood board. I loved her vision and supported her during development, using her looks, and building upon them. I was happy to assist with organization, add motion to the hero and add my touches where needed.
This being the first time working with non-profits, I found the interviews with industry professionals to be the most helpful. We had better understanding and knowledge on ways to set GirlForward up for success. As a result, when the user explores the site, we want them to be able to quickly donate, advocate or get involved.
A super rewarding moment of this project was that we had a followup meeting with GirlForward to present our research and findings. They were blown away with the depth of research we offered and they loved the look visual changes. Unfortunately, it would be a huge changeover to be able to implement everything we presented.
The first area that they took our advice is with the primary navigation. Instead of having “Meet Grace” as part of their nav bar, they changed it to “Our Stories”.
Secondly, they also made it easy to contact them with a newly added page “ Girls Join GirlForward”. On this page, it explains how to get involved, and there are buttons that lead you to a google form that is offered all year long!
We hope that for future website edits, they can refer to our findings to make it easier for them.
I hope you enjoyed reading this case study as much as I loved working on it.
