Design a landing page for a book launch event for teenagers

Here is the walkthrough of how I went through days of iterations to design the landing page of a doctor, who is also a content creator, book launch event. Let’s hop onto it asap!

Dwija Patel
Bootcamp
Published in
9 min readNov 20, 2022

--

A glimpse of what I have made
A glimpse of what I made 🙈

In July 2022, I got the opportunity to join 10kdesigners Cohort 5. One of our assignments during the cohort was to design a landing page for an Internet Creator. The goals of this assignment were to improve the visual design, along with problem-solving and design process.

Shhh, read softly (to hurdle your way through all the iterations! 🤫).

🎬 Brief

Design a website for X to do Y.

My chosen X was Dr. Cuterus and Y was to promote her first book launch event.

Dr. Tanaya Narendra (her Instagram avatar named Dr. Cuterus) offers quick videos and candid advice about every doubt you might have had but never thought to ask. She has committed to making public medical education her life goal. She runs her own Instagram and YouTube channel dedicated to public medical education. She has done multiple video podcats with RaiseTheBrow and SheThePeople.

I have considered a hypothetical scenario where she has to publish her first book on Sex Education for teenagers.

😶‍🌫️ Talking about sex education is yet a taboo, isn’t it?

Here’s what Dr. Cuterus had to say:

What Dr. Cuterus had to say..

She knows how to excellently put the fun in fundamental sex education and myth-busting, talk about “taboo” topics, learn in a fun way, and #ScrewTheShush!

In a country like ours, this is the need of the hour. Understanding and accepting every human is the most beautiful form of expression. Every person, without the fear of society, should be allowed to express his true self. Dr. Cuterus, even after receiving loads of negative responses on her content, did not give up and fearlessly talked about things people are most hesitant to talk about, that too on a public platform.

☑️ Checkpoints

The process I followed

🥅 Goals

  • To let the audience book a seat at the book launch event.
  • To give an option of pre-booking the newly launched book if they could not attend the event.
  • To promote the book and let more people know about the launch.
  • To give a gist to the audience about the perks of attending the event.

⭐️ Using the AIDA framework:

The AIDA model represents the 4 stages a user goes through before making a purchase decision. It is just like a typical marketing funnel used here to sell out event seats, yay!

AIDA Framework
  • Awareness: create an awareness of the newly launched book, and book launch event, and create a brand identity
  • Interest: generating interest in the audience and letting them know how the book can help them
  • Desire: to move the audience from liking the event to want to join the event by telling them the perks of joining
  • Action: CTA, CTA, CTA! The final and most essential step is to let the audience book the seats.

🧠 Information Architecture

Organizing the content of the website beforehand is essential as content is the reason why people visit websites. Therefore, the content besides being valuable should also be easy to find. Information Architecture is not visible to the end users but is a backbone for the design.

Information Architecture of the website

🌻 Moodboard

Moodboards helped in understanding how event websites are structured and what touchpoints are focused on the most. Going through other similar websites also helps us in understanding the design language.

Moodboard
Some similar websites and posters.

🖊 The power of pen-paper (Ideation)

Ideating using pen and paper is underrated! It helps me a lot before starting any design as it gives me a huge space to work and scribble around freely. A bit of time off-screen while ideating really helps us understand what our brain is visioning.

Pen-paper ideation

🪢 Wireframe

Wireframes are the step where the architecture has been converted into the layout. It gives a rough understanding of how the page structure would look, but is definitely subject to change🤪.

Wireframes

🫀 Style Guide

To decide on the colors and fonts, it was important for me to understand what kind of content Dr. Cuterus puts out, what is the vibe of the content and who exactly is the target audience. All her content is for sure educative but is also fun to listen to and the audience for the event is teenagers. Choosing a bunch of vibrant colors was mainly to show how every individual is different and beautiful in themselves. Moreover, a little doodling touch would make teenagers relate too!

Style guide defining the colours and typography

🔮 Visuals and Iterations

I started designing one section at a time. Visuals are that part of the process which requires the most time and effort, so breaking it down into smaller chunks helps in making better iterations.

TL;DR✨

Check out the final design here: https://www.behance.net/gallery/157479649/Book-launch-Event-Website

🦸🏻‍♀️ Hero Section

The hero section of the website acts as the attire of the website. Over here it has to give the first impression of the event or would serve as the Attraction part of AIDA. Therefore, the hero section had to be a banger, something that people would remember us by and something that would make them scroll down further. It has to moreover gain the trust of the audience.

Here are some of my initial iterations for the hero section:

Hero section iterations

