My Roles:
User Research—Competitive Analysis, Usability Testing, Card sorting, A/B Preference Testing
UX Design—Sketches, Wireframing, Prototyping
UX Writing—Calls-to-Action, Copy Writing
Project Context:
Homepage Redesign—Volunteer project for a local charity.
March 2024-May 2024 (2 months)
Designed using Figma and Squarespace
A local charity in need of a homepage revamp.
THE CLIENT
Sunflower Seeds Ukraine (SFSU) is a nonprofit organization based in Boulder, Colorado, dedicated to saving lives in Ukraine by providing medical aid, protective gear for defenders, and humanitarian assistance to civilians. Since February 2022, the charity has raised over $775,000 and shipped approximately 33,000 military and humanitarian aid items to the front lines in eastern Ukraine, assisting more than 6,678 Ukrainian defenders. SFSU continues its efforts to raise funds and awareness across Colorado through various charitable events and campaigns.
Charity owners noticed a clear decline in volunteers & donations.
THE PROBLEM
The existing homepage needed to be updated and de-cluttered, the colors were overwhelmingly bright, and the pages were difficult to navigate.
So…
An intuitive homepage with a modern feel and a clear purpose.
THE SOLUTION
3 charities, same initiative.
FINDING INSPIRATION
To find inspiration, I analyzed the websites of 2 well-known Ukrainian charities, Nova Ukraine and Razom for Ukraine. From my analysis of these websites, I took note of the following:
STAKEHOLDER INTERVIEW
Defining “success.”
To create a website that would meet the charity’s and its users' needs, I reached out to charity founder, Andriy, to ask him the following questions:
What are the charity's short and long-term goals? What is your mission?
Is there any existing research about the website’s analytics, your users, or your website’s design? If so, would you be willing to share that data with me to aid in my research?
Tell me about the people who usually use your website. Who is your target audience?
Where are your users from? What languages does the website need to be accessible in?
Are there features or functions of the current website that you want to keep?
What information needs to be on the homepage?
Is there a timeline I need to adhere to for this project? If so, please specify.
Asking the right questions for improvement.
USER TESTING
I conducted a preliminary, remote-moderated usability test with 5 participants via Zoom to identify existing friction points. Participants were asked to complete the following tasks and think out loud:
You would like to donate to Sunflower Seeds Ukraine, but before you do, you’d like to know their goals, what services they provide, to whom, and where your funds will be allocated. Navigate the website to find this information.
You have a soft spot for animals in need and recently heard about the influx of abandoned pets in Ukraine due to the war. Navigate the website and find where to donate to provide food, shelter, and medical care to abandoned pets in Ukraine.
Congratulations! You’ve just retired and found yourself with plenty of extra time on your hands. You decide you’d like to volunteer your time to help at a local fundraising event for Sunflower Seeds Ukraine. Navigate the website and sign up to volunteer!
Task List (English speakers):
To comply with the language requirement specified in my stakeholder interview with Andriy, I ensured that 2 of the 5 participants I tested were native Ukrainian speakers. Native Ukrainian speakers were given the following extra tasks to test whether the current homepage was accessible to Ukrainian defenders and residents with little to no fluency in English:
You are on the front lines and need tourniquets and other medical aid for your unit. Navigate the website and fill out the form to request help.
You are currently in Ukraine and heard about Sunflower Seeds Ukraine from your family member in Colorado. You would like to support the organization by donating and volunteering. Navigate the website to find instructions on how to donate via a Ukrainian bank and how to volunteer from Ukraine.
Task List (Ukranian speakers):
100% of my usability test participants experienced difficulty navigating the website.
AFFINITY MAPPING
Once I completed my usability tests, I organized the data into a rainbow spreadsheet, which I then converted into an affinity map. From the affinity map, I was able to compile 3 main findings into a simplified chart:
Once I finished prototyping the homepage using Figma, I began the task of transferring my design onto the charity’s Squarespace website. This is where I hit my first major roadblock.
Here are 2 main problems I faced, and what I did to get back on track:
Overcoming no-code website builder constraints.
SETBACKS & SOLUTIONS
3 major improvements to the SFSU homepage.
THE MAJOR IMPROVEMENTS
The fruits of my labor 🎉
FINAL SCREEN
Lessons learned & what I would do differently next time.
REFLECTIONS & NEXT STEPS
Less is more–Transparency is important, and for donation-seeking organizations in particular, it may be tempting to include as much information as possible on a website. However, too much information often overwhelms users, leading to cognitive overload and web page abandonment. Realizing this early on in the discover/empathize phase of the design process during competitor analysis gave me the insight to stick to a minimal design, particularly with the impact metric infographic.
A little grit goes a long way–If I am being completely honest, there were times during this project when I felt completely stuck and discouraged, particularly with CSS constraints. If I were to feel this way again during another project, I would remind myself “If you are having a certain CSS problem, likely, someone else is too.” More often than not, people in the design community and your teammates are willing to help. They may have even made resources to help you conquer your obstacles. The moral of the story is to persevere, ask for help when needed, and bounce back even stronger 💪.
Teamwork makes the dream work– Throughout this process, I have genuinely learned to love the feedback and critique of my teammates. Without the feedback and cooperation of the entire SFSU team, my growth as a UX designer, and this project would not have been possible. I would like to give special thanks to Becky, my fellow SFSU UX Designer/Copywriter, Daria, the SFSU Graphic Designer, and Sasha, who assisted me with English to Ukrainian translation and UX writing, and of course, charity founder Andriy for their tireless effort and contribution.
In the near future, I genuinely look forward to working more with the SFSU team on their website as needed and contributing to their life-saving initiatives in any way possible. I had a great time connecting with the SFSU team and their cause. Not to mention, the social media and International Volunteer Day shout-outs were extremely heartwarming 🙂