Girl Power USA
Building a website that bridges the gap between donors and those in need.
When the idea for Girl Power USA, a nonprofit organization, based in the USA, dedicated to empowering youth came up in early 2022, we needed a website with the aim to get more people to donate, contribute, and join our community. Soon, we realized that we need to do brand building (showcase our areas of work and our organization) and find a way to provide an option to donate to specific causes without having to pick from a lot of options.
​
This case study proposes our approach to conceptualizing the entire website, bringing designers, content writers, developers, and project managers together, while maintaining Girl Power USA’s simplicity and balancing diverse stakeholder needs.
Roles
I assumed the following roles designing this website:
-
User Experience (UX) Designer
-
Interaction (IxD) Designer
-
User Interface (UI) Designer
-
Visual Designer
Deliverables
Interaction Design: High-fidelity interactive prototypes for key tasks on desktop, and mobile
UX/UI Design:
-
Research
-
Competitive analysis
-
User surveys and one-on-one interviews
-
Site map
-
Personas
-
UI kit
-
Low-fidelity wireframes
-
High-fidelity mockups and prototypes
-
Usability tests and findings
Project Specifications
Duration: Following a 3-month initial launch, we continued to enhance the project and add pages in the subsequent months.
Tools:
-
Figma
-
Fig Jam
-
Photoshop
-
Illustrator
Overview
In mid-2022, Girl Power Talk proposed the creation of Girl Power USA, a nonprofit organization. We needed to set a portal through which we could change lives of underprivileged youth and their communities through our social impact initiatives. The primary objective of this UX design project was to inform users about the organization's work and encourage donations and contributions for our various global projects.
Problems arose, however, when we tried balancing diverse stakeholders' needs. We needed to know how we can bring the donors, volunteers, sponsors, and collaborators to one place and effectively communicate the organization's tangible activities and goals in a more comprehensible manner, along with articulating why supporting the mission is worthwhile. A low percentage of visitors would mean a low rate of donations.
Even if users were able to land on our website, they needed to feel an emotional connection with our vision and get ready to contribute. This process had to be smooth for all our stakeholders.
It quickly became clear that maintaining brand consistency was also an issue. We wanted to keep the creative aspect of Girl Power Talk and refresh the look and feel of the website but at the same time, we did not want to overwhelm the users with too much information.
Overview
In mid-2022, Girl Power Talk proposed the creation of Girl Power USA, a nonprofit organization. We needed to set a portal through which we could change lives of underprivileged youth and their communities through our social impact initiatives. The primary objective of this UX design project was to inform users about the organization's work and encourage donations and contributions for our various global projects.
Problems arose, however, when we tried balancing diverse stakeholders' needs. We needed to know how we can bring the donors, volunteers, sponsors, and collaborators to one place and effectively communicate the organization's tangible activities and goals in a more comprehensible manner, along with articulating why supporting the mission is worthwhile. A low percentage of visitors would mean a low rate of donations.
Even if users were able to land on our website, they needed to feel an emotional connection with our vision and get ready to contribute. This process had to be smooth for all our stakeholders.
It quickly became clear that maintaining brand consistency was also an issue. We wanted to keep the creative aspect of Girl Power Talk and refresh the look and feel of the website but at the same time, we did not want to overwhelm the users with too much information.
Problem Space
These are the three major pain points:
-
Finding a simple and intuitive process for Girl Power USA users to donate, and provide them an easier navigation experience.
-
Creating a website that displays authenticity and builds trust and social proof of the organization.
-
Maintain brand consistency with Girl PowerTalk and showcase people the extensive work we are doing without overwhelming them.
Design Approach
Focusing on Goals
-
Design a user-friendly website by prioritizing information and clear Call-to-Action (CTA).
-
Explain what is being done with the money donated and what benefits this will have for the organization and its mission
-
Design a website that captures the unique branding of Girl Power Talk. As well as interactively and smoothly display our work and collaborations.
Started from Scratch
.jpeg)
Brainstorm Session
Discovery and Research
What does 'Donation' mean to you?
I began my research with a competitive analysis to study how other nonprofit organizations' websites, such as United Way, Feeding America, Nanhi Kali, and Smile Foundation, are approaching similar problems. I researched on what users look for on non-profit websites when it comes to donations. I also wanted to find out website trends and take inspiration from competitors. I conducted secondary research to get insight about why users don't get involved much in social donations. We researched information and psychological facts.
My research encompassed:
-
What kind of factors will make the causes stand out?
-
What are the users’ expectations?
-
How much are they willing to donate?
-
How often do they (users) donate?
-
How do they perceive online donation and transaction?
While the significant points we found out were similar, user surveys helped me further understand what donation-related information is most important to the donors, so I could prioritize it. User Survey Link: Here
Based on 122 Responses
.png)
people only donate
Educational Charities are the most donated category
Mostly they are willing to donate between $5-$10
.png)
Reasons for most donations? To provide for the Shelter for homeless and help someone I know
Possible solutions to better understand and build trust would be:
-
Clearly articulate the vision and mission, making them easily accessible.
-
Showcase our projects, success stories, and existing members as evidence of activity and impact.
-
Provide direct contact options for any questions users may have.
-
Include statistical information to enhance credibility and highlight achievements.
-
Place a noticeable call-to-action in the header section to capture users' attention.
-
Use visual aid icons and service breakdowns to guide users to their respective areas of interest.
-
Emphasize the option to donate to specific causes, a significant motivator.
-
Establish an emotional connection through a cohesive design, maintaining a consistent visual identity as Girl Power Talk.
One of our goals is making Girl Power USA website reach more users, who commit to make donations and help the underprivileged youth in need.
Hence, our objective became:
.png){kind=small}
“To design a website that would interactively and in a user-friendly way display our concrete projects, collaborations, and facilitate easy donations. All the while, maintain the unique branding of Girl Power Talk and subtly cater to the audience of Girl Power USA."
Deepening User Empathy
We believe that our primary users are donors who wish to donate to Girl Power USA and our secondary users are the volunteers and collaborators who have the passion to serve the organization.
I thought it was important to make sure our project resonated with our wide (global audience), so I created two personas. These were based on information gathered from our user surveys and interviews, along with official demographic data. These personas became important reference points for guiding our design decisions moving forward. For both “Sara” and “Jake”:
​
-
Our personas are solely focused on people who are more inclined to donate and prefer to get involved and come together to help our cause
-
They may be college students who want to volunteer for our cause
-
English may be their first language
-
Median age is mid- to late-30s, but can skew older
​
Equipped with insights into how individuals perceive donating and volunteering for Girl Power USA, I found it crucial to distinguish between two key personas shaping design decisions: the Donor and the Volunteer.
By outlining the qualitative aspects of those interested in contributing financially versus those contributing through effort, it enabled a clearer understanding of how the design should cater to both. Likewise, crafting a donor persona inclined to give money, as distinct from a volunteer seeking to raise funds, highlighted the diverse considerations that needed attention.
%20for%20Girl%20Power%20USA.png)
%20for%20Girl%20Power%20USA.png)
"I'm passionate about making a difference in causes close to my heart, even amidst a busy life."
Defining Important Tasks
Feedback from users highlighted a preference for a task flow for quickly scanning through our projects on the landing page and easily accessing the necessary information for making a donation, all within a few clicks from the Girl Power USA landing page. This streamlined and straightforward journey was designed based on their input.
Another task flow caters to collaborators and students seeking more information about our organization or wishing to apply to our Youth Power USA flagship program. The aim is to enable them to navigate to the relevant pages and proceed with their intended actions.
Analyzing the journey maps for two personas and their usual tasks, I discovered crucial emotional and procedural moments that required attention from Girl Power USA. For instance, addressing uncertainties individuals might experience when donating to a cause they don't resonate with or when facing trust issues regarding how their contributions will be utilized. Additionally, facilitating user contributions and volunteering, especially when users are uncertain about the process, became a priority. To maintain the website's credibility and seamless operation, I focused on resolving these challenges without introducing new barriers.
.png)
(Click to enlarge)
(Click to enlarge)
Building a Framework for Design
Handling financial transactions, even on a small scale, can cause anxiety. How information is presented and paths are defined can impact whether users abandon a donation opportunity. Therefore, in advancing the design, it was crucial to stick with a flat site structure to minimize disruption.
After the initial work of gathering, analyzing, and organizing content, the challenge arose in placing them on the website. Content accessibility and discoverability became significant, especially when aiming to showcase our extensive social impact work.
Our main priorities included:
​
-
Building our brand by highlighting our areas of work and our organization.
-
Facilitating online donations.
-
Generating leads through newsletter sign-ups.
Creating Site Map for Girl Power USA
Visualizing a User-Centric Experience
Through several rounds of quick sketches on paper, I encountered the challenge of keeping essential tasks simple and at a single level. This exercise was crucial in understanding the implementation of features within Girl Power USA and how users would navigate between screens. It also allowed me to explore design patterns common among non-profit organizations in the competitive landscape, guiding decisions on elements to include in Girl Power USA for user familiarity.
​
To improve clarity and facilitate quicker understanding, I introduced sections with clear titles and accompanying illustrations, pictures, or videos, aiming to capture more attention from users.
Girl Power USA Sketches
Wireframing the solution
Working in black and white helped me uncover problems with scale and information hierarchy. Low-fidelity prototype testing allowed me to better understand how users expected to complete the tasks I was focusing on. I knew which adjustments needed to be made to lay the foundation for a more fully realized high fidelity prototype. Small adjustments I made were:
-
Added a clear call-to-action on every page to encourage donation. The Donate button was also made prominent in the sticky Menu bar.
​
-
Earlier, projects were placed relatively low on the page. Since this information is essential, it was important to highlight it more. To ensure that as many visitors as possible know about the specific projects of Girl Power USA, I positioned the corresponding text block more to the top of the page.
-
Through a horizontal distribution, the three activities - Collaborate, Donate, and Sponsor can be viewed more quickly and are easy to navigate.
-
On the individual project pages, detailed information such as objectives, purpose, vision, and their stats are arranged in order.
-
Placed the donation form at the top of each project page for directing the donors to donate for the cause.
-
Designing the donation form as a multistep-form so that users are not overwhelmed with the mass of fields. The form is subdivided into the two areas "information about the donation amount" and "personal data".
.jpeg)
Creating Low-Fidelity Screens
Clarifying Visual Design
Girl Power Talk had guidelines for user experience covering color, typography, grids, and photography. We aimed to subtly connect Girl Power Talk’s existing users with Girl Power USA by maintaining brand consistency. Our goal was to refresh the look without overwhelming users with excessive information and design styles.
The design incorporated Girl Power Talk's brand colors into the logo and featured on-the-ground work images. I expanded the existing UI kit, emphasizing core elements like the primary red palette, CTAs, and a responsive grid.
While sticking to the current UI, I made specific adjustments. This involved refining typographic hierarchy, modifying elements, and form components, providing detailed grid specifications, and adopting a thoughtful approach to iconography. These changes aimed to enhance user experience without introducing unnecessary complexity.
.png)
Girl Power USA UI Kit
Understanding What Works and What Doesn’t Through High-Fidelity Prototype Testing
The design process transformed a low-fidelity wireframe into a modern, responsive, and interactive website.
High-fidelity prototypes were used to test key user tasks identified in the research. The full application of the UI revealed that, although tasks remained straightforward, some elements needed reconsideration. Initially redirecting users to Girl Power Talk’s About page, we later realized the importance of a dedicated About Page for Girl Power USA. Additionally, we recognized the need to include the Youth Power USA section on the homepage.
A crucial aspect was addressing trust in online donations and making the process more transparent. To achieve this, we designed features that showcased the organization's authenticity and provided social proof, including a stats section at the top, testimonials, and an invitation to engage with Girl Power USA’s team through dynamic monthly Zoom sessions.
Figma high-fidelity screens
Testing With Users
I collaborated closely with our Development Team to define tasks, set objectives, and assess the responsiveness of the website. We chose to use a real build, which revealed functional instability in the website. While addressing bugs and crashes, we identified usability issues related to layout and information hierarchy.
Testing with our employees
Summary
When we came up with the idea for Girl Power USA, we knew that we needed a platform that accounted for information clarity and ensured a simple and intuitive process for Girl Power USA users to donate, and contribute. As a result, the idea was to not overwhelm the users with vast amounts of information and seek emotional connection with us through a consistent visual identity as Girl Power Talk.
By understanding who the users are, and what problems they could be having, I was able to design a website for Girl Power USA to help users donate smoothly and volunteers to reach out to us in just a few clicks.
​
The relative importance of prioritizing information and highlighting the projects we undertake came in the research and testing. This informed an optimized landing page and other projects and donation pages that meet our goals today.
Next Steps
Revisiting the entire donation and collaboration cycle on a micro level, with a focus on framing, naming, and describing the process, stands out as a high priority for my next steps. Additionally, I would pay greater attention to showcasing the impact of volunteer efforts, ensuring volunteers understand the positive difference they make in improving the lives of those in need. Once a sufficient number of sponsors are secured for Girl Power USA, I would prioritize enhancing the sponsorship page and creating individual sponsor pages for detailed information.
Simplifying the design is another key aspect. Continuous iteration throughout the year led to challenges in design consistency, with new pages being added over time. If I were to start the project anew, I would concentrate on establishing a cohesive tone for the entire website, avoiding the previous approach of adjusting the design based on individual page needs.
Lessons Learned
This entire journey emphasized the importance of listening to our users.
-
Design is an ongoing process of refining the experience for the end user. Continuously seek ways to gather and listen to your user's feedback.
-
We discovered that designing for accessibility goes beyond a simple checkbox; it involves a commitment to ensuring that everyone, regardless of demographic, can engage meaningfully.
-
In balancing our brand's creativity with clear, user-friendly design, we found that this harmony not only keeps users engaged but also strengthens the connection with them.
Read More of My Case Studies
iGuardian
Website Maintenence
DivaTales