Designing my college’s annual cultural fest website - A Case Study.
My design process for VIT’s Vibrance, the annual cultural fest website. Demonstrating my approach, skills, and results.
About Me
Hi, I am Siddharth a 3rd-year computer science student passionate about Product design. My friends on campus were aware of my knowledge in the field, and so I was approached to join the web development team for the Vibrance annual cultural fest of VIT Chennai.
A little more context:
As a designer, my experiences from past internships and various projects have taught me a crucial lesson: people tend to evaluate you based on the results you deliver rather than the framework or process you follow.
In the provided screenshot, Sujit, acting as a typical project manager 😅, focuses primarily on getting the screens ready as soon as possible without giving much consideration to the design methodology I adhere to, just like the real world.
In situations where I didn’t strictly followed methodologies like design thinking or the double diamond process, I still managed to deliver the expected outcomes as a designer.
Furthermore, I believe understanding the problem statement in detail and grasping the user’s context is often more critical than rigidly following frameworks.
About Vibrance
Vibrance is the annual cultural festival organized by the Vellore Institute of Technology, Chennai student community. It is a national-level fest organized by the students, for the students, which provides a platform to showcase their technical, artistic, and literary talents. The festival usually lasts two to four days, but the Pre-Vibrance events are conducted about a month before and include hackathons, workshops, concerts, dance performances, debates, quizzes, and many more. It provides a unique opportunity for students to learn, communicate with others, and have fun.
Watch the 2023 Trailer here: VIBRANCE 2023 TRAILER
Problem Statement
For a better understanding of the reader, the problem statement depicted from the WhatsApp message would be :
To create an engaging and user-friendly online platform for Vibrance, I was tasked with designing a website that effectively communicates event details, promotes seamless registration and ticketing processes for the Pro Shows, and reflects the unique identity and spirit of a college fest; Deadline 2 Days.
Moreover, this would have been my third Vibrance, but due to the COVID-19 pandemic, it was the first one to be held entirely offline after a gap of 3 long years, so I had zero experience of how a college fest really is, but I was excited for how things would unfold.
Expected Outcomes
- Increased attendance and engagement from the students of other neighboring colleges.
- Better communication of event details, leading to fewer inquiries and questions from attendees.
- Easy to use user experience.
- Increased Pro Show ticket sales and revenue generation.
- Improved perception and reputation of the Vibrance annual cultural fest among other fests.
All right I hope the context, the “Why” (the Goal) and the “Who” (the Audience) are clear now, this is perfect starting point for research and ideation.
Research ( When & Where )
My research focused on understanding the fest’s audience since it was my first college fest. By gaining a better understanding of the target audience’s contexts and needs ( even though they all are students but they use the use website for different purposes ). I could design a website that resonated with them and was easy to connect with.
I Did the following things as part of the research process:
- Conducted a competitive analysis to identify best practices and design trends in similar cultural events and festivals.
- Chatted with the Vibrance organizing committee to understand their vision and goals for the event and website.
- Examined the existing branding guidelines and incorporated them into the website design to ensure consistency.
- Conducted tests and gathered feedback from users to ensure that the website was user-friendly and met their needs.
Throughout my research, I made ChatGPT my inventive ally. I employed it for generating a variety of concepts and expand upon my existing knowledge. I consistently ensured to modify the content produced by ChatGPT and endeavored to tailor it specifically to my unique requirements to make the most of the resources.
Solution ( Solve )
I spent a lot of time gathering visually appealing inspiration and saved them in my Figma file for future reference.
- The main goal was to get inspired by good designs and set the right vibe for the fest website.
- I noted what I can pick and play with, noting what I liked about them and how I could use those elements in my project.
- I explored fest landing pages of colleges that are outside of India to know how they go around designing; to expand my creative options.
1. Vibrant look through pop and saturated colors.
2. Chose a decorative font instead of conventional serif or sans serif fonts.
During my ideation and inspiration gathering phase, I came across this beautiful case study by Smit Patel on how he designed the start here website for TISS (The Internet Said So), Link to the case study
I was thinking of adopting a similar visual design direction and selected ( stole xD ) the heading and description font from his project.
Design
Now that I found the starting ground for my typefaces and colors, let’s talk about the design layout and visual design iterations I made to make the designs for the following pages.
Wireframing
before jumping into visuals I started with making wireframes with my favorite software ( Pen and Paper ), this way I can ensure two things:
- Quick Layouts: I chose to create low-fidelity wireframes initially to efficiently organize all the information and allow for rapid iterations.
- Faster Visual Design Process: Crafting wireframes provided a solid foundation for visual design, as I already had a basic understanding of the layouts, streamlining the design process.
1. The Events Page
The events page is super important for the fest because it’s where people go to get all the details about what’s going on. So, when I was designing the events page for Vibrance, I put in some serious effort and went through a few rounds of tweaking.
I wanted to make sure it was easy to find the event info, schedule, and how to register for the same. I even got feedback from fellow batchmates and did some testing to make sure it was a breeze to navigate and find what they were looking for.
to facilitate effortless event discovery and sorting, I Implemented a visually appealing card layout, you can have a look at it below:
The events page design for Vibrance embraces a vibrant purple color scheme that aligns with the fest’s energetic vibe. With a focus on easy navigation, I incorporated a search bar and multiple filters like
- The “Filter by Date” narrows down events based on their preferred date range. It helps attendees find events that align with their availability and their preference according to their classes.
- The “Filter by Venue” lets you browse events happening at specific locations or venues around the campus. This filter enables participants to explore events taking place in their preferred areas or venues that may be near their academic or hostel block.
- The “Filter by Club” allows one to view events organized by different clubs in the college fest. This filter helps attendees find events hosted by specific clubs they may be interested in or want to support their friends by increasing participation or simply getting OD. xD
Remember Sujit, the typical PM I introduced earlier, the job is undone if he is not happy so here is the follow-up :p
2. The Pro Show Page
The Pro Shows Events are the events, where artists from Bollywood fly down to the campus and perform and deliver a mesmerizing experience of a lifetime right during the college fest these were the best nights of my college life so far.
So the plan was to give the Pro Show page a premium look to make give more emphasis on the value and design that resonates with the artists.
Therefore I decided to make this page look different by adopting a radical visual design approach and made these 2 changes concerning other pages:
- Chose Cirka and Gilroy as the Heading and Description fonts respectively ( inspired by the CRED app’s design ), they both go great in tandem and provided the premium feel, I was aiming for.
- Changed the Background to a mesh gradient, unlike other pages which are painted with pastel and this allowed me to give the page a starry-eyed look.
Take a look at the Pro Show Page Below:
The Other Pages are similar to the events page hence I will keep this Case Study short and save you some time there.
If you would like to discuss and take a look at them, I am just a ping away and would love to show them and talk through them.
You can have a look at the Hero Banners on the different pages below:
and last but not least is this cute 404 Not Found Page.
Learnings and Reflections from this Project:
- Ideas are Omnipresent: I came to understand that, in contrast to coding, design is not governed by strict syntax, which perhaps contributes to its more intuitive nature. As I worked on the website, members from various committees offered valuable insights that I might not have considered without their input. This experience highlighted the importance of maintaining an open mind, being receptive to ideas from all directions, and embracing the collaborative nature of the design process.
- Gratitude for the Unforgettable Experience: I am incredibly thankful for the opportunity to design my college fest website, an experience I never would have imagined during my first year. Working on real projects has provided me with invaluable and unmatched learnings, and I am grateful for this experience.
- Analyzing Metrics: I would have loved to A/B test a few things and see if the metrics would change but when I discussed this with Sujit, he said “Chill bro, koi stakeholder nhi hai.” ( Take it easy mate, there is no stakeholder) and I guess he is right let’s just enjoy and make good stuff.
It’s a wrap!
Thank you for taking the time to read this case study, I hope you liked it. Have any feedback for me? or just want to say Hello?
Find me on Twitter and LinkedIn.
Also, I’m open to opportunities as a product designer. Do reach out if you’d like to work with me or collaborate on some projects.
If you liked what you read, do let me know by claps and comments; also, You can give up to 50 Claps; hold the clap button for a few seconds! Try it 🥳
Fin!