Problems identified:

  • There wasn’t enough space to add the event date and other details.
  • In some of these, the title of the book did not get much visibility.
  • The CTA wouldn’t have been discoverable enough.

🥁 Final Hero Section:

Final version of hero section

The different colored faces represent the different moods of people and how every individual is different, yet beautiful in themselves. Varied colors also show how fluid sexuality is.

Improvements:

  • Arranging the faces this way gave enough space to fit the book title and event details right in front which will grab the audience’s eyes.
  • The CTA is clearly visible along with other navbar links.

📚 Book Description

This is the section where the product is revealed and a brief description about it too. It has to be as crisp as possible because very few visitors read huge descriptions on the website.

Older version:

Book description section iteration

Problems identified:

  • The sharp edges of the main frame and CTA hurt the eye a little :(
  • The stroke distracted the eyes of the viewer from the actual product.
  • The copy was too huge and it increases the cognitive load.

🥁 Final Book Description section:

Final version of book description section

Improvements:

  • The edges of the frame and CTA both were made rounded which is much better for the eyes to look at whereas sharp corners throw your eyes off the path of the line so you end up experiencing abrupt pauses when the line changes direction (fun fact: our brain can process circles faster than rectangles!)
  • A slight gradient was added to the background and a bit of elevation to the CTA which makes it look clickable.
  • The copy was refined and the hierarchy was defined better.
  • The heading looked a little monotonous in the previous iteration and thus it was added in the background which gives it emphasis and creates breathing space in the frame too.

🤖 Event Details

After letting the audience know what the product is, and what the event is, we need to tell them how is the event planned, where is it, the date, and the perks of joining the event. It acts like cheese on a rat-trap 🤫.

Iteration:

Event details section iteration

Problems Identified:

  • The randomized order of arranging the cards baffles the viewer and increases the cognitive load. This way he might also skip on one of the cards without even realizing it!
  • The sharp edges needed to be fixed again.
  • The hierarchy of the date and venue can be refined further.
  • The center-aligned text inside the cards makes it very difficult for the viewers to skim through the text in a shorter amount of time.

🥁 Final Event Description section:

Final version of event details

Improvements:

  • The cards are not arranged in a conventional manner which makes it easier for the eyes to consume content. Moreover, according to the design language, I thought of going along with the theme of the sticky note.
  • The hierarchy of venues was fixed by increasing the font-weight. This makes it more readable.
  • The content of the cards is made left aligned.
  • CTA is added.

🐥 Other Details

To sell the book and event seats, it is equally important to let the audience know who the author is, how long the event will last, what is the timeline of the event, who are the credible speakers at the event and which are the popular brands partnering with them. This increases the trust and interest of the audience and gives the audience social proof.

Author description, timeline and speakers of the event
  • The author's description involves a quote from here about her ideology and a CTA which will take the users to know more about her by watching her podcasts.
  • The event timeline breaks the entire event into smaller sessions which lets the audience know what activities will take place at what time.
  • The speaker's names along with their professions and background help the audience to trust the people at the event.
  • The popular brands who are partners at the event attract the audience as people generally follow such brands from the beginning.

🦶🏻 Footer

The footer here consists of all the social media links of the content creator or author, and a CTA to subscribe to her newsletter. Moreover, to promote the pre-sales of the book, the audience can pre-book it if they cannot make it up to the event.

Footer

🗝 Key Takeaways

  • Iterations, Iterations, Iterations!: It is a super technique that shouts never settle for less. The first design we make is for sure improvising and experimenting around on the canvas is the best way to come up with a design nearly close to what our brains desire.
  • Feedback calls: We design the way we perceive the problem, but every person might perceive it differently, and taking feedback help in understanding those perceptions, which can be incorporated into the design later.
  • Understanding the target audience: To sell a product or event tickets, it is very important to make the audience relate to what they are going to experience at the event.
This is an aerial view of my canvas where I worked on the feedback and iterations!
This is an aerial view of my canvas where I worked on the feedback and iterations!

🐝 Conclusion

And that’s a wrap! Thank you for giving a read to my case study and I hope you found it interesting. I am grateful to all my mentors and 10kdesigners for constant feedback and support throughout the journey of drafting this case study. Let me know your thoughts in the comments 🥰

Currently, I am open to Product Design internships and freelance opportunities. Do reach out to me on LinkedIn or Twitter for any further feedback, discussions, or collaborations.

Fun fact: Long press the clap icon and you can award me with at max 50 👏claps👏 if you liked my work!

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Dwija Patel
Dwija Patel

Written by Dwija Patel

sippin’ tea at my dump studio// product design + research + cats// figma community advocate, vellore // @10kdesigners c5

Responses (2)