World’s Children – Andrea Malone

World's Children

Using the design thinking framework to launch an engaging and action-inducing website.

Contact me about this project.

For the best viewing experience, this case study must be viewed on a desktop device.

In the meantime, you can explore this case study’s overview for a quick glimpse of my work.

Project Overview

Using the design thinking framework to launch an engaging and action-inducing website.

This project includes four out of the five design thinking framework phases, delivering a website that not only looks great but actively supports World’s Children’s goals.

How I used the design thinking approach:

Deep Dive into Competitors and Empathize with Users

The team started by getting to know World's Children's audience intimately through observational, quantitative, and qualitative research.

Define and Contextualize

Leveraging insights from Stage 1, I participated in crafting personas, a problem-solution matrix, and an outline of business goals to inform the design of a website that surpasses the current one.

Ideate

In this stage, we develop the foundation for their website, which includes a sitemap, task flow, and wireframes.

Prototype

I developed an enhanced brand identity and interface kit, hi-fi wireframes, and, finally, the prototype.

discovered PROBLEMs:

SOLUTIONs :

Keep reading

Project goals:

Simplify Navigation

Create an intuitive and responsive navigation system that's easy to use on any device.

Frictionless Donations

Create a smooth and user-friendly experience that encourages them to become heroes for children.

Focus on Impact Above the Fold

Capture attention with inspiring content and a clean, uncluttered design.

Storytelling and Hero's Journey

Showcase the stories of the children they help in a captivating way. Let donors see the difference they can make.

The Before

Details

World’s Children desired an updated website with intuitive navigation, elevated branding, and responsive design with an easy check-out process.

CLIENT NAME : World’s Children

PROJECT TYPE : UX/UI Design, Branding Development

TIMELINE : 6 months

TOOLS : FIGMA, Illustrator, Photoshop, WordPress, CSS, HTML, PHP

ROLES : UX Researcher, UI Designer, Developer

Quick Links

The Research phase includes the competitive analysis and user (observational, quantitative, and qualitative) research.

The Define phase includes the user personas, business goals, and a problem-solution matrix.

The Ideation phase includes the sitemap, task flow, low-fidelity wireframes, and responsive wireframes.

And finally, the Prototype phase which includes the mood board, UI kit, high-fidelity wireframes, and high-fidelity prototype.

Learn more about this project.

01.

Research Projects

Eget magnis neque quaerat mollit. Maiores aperiam ac nonummy cupiditate nulla.

02.

Creating Strategy

Eget magnis neque quaerat mollit. Maiores aperiam ac nonummy cupiditate nulla.

03.

Implement & Success

Eget magnis neque quaerat mollit. Maiores aperiam ac nonummy cupiditate nulla.

I emphasize curiosity. Curiosity is the key to progress. Until we truly understand the issue, the solutions remain hidden. Ask questions and open the door to breakthroughs.

Research and Empathize

In

This

Section

Competitive Analysis
User Research
Key Research Findings

Competitive Analysis

To ensure World’s Children’s website thrives, the team thoroughly analyzed their top competitors in the industry. By understanding their competitors’ user experience and approach to sponsorships, I can identify opportunities to differentiate ourselves. This competitive intelligence will guide the creation of a website that stands out from the crowd, offering a superior user experience that attracts and converts sponsors.

We Discovered Several Themes

We Must Boost User Experience:

Enhance navigational ease
Add search & sort capabilities
Add mobile responsiveness

Read Details

Enhanced Navigation: Implement clear and intuitive navigation to simplify finding information.
Search & Sort: Enable users to quickly locate specific details with search and sorting functionalities.
Mobile Responsiveness: Ensure a seamless experience across all devices with a responsive layout.

We Must Increase Visibility of Credibility & Transparency:

Improve accessibility, strive for WCAG compliance
Increase visibility of financial records
Demonstrate credibility

Read Details

Accessibility: Adjust color schemes to meet accessibility standards for wider user inclusion.
Financial Transparency: Maintain prominent access to financial information for user trust.
Credibility Builders: Showcase partner logos, regulatory certifications, and testimonials to establish credibility.

Inspire Action & Engagement:

Craft compelling Hero content and visuals
Simplify and focus on their three sponsorship types
Make calls to action (CTAs) impactful
Introduce lead capturing opportunities

