<?xml version="1.0" encoding="utf-8"?>
Open full project

Overview

The landing page focuses on representing the values of our music festival Skayazoona, providing a safe and inclusive experience for all festival goers.

The design emphasizes non-discriminatory practices and inclusivity, featuring gender-neutral experiences, diverse artists, and accommodations for special needs. There has been a focus on education through music.

Note: Here in the case study by we, I am referring to the festival/org (Skayazoona).

  • You can view the Desktop prototype here.
  • Mobile UI here.
  • Full case-study here.
  • Please leave a review.

Skayazoona - Raising awareness through music 1

Project Background

Skayazoona is a yearly music festival celebrated in Shillong region of North-East India(hereafter referred to as NE or NE India). Limited awareness and understanding of the LGBTQ+ community in remote NE India contribute to social misconceptions and biases.

For this event, I decided to focus on educating the region about these communities and addressing misconceptions through their long-time passion, music. Despite the region's vibrant music scene producing many renowned musicians, there is a significant gap in knowledge about the LGBTQ+ community.

N.B. The cultural context of NE India is unique and may differ from Western perspectives. This case study considers the region's distinct social dynamics.

Skayazoona - Raising awareness through music 2

What I’ll cover

1. Ideation & Concept Development: Explore the ideation process behind the subtle theme of the landing page & event, showing the topics I decided to educate the audience about including the diversity flags.

2. Design Process & Success Metrics: Detail the design process and decisions involved in designing the logo and interactions. Ensure I effectively communicate our message and success metrics I propose, if someone wants to launch this campaign.

3. Prototyping & Final thoughts: Discuss the steps taken to create and test prototypes of the landing page.

Skayazoona - Raising awareness through music 3

1. Concept Development

Since the festival aimed to eradicate the limited awareness and increase the understanding of the LGBTQ+ community, stereotypical representation has been avoided because

  1. We don’t want to fit into tropes and
  2. We want to appeal to as many people as possible.

As a result, I chose not overuse the different LGBTQ+ pride colors.

As NE India is fond of listening to international artists, I tailored the artist lineup based on their popularity and their support for the LGBTQ+ community themselves or other themes like rebellion and struggle. The aim is to make people experience the community without compulsion.\

Personas

I made personas that indicate varied interest in topics of Music and LGBTQ+. I identified 2 key personas: Arjun and Maya.

  1. Arjun is a shop owner who has been brought up traditionally. He is conservative. Arjun was chosen as he was an accurate representation of someone with limited awareness which means he had the potential of broadening his horizons.
  2. Maya is a non-binary person, a community organizer for the LGBTQ+ community. They are passionate about creating a more inclusive society.
  3. Additionally; Aisha, a 26 year old graphic designer who uses a wheelchair was chosen as a secondary persona.

These personas helped ensure that the landing page addresses the needs and concerns of individuals with varying levels of awareness about the LGBTQ+ community.

Skayazoona - Raising awareness through music 4

Skayazoona - Raising awareness through music 5

See the personas in detail here.

Competitor Analysis

My analysis of competitors helped me identify key features and design elements that would make our landing page stand out.

Brainstorming

Using techniques like Crazy 8s and a modified Eisenhower matrix, I prioritized the most impactful ideas. Then iteratively improved the designs based on feedback to its current state.

Skayazoona - Raising awareness through music 6

Mind-mappingSkayazoona - Raising awareness through music 7

Crazy 8sSkayazoona - Raising awareness through music 8

Skayazoona - Raising awareness through music 9

Design Process

The Name: Sky + Zoona

  • Sky: Represents the vast, open, and limitless possibilities, symbolizing freedom, inclusivity, and reaching for higher ideals.
  • Zoona: Derived from the word "zone," representing a space or area. In this context, it can signify a safe and inclusive space for all.
  • Combined Meaning: Skayazoona, a limitless, safe, and inclusive space for everyone under the sky.

The Logo

Skayazoona - Raising awareness through music 10

Typography: I used "Unbounded" and "Roboto Flex" fonts to complement and balance each other, with "Unbounded" being horizontally stretched.

Colors: Peach is the primary color, chosen for its closeness to human skin tones, evoking "humanness." Minimal accents of LGBTQ+ colors are also used.

Layout: A 12-column grid with a 20px gutter width and spacing divisible being a multiple of 16: 4px (16x0.25), 8px, 12px, 16px, 24px, 32px, 48px, 64px (16x4) and so on.

Skayazoona - Raising awareness through music 11

Components

Created components with various states & micro-interactions to make the prototype engaging.

Skayazoona - Raising awareness through music 12

Full list of components here.

Landing Page

The landing page features an animated, amorphous background created with 'Touch Designer', symbolizing inclusivity and appealing to all genders. The animation aims to awe visitors and encourage exploration, with additional micro-animations and hover effects enhancing user engagement.

Skayazoona - Raising awareness through music 13

Key Sections:

  • Artist Testimonials: Playable messages from artists reinforcing their commitment to the cause.
  • Who We Are: Overview of Skayazoona, its mission to raise LGBTQ+ awareness in North East India, and activities offered, including camping, live music, shuttle service, kayaking, safe-spaces, and 1:1 counseling.
  • Artist Information and Schedules: Detailed info about artists and their performance times.
  • Gallery: Showcases memories from past events, highlighting the experience and emotions.
  • Educational Engagement: A lucky draw offering coupons, ticket discounts, and trivia to boost learning about the LGBTQ+ community.
  • Ticket Booking: Options for various tickets, including those for specially-abled individuals.
  • Pride Trivia: Insights into different flags and pride culture.
  • About Skayazoona: Information about the festival's birth and mission.

Skayazoona - Raising awareness through music 14

Final Thoughts

One of the most exciting projects which addresses a social issue in Northeast India by aligning it with a fun and interesting event for the community.

The goal is to give the LGBTQ+ community visibility and recognition, fostering connection, celebration, and music. This festival is about connection, celebration, and music—a day to make new friendships, sing along to favorite artists, create memories, and celebrate with loved ones.

If you've come this far, please leave me a review.

Thumbnail Image overlay by rawpixel.com on Freepik

Share your insights — leave a project review and help others grow their skills

Reviews

5 reviews


Great job Mridu, loved the complete case study & unique visual style of the page.

A couple of things to improve — consistency of typography, alignment of some of the components, and a bit more white space between sections.


Great job on this case study.

Visuals capture the feelings of a music festival.

With the about section, perhaps consider changing the colour of CTA read more, or adding spacing just so it stand out more.

Updated please check. Thank you so much for the contructive feedback.

Bikash Pradhan

Bikash Pradhan

Loved the contrast.


Like the aesthic but I think you can improve your case study slightly.


I like the dark and minimalist visual design.

I love the design isnt overbombarded with the pride colors that i have seen in other design which could be a real cliche.

The fluid background really a very smart move. Is that to denote gender fluidity or am i looking too deep.

A thing i personally would like is to choose different font type for this and the weights you use. Good Luck!

Thank you. I've altered the weights after some thought.

76 Claps
Average 4.5 by 17 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>