GLSEN Landing Page Visual Design
Designed a website landing page, raising awareness for the Gay, Lesbian, and Straight Education Network, while encouraging donations from visitors.
Role
Software
Duration
Adobe XD, Figma, Adobe Photoshop, Adobe Illustrator
~ 3 weeks
UX/UI Designer
Prototyping
Writer
Context
For this project, the objective was to create a meaningful landing page that allows viewers to empathize with the organization. Using rhetorical tropes and typographic, visual, and graphic design skills, the call to action for the page would be for viewers to support more LGBTQIA+ youth through donations to GLSEN and thus, expand LGBT+ safe spaces within schools across America.
Background
The organization, GLSEN, advocates to support and protect LGBTQIA+ students, specifically those in kindergarten to their senior year in secondary schools. The organization also advocates to help educators increase awareness of LGBTQIA+ communities and creating safe learning environments for them within their schools.
Objectives
Design an accessible, user-friendly page that allows users to interact in an intuitive and efficient manner, enabling them to perform desired actions.
UX/UI Design
Communicate brand's identity effectively, guides users intuitively through the content hierarchy, and encourages engagement with strategic visuals, typography, and colour.
Modern Style
Structure and present information in a way that meets user needs and business goals effectively to ensure that the content is understandable and actionable for users.
Content Design
Empathy Map
UI Development
For the website, I developed the UI system, strategically crafting the grid system, color palette, and typography to embody the serious yet hopeful and vibrant nature of the organization.
Grid System
Margin Width: 80 px
Gutter: 20 px
#5D4EC6
#0D082B
#AAAAA7
#FCFCFC
Color Palette
#DB700F
#DADAD8
Typography
Content & Visual Designs
Based on the target audience and their established opportunities from the empathy map, I devised three primary content sections aimed at explaining GLSEN's mission, impact, and future goals to users. By doing so, it would help users understand and empathize with the organization, as well as persuade them to help the charity through the call-to-action features.
Banner & Introduction
The first section helps to introduce users to the organization, purpose of the website, and call-to-action in a concise and captivating manner.
Background & Statistics
The subsequent section provides users with crucial context regarding the organization's mission and the contemporary challenges it addresses through statistics and strategic illustrations.
Contributions & Impact
The last section showcases how the organization directly helps tackle current issues for LGBTQ+ youth and ways it can grow with donations through data visualizations and a concise list of points.
Final Design
Scroll below to view the full, final design of the landing page.