Read Details

Compelling Hero Content: Craft a new content and visuals aligning with and visually reflecting their mission.
Sponsorship Focus: Develop inspiring content tailored to each of your three sponsorship types, highlighting the impact of each tier.
Impactful and Clear Calls to Action (CTAs): Utilize popular search terms to align CTAs and inspirational banners with users interests, guiding users towards the desired actions (e.g., “Donate Now,” “Learn More”).
Lead Capture: Offer downloadable resources in exchange for email addresses to build your donor base.

Add Additional Resources:

Create a dedicated “How Sponsorship Works” page to provide detailed information and FAQs related to sponsorship opportunities.

User Research

For me, UX research isn’t just about understanding a website’s current state. It’s a powerful tool that reveals a website’s full potential for improvement. By uncovering user needs and aligning them with business goals, we can create websites that not only delight users, but also drive growth for the organization.

My holistic approach combines a variety of research methods, gathering both quantitative data (numbers) and qualitative insights (observations and user feedback). This comprehensive picture allows us to make informed decisions that prioritize a seamless user experience while achieving the organization’s objectives.

My Research Sources

Quantitative Research Summary

- Where are users coming from?

Key Insights:

Organic Search Growth: Organic traffic from Google has steadily increased, becoming the primary source of website visitors.
Direct Traffic Conversion Power: Direct traffic continues to boast the highest conversion rate (currently at 0.36%).
Potential for Organic Optimization: While organic traffic is rising, there’s an opportunity to improve conversion rates for users coming from Google organic search.

Actionable Recommendations:

Focus optimization efforts on key landing pages for Google organic traffic. This could involve:

A/B testing headlines and CTAs: Identify the elements that resonate best with organic search users.
Enhancing user experience: Streamline page flow and ensure content addresses user intent.
Improving page load speed: Create a faster and more user-friendly experience.

By focusing on these areas, I can bridge the gap between organic traffic acquisition and conversion rates, maximizing the value of organic search traffic.

- Landing pages with largest opportunity to improve conversions?

/child-trafficking-statistics/
Home Page
Trafficking-guide
/prevent-child-marriage
Isponsorships/
/child-sponsorship/ /projects/scholarship-fund/ /get-involved/ /about-us/ /sponsorships/sponsor-a-girl/ /sponsorships/adopt-child/
finspiring-scholarship-stories/
/sponsor-testimonials/

- What are users' interests?

Findings

The data reveals a strong user interest in content that explores the regional impact of human trafficking. This suggests a desire to understand the specific challenges faced by different areas.

Actionable Recommendations:

Optimize Landing Pages for User Intent: Align landing page content with user interest in regional impact. Highlight statistics, stories, or case studies that showcase the issue’s local realities.
Targeted CTAs: Craft clear and compelling Calls to Action (CTAs) based on user intent. Options might include:
- “Donate Now” to support anti-trafficking efforts in specific regions.
- “Sign Up for Our Newsletter” to receive updates on regional initiatives.
- “Explore More” to drive users to related content on other regions or specific aspects of human trafficking.

By optimizing landing pages and CTAs, I can ensure users find the information they seek and take the next step to get involved, whether it’s donating, staying informed, or learning more about the issue.

- Demographics

Key Audience

The data reveals a primary user base of:

Age: 18-24 year olds
Gender: Male
Location: United States (California)
Device: Desktop
Browser: Chrome

Tailoring Content for Impact:

Understanding this core demographic allows me to tailor website content to resonate with their specific interests and needs. Here are some ways to achieve this:

Content Tone and Style: Consider using language and references that appeal to young adults.
Visuals and Design: Utilize graphics, videos, and other design elements that are relevant and engaging for this age group.
Focus on Value Proposition: Clearly communicate how your website benefits them, whether it’s inspiring, information, or the ability to support a cause they care about.

Observational Research Summary

- Heatmaps and Session Recordings

Key User Engagement Insights:

Homepage as Entry Point: The homepage received the most overall clicks, acting as the primary entry point for users.
“About Us” Page Deep Dives: While not the most clicked page overall, users visiting the “About Us” page demonstrated deeper engagement with the highest clicks per visit. This suggests a strong interest in understanding your organization.
Sponsorship Focus in Navigation: “Sponsor” or “Sponsorships” were consistently among the most clicked elements across various pages, indicating user interest in supporting your work.

