Overview
Blue Dragon Children’s Foundation is a non-governmental organization helping children in crisis situations and families in need. They work directly with high-risk communities, host events to raise funds and awareness, and rescue children from trafficking and abuse. This project aims to design a persuasive landing page using visual rhetorical tropes to encourage viewers to become a volunteer and get involved in the organization’s activities.
Software
Figma, Illustrator, Photoshop
Timeline
Feb – Mar 2023 (6 weeks)
The Challenge
Blue Dragon supports children and families in Vietnam located in high risk communities or crisis situations — child labour, homelessness, abuse, trafficking, extreme poverty, etc. Survivors of these situations are provided with the necessary physical, mental, social, and legal support. The organization aims to provide children and young adults with education and life skills and advocates for them to ensure that they are not forced into dangerous circumstances. They work to prevent abuse and homelessness, and provide opportunities for employment, shelter, and education.
Blue Dragon's homepage also serves as its landing page. Thus, the webpage contains multiple types of content and different call-to-actions, the variety of which can distract the viewer.
How might we use visual rhetoric to design a landing page that effectively encourages viewers to get involved with Blue Dragon's activities?
The Solution
This landing page aims to provide more comprehensive information on the organization's activities and persuade the audience to get involved. The informational content focuses more on conveying Blue Dragon's key activities and impact, aiming to encourage the viewer to participate by becoming a volunteer.
Empathy Map
Viewers' interactions with the content on the original websites are mapped out as below.
Initial Layout
This landing page will be a separate webpage from the current homepage, containing more information of Blue Dragon's activities and convincing viewers on one action. The content will be structured to persuade users to become a volunteer. I aimed to accomplish this by highlighting the current situation, then the organization's activities, values, impacts, then the call-to-action at the end.
Audience Feedback
Before moving onto further designs, I used the rough outline and wireframes above to gather feedback and identify opportunities for improvement. The feedback and suggestions helped me better define the direction of the landing page and improve its design.
There is too much information. The paragraphs can be shorten and key information should be better highlighted.
The arguments should be clearer. There can be more distinctive separation between different arguments. If the arguments can be merged into three main points, the flow would be strengthened.
The visual pun of children with angel wings and personification of the monster house are strong visuals. Moving the monster house to the start can make a stronger first impression.
The testimonials can be portrayed in text bubbles spoken by illustrations of the children.
More emphasis should be placed on the call-to-action.
The header and footer are unnecessary for a landing page.
Order of Content
The content on the original webpage was used as the foundation to craft both graphic and written elements. I outlined the potential content to be included on the landing page and arranged it for a better flow. I wanted to highlight the current situation, then the organization's activities, values, impacts, then the call-to-action at the end. Written informational content was sourced from the website and revised to fit the intended message and limitation of one webpage.
Visual Rhetoric
To create more persuasive visual elements, I aimed to employ visual rhetorical tropes as they strengthen the arguments and meaning of the visual elements. I explored rhetorical tropes and ideated possible portrayals based on the outlined content.
Images from the organization's website and social media pages were collected as both visual inspirations and possible assets — all photographs used in this project, including those used in a collage, were sourced from Blue Dragon's public pages. Graphic elements were created using Adobe Illustrator and Photoshop, either modified from photographs sourced from the aforementioned pages, or newly drawn in Illustrator.
Visual Rhetoric
Visual Pun
The message “Help Children in Crisis Take Flight” was taken from the original website and can be visualized using a visual pun of children with angel wings.
Visual Rhetoric
Metaphor
Broken pieces of glass are used to represent the fragility of childhood and the negative impacts of poverty, homelessness, child labour, and trafficking have had on children in these crisis situations.
Visual Rhetoric
Personification
A regular Vietnamese “tube house” is personified as a monster to represent an abusive household and working environment that children may be forced into. An image on the original website is cutout and integrated into the design to look like he is afraid of the “monster.”
Visual Rhetoric
Synecdoche
The handprints put together represent collaboration; having different sizes and colours demonstrate the diversity in age, personality, and background.
Visual Rhetoric
Metonymy
From the website, I found quotes from 3 different children who have received support from Blue Dragon: a student, a trafficking survivor, and a former street kid. Based on the content of the quote, I visualized the type of support they received through a closely-related object.
Style Guide
Prominent colours from the original website were identified and selected as accent colours, each given its own meaning. #00AEEF is used to highlight the organization’s activities and values. #F5811F represents dangers and crisis situations. #ED145B shows the care and love the children should receive.
Design
Deliver
Prototype
In combination with the design and content, animations and interactions can add to the experience. I wanted these to be simple and avoided taking away from the overall message and experience by adding onscreen movement. An interactive prototype was made in Figma to demonstrate the animations and how users can interact with different graphic elements onscreen.
