Case Study: Designing a landing page for a programming event.

In this case study, I’ll be walking you through my design process of creating a landing page for a programming event.

Introduction

For assignment 2, at 10kDesigners we were given a task to design the landing page for an upcoming event.

The goal of the assignment was to practice visual design and the design process.

About the Project 📖

We had the opportunity to select any startup/company or come up with a brand new identity and design for an event of our choice.
It could be conferences, meetups, events, workshops, virtual events, hackathons, etc.

Task

I was assigned programming as my niche. So I decided to go with Infosys and design a landing page for their programming event.

Deliverables

• IA & Wireframes
• Visual Design for the homepage of the event.

Process 🎯

I broke down my design process into simpler steps and followed the basic design process which is a waterfall model, but I kept iterating and asking for feedback at every stage, to make quick improvements.

So basically the design process I followed was a hybrid of waterfall and iterative model.

Research 🔎

Infosys already has a programming event called “HackWithInfy”, which is a single-participant online challenge consisting of two rounds.
I decided to design the landing page for a team event while keeping the concept similar to HackwithInfy.

I went through the landing page for HackWithInfy to understand what information needed to be displayed, empathize with the people I am designing for, and understand their pain points.

The key insights that I got from it were:

• The audience I would be designing for are 2nd, 3rd, and final-year engineering students.
• An understanding of how the existing programming event worked and tried to identify the design pattern around it.
• Existing pain points in the current design of the website

I didn’t know much about programming events, so I surfed the internet and flipped through a few programming events and hackathons like Solana, Techcrunch, Google IO, etc. to get an idea of how things work around these events and to get familiar with the flow of programming events.

After defining my target users and doing secondary research. I defined the goals for my homepage.

• To give a sneak peek of the activity/contents of the event.
• To drive more conversions.
• Try finding solutions for the pain points in the existing website.
• To let the users easily navigate through the landing page.

Information Architecture 📑

I gathered all the information and content necessary to be provided on the landing page of a programming event, enough for the user to know what the program is all about.

But as it is a landing page I can’t dump all the information on one page as it would cause information overload, so I decided to use MoSCoW method to filter out and prioritize the information.

MoSCoW method used to filter out content

After filtering out the content, I created an Information Architecture for the landing page.

Information Architecture

Now that I had the clarity on what I’m designing, I started with low fidelity, paper wireframes. I iterated on paper and played around with layouts, sections, arrangements, etc.

Wireframe 📲

In this step, I tried figuring out how to communicate with the community in terms that they understand or position that appeals to them.

I followed the AIDA framework so that the landing page communicates a clear message, directs users towards the desired goal, and drives conversions.

Attention

Hero Section:
The Hero Section is the first thing the visitor sees once they land on the page which needs to grab a visitor’s attention instantly and encourage them to look for some additional information.

To do so I added a short and captivating headline displayed in large and clear fonts to make the initial message pop. I added a teaser video for the event which would play on its own once the visitor lands on the page to grab their attention and increase their curiosity to look for further info.

Interest

About the event section:
This part would convey more information about the event and include relevant content that would support the message given in the headline.

The easiest way to evoke interest is to list a set of benefits concisely so that a visitor can easily read and understand them. I gave more emphasis on the benefits/features of the event so that the visitor can easily read and understand them to evoke interest along with relevant stats to build trust.

Desire

Desire simply translates into explaining why a visitor should use/register for a particular product or event. I achieved that by adding social proof in the form of prizes, schedules, testimonials, or speakers.

Prizes
Prizes would serve as one of the main reasons for people to register for this event.

Schedule
This section will give an idea about the event and the schedule, I added pictures from previous events to the schedule for the attendees to get a more clear understanding of the events and would also serve as social proof and help in building trust.

Speakers
This section is to give information and details about each speaker.

Reviews
This section will have testimonials/reviews from people who have attended this event previously. This would help build trust and social proof, and also serve as one of the main factors for the visitor to register.

Action

Desire and Action parts are blended together in order to create an inviting call to action button that is both contextually and aesthetically appealing.
FAQ
The FAQ section would help clear out further doubts about the event if the visitor has any and which weren’t covered yet.

Reminder CTA
Added a final CTA at the end of the landing page as a reminder for the user if the user hasn’t registered already.

Visual Design ✨

I went through several iterations and different versions of the landing page before designing the final visual design

Here’s a snippet of the iterations.

Here’s what the final visual design looked like

Here’s the link to have a closer look at the final visual design.

Learnings And Insights 💡

Few things I would add/ improve/ replace that would result in better user experiences:

• Making designs more accessible by use of appropriate colors to achieve acceptable contrast ratios as per WCAG.
• Making use of more colors in general, since it is a landing page for an event adding more colors would make it look more playful and inviting.
• Spending more time on research and IA as it would build the foundation and play a vital role in the user experience.
• Trying out different layouts for every section and taking inspirations from a bunch of websites instead of a few.

I thank Abhinav Chhikara for giving me this assignment as a part of the 10k Designers Masterclass.

I would also like to thank Zainab Delawala and Fida Tanaaz, for giving me time to time feedback and critique.