Actionable Recommendations:

Optimize Navigation for Sponsorships: Prioritize placement and clarity of “Sponsor” or “Sponsorships” within the main navigation to cater to user interest.
Streamline User Journey: Based on minimal clicks on “Gift Catalog” and “Donate” across all pages, consider removing these options from the main navigation if they lead to separate landing pages. If they are sections within another page, consider improving their prominence or user flow.
Focus on Core Pages: Retain “About Us,” “Our Work,” and “Get Involved” in the main navigation as they received significant user engagement.
Enhance User Experience: The low engagement with “Items Cart” suggests a potential issue with the shopping cart functionality or user clarity. Investigate and improve this section.
Enrich Navigation (Optional): Consider adding a “Contact” option to the main navigation, potentially drawing inspiration from its placement in the footer.
Submenu Options: Explore the possibility of implementing submenus within the main navigation for options like “Choose a Child” under a “Sponsorships” umbrella. This can help users find specific sponsorship options with ease.

Overall Goal:

By implementing these recommendations, I aimed to optimize the website navigation for increased user engagement, ensuring that users can find the information they need within 1-2 clicks.

Qualitative Research Summary

– Internal User Survey

Methodology:

Internal Interviews: Conducted interviews with team members using a 10-question “Ideal Donor Form” covering 6 key topics.

Key Findings:

The ideal donor profile consists of individuals who:

Deeply Care About Children: Their passion for child well-being is a core motivator.
Value Personal Connections: They appreciate personalized communication and engagement.
Respond Well to Communication: Regular updates and impact reports are crucial for maintaining their interest.
Driven by Values: They align with your organization’s mission and values.
Committed to Ongoing Support: They have a history of consistent giving (continued sponsorship).
Communication Preferences Vary: Younger donors may prefer digital updates, while older donors might favor traditional mailings.

Actionable Insights:

Transparency & Impact: Clearly showcase the impact of donations through compelling stories, data, and visuals.
Ease of Interaction: Ensure your website is user-friendly and provides easy access to information. Streamline navigation and consider donor login portals for a more personalized experience.
Communication Channels: Offer a variety of communication methods beyond email, such as social media updates, events, and newsletters. Cater to diverse age groups and preferences.
Low Maintenance: Design a clear and straightforward donation process.
Giving Behavior: Analyze donor giving patterns to inform future fundraising strategies.

Additional Recommendations:

Website Optimization: Review and improve website navigation to enhance user experience.
Child Safety Transparency: Proactively address child safety concerns with clear and transparent information.
Workplace Giving: Explore partnerships with workplace giving platforms to tap into a wider donor pool.
Remarketing Strategies: Implement retargeting campaigns to re-engage website visitors who may be interested in donating.

– External Interviews

Methodology:

We conducted in-depth interviews with six individuals outside their organization using a pre-approved script. The participants included:

Existing Donors: Loyal supporters who have a history of giving.
Non-Donors: Website users who haven’t yet donated.

Key Insights:

By analyzing interview data, I identified several key themes:

Donor Profile: Our existing donors tend to be:

Age 65 or Older: Cater content and communication to resonate with this demographic.
Female: Consider tailoring messaging or visuals to appeal to this group, while acknowledging potential broader donor interests.

Motivations for Giving:

Personal Connection and Stories: Donors connect more deeply with stories of the children impacted by their contributions. Highlight these stories throughout the website.
Trust and Low Overhead Costs: Transparency in financial management builds trust. Consider showcasing cost breakdowns and highlighting responsible use of funds.
Positive Communication and Connection: Regular updates, newsletters, and clear communication foster a sense of connection with the organization.
No Major Concerns About Online Donating: Streamline the donation process to remove any anxieties.

Overall Satisfaction and Recommendations:

High Recommendation Likelihood: Existing donors are likely to recommend your organization to others. Leverage testimonials and positive word-of-mouth.
Interest in Updates and Communication: Donors value regular updates on the impact of their contributions. Develop a communication strategy that addresses their needs.

Keep Reading

Desire for Specific Improvements: Participants expressed interest in website features that would enhance their experience, including:
- Improved Navigation: Make it easier for users to find the information they need.
- Prominent Personal Stories: Showcase stories of the children you help in a compelling way.
- Ease of Donation Options: Offer a smooth and user-friendly donation process.
- Transparency and Cost Breakdowns: Provide clear information about how donations are used.
- Community Building Features: Foster a sense of community and connection among donors.
- Regular Updates and Newsletters: Keep donors informed on your organization’s progress.
- Diverse Representation: Ensure visuals and stories represent a broader range of people and experiences.
- Mobile Compatibility: Optimize the website for mobile devices.
- FAQs and Support: Provide readily accessible answers to commonly asked questions.
- Feedback Mechanism: Encourage user feedback to improve the website and donor experience continuously.

Website Improvements:

By implementing these recommendations, we can address user needs and create a more engaging, informative website that converts visitors into donors.

– User Surveys

User Feedback via Thank You Page Poll (59 Responses)

Methodology:

We implemented a brief poll on your website’s “thank you” page to gather valuable user feedback. This strategic placement allows us to capture insights directly from individuals who have recently interacted with your organization.

User Needs and Interests:

Analyzing the 59 responses revealed several key themes highlighting user needs and interests:

Beyond Donations: While many users expressed gratitude (goodwill and blessings), there’s a clear desire to engage in more than just financial support. This includes requests for:
- Partnership Opportunities: A dedicated portal for potential partners would streamline inquiries and application processes.
- Volunteer Opportunities: Explore ways for users to contribute time and skills (article contributions, collaborations).
- Physical Item Donations: Implement a section on the website for donating physical items needed by your organization.
Information and Communication: Users seek a variety of information and communication channels:
- Education and Support Programs: Highlight existing programs or explore developing new ones to meet user needs.
- Update Personal Information: Offer a user-friendly feature to update payment information or sponsorship preferences.
- Dedicated Support Channels: Create specific channels for urgent assistance, inquiries, and feedback, ensuring users reach the right resources.
- Success Stories and Impact: Showcase the impact of donations and programs through compelling stories and data. This fosters a deeper connection with your mission.

Keep Reading

Transparency and Trust: Users value transparency:
- Tax Documentation and Financial Transparency: Make tax documents and financial information readily accessible.
User Experience: Participants expressed interest in website improvements:
- Accessibility and User Friendliness: Ensure the website is user-friendly and accessible to all.
- Security and Privacy: Emphasize website security and user data privacy.
- Feedback and Interaction: Consider options for feedback mechanisms and potentially controlled interaction with sponsored children (e.g., letters, drawings).

Actionable Insights:

By addressing these user needs, we can enhance website functionality, improve user experience, and foster deeper connections with potential donors, volunteers, and partners.

Key Findings

Donor Survey Feedback

Feedback: Donors value transparency and want to see the impact of their donations.
Alignment with strategy: This feedback directly reinforces featuring inspiring content that showcases how contributions are making a difference directly addresses the expressed desire for transparency and impact visibility.

Ideal Donor Persona

Description: Young, tech-savvy, and passionate about children’s education.
Connection to strategy: This persona values a user-friendly, engaging, and informative online experience. Prioritize an easy-to-use website with clear information and inspiring content. This caters to their desire for a seamless online interaction and highlights the impact of their potential contribution.

User Needs

Seeking more information on donation methods, allocation of funds, and their impact.
Strategy addressing needs: Focus on a robust donor portal and inspiring content.
- Donor Portal: Provides a central hub with detailed information on donation options and processes.
- Inspiring Content: Showcases the impact of donations through stories, data, and visuals, directly addressing user queries about where the money goes and the difference it makes.

Commonly Requested Functional Improvements:

Improved Navigation: Make it easier for users to find the information they need.
Prominent Personal Stories: Showcase stories of the children you help in a compelling way.
Ease of Donation Options: Offer a smooth and user-friendly donation process.
Transparency and Cost Breakdowns: Provide clear information about how donations are used.
Mobile Compatibility: Optimize the website for mobile devices.

I don't just see data points, I see people. By weaving together research and analytics, I paint a clear picture of the who, what, and why behind every click and interaction.

Define and Contextualize

In

This

Section

User Personas
Business Goals
Problem – Solution Matrix

Who are we communicating with?

Personas

Emma, Teacher

John and Martha, Retired Couple

2022

14.7%

2024

18%

Tracking Changes and Optimization:

By monitoring these metrics before and after website changes, we can assess the impact of those changes on donor acquisition, engagement, and overall contribution to your mission. This data will guide future website optimizations to achieve your business goals.

Andrea's Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Branding

What are we improving to reach our goals and our audience?

Problems -> Solutions

Wireframes are the blueprints of user experience. They allow us to experiment with layouts and functionality before investing time and resources in aesthetics. It's like sketching the foundation of a house before laying the bricks - crucial for creating a user experience that's both functional and delightful.

Ideate

In

This

Section

Sitemap
Task Flow
Low-Fidelity Wireframe
Responsive Wireframes

Sitemap

Visually Translating the Needs of Our Users

Based on the priorities, challenges, and goals identified through our three user personas, this map structures the website in a way that directly addresses them. Each category will contain multiple subpages, offering users a clear and organized path to find the information they need.

Donor Task Flow

User Personas Guide the Task Flow

This user task flow diagram maps out the steps a user takes to complete a specific task on the website. The three user personas I developed were central to this process. By keeping their needs, motivations, and potential challenges at the forefront, I ensured the task flow caters to their expectations and avoids any roadblocks.

Low-Fidelity Wireframe

This low-tech approach allowed for rapid iteration before transitioning to a digital format.

Responsiveness was a key requirement of the design brief. To address this, I strategically utilized card-based sections within the wireframes. This modular approach ensured the content would adapt seamlessly across different devices, from desktops to mobile screens. The card-based structure not only facilitated responsiveness but also proved to be a highly efficient way to organize and prioritize content.

View Home Page Wireframe

View Responsive Home Page Wireframes

Responsive Wireframes

Seeing the product come together in desktop wireframes was a thrill, but there was one crucial step remaining: optimizing for mobile and tablet users. Responsive design was key, and utilizing cards to hold information proved to be the winning strategy. This modular approach ensured smooth transitions between breakpoints, preventing any disruption to the user flow as they switch between devices.

View Responsive Blog Page Wireframes

View Responsive Donate Page Wireframes

Branding is more than just a logo and colors; it's the heartbeat of your organization. As a UX designer, I translate that essence into an experience that lets users connect with your personality on a human level.

Prototype

In

This

Section

Mood Board
UI Kit
High-Fidelity Wireframes
High-Fidelity Prototype

Mood Board

A Multisensory Approach

For my mood board, I took a sensory-based approach, focusing on sight, touch, and smell. These senses evoked feelings of trustworthiness, inspiration, inclusiveness, and dedication, key brand attributes I wanted to capture.

Walking the Walk

To further solidify the user experience, I included images representing those positively impacted by donors. This helped visualize the environment recipients and donors would encounter if interacting in person. The goal was to elicit a visceral response, creating a deep bond between donors and the brand.

Keep Reading

Striking the Right Balance

Fresh teals, blues, and yellows were chosen for the color scheme, aiming for a serious yet vibrant feel. This conveys a sense of approachability, especially for a younger demographic.

Iconography

The iconography needed to balance the warmth and strength expected from a charity. The goal was to avoid a utilitarian or stuffy aesthetic, while still reflecting the seriousness of important life-changing work.

Font Choice: Accessibility Meets Modernity

A clean sans-serif typeface was selected for its modern and fresh look. However, readability and accessibility for all users remained a top priority.

View Hi Fi Responsive Home Page Wireframes

High Fidelity Wireframes

High-fidelity wireframes go beyond basic shapes and include visual elements like icons, fonts, and colors. I was super excited to get to this level of detail in the project as it provides a clearer picture of the intended user interface, minimizing confusion and ensuring everyone involved in the project (designers, developers, stakeholders) is on the same page.

View Hi Fi Responsive Blog Page Wireframes

View Hi FI Responsive Donate Page Wireframes

Prototype

Functionality

For Small Scale Business...

For Large Scale Business...

Venenatis blanditiis, venenatis venenatis, cupiditate corrupti quis rem, enim praesentium! Qui adipiscing congue rem. Pulvinar mollis risus mus magni.

Successful Projects

90%

Quality Strategy

95%

Venenatis blanditiis, venenatis venenatis, cupiditate corrupti quis rem, enim praesentium! Qui adipiscing congue, pharetra sunt nihil laboris, hic optio cupiditate corrupti quis rem.