Case study: designing a landing page for a book signing event
Hi! This is my first-ever UI/UX Case Study. Let me walk you through my learnings of Problem solving and the process of designing this Landing Page.
Introduction 🙋🏽♀️
I joined the 10kdesigners community (cohort 5) in July of 2022. Our second assignment was to design a full web page for an internet creator. The goal of this assignment was for us to learn visual design in Figma with problem-solving and design process.
Project Brief
Who is Live Albert ? And Why I chose her as my internet creator?
Creator, Podcaster, Author, and Cat lover.
- Liv is the creator, producer and Host of the podcast “Let’s talk about Myths Baby”.
- the stories of the ancient world are narrated through a modern intersectional feminist lens, focusing where possible on amplifying the voices of women, trans, and non-binary people.
In the middle of 2022, I began listening to Liv’s Podcast, which covers the topic of Greek mythology. As someone who has always been interested in this subject, I was drawn to the podcast while searching for more information. I particularly enjoyed Liv’s narration because of her unique perspective and feminist approach to the stories.”
- Liv is also an author with two published books under her belt. The 1st Book — Greek Mythology: The Gods, Goddesses, and Heroes Handbook and the 2nd book Nectar of the Gods.
Hereafter Liv Albert ( the Podcaster, Author and Creator) will be referred to as the Creator in this Case Study.
Goal 🥅
The primary goal of the Landing Page is to showcase the details of the ‘Book Signing event’ and ‘Book a slot’ for the same.
The Design Process 📃
As this was of a Visual Design problem, my approach was pretty simple and straight forward.
Here is the design framework I followed-
Research 📝
I first needed to understand what is the difference between a Landing Page and a Website? And research the Creator’s style.
Exploration 🔮
After understanding the requirements and goals of my Landing Page, I started to explore similar pages as part of Competitive Analysis.
Things I wanted to explore -
- the structure of a Landing Page. How many sections will be required to convey the whole purpose of the page in a crisp and precise manner, and take visitors all the way to the purchase decision (the CTA)?
I referred to Landingfolio, Lapa.ninja, Unbounce and Dribble for my research.
- copy-write — Learn how to create a compelling Hero Heading, tempting Subheading, and informative yet concise body/content to keep visitors engaged and prevent their attention from wandering.
Information Architecture 🏢
In the Design process, Structuring and prioritizing the flow to the page is what comes after gathering all the findings and learning from the Research and Exploration.
After collecting all the data it is important to break it down into smaller sections and build a hierarchy of the information.
I decided to structure the page into Five sections:
Also, from competitive analysis of some of the most converting pages, I learned that showing credibility and trust building is also crucial in building confidence in the visitors about the legitimacy of the Event, which can be achieved by -
- listing the sponsors and supporters of the Event and the Internet Creator.
- testimonials and reviews of fans and peers of the Creator.
Wireframe 🏗️
After creating the flow, the next step in the Design process is building the Layout of the page according to the Information Architecture.
I had all the information and data structured and prioritized in a neat flow. All I needed to do now was to present the information in an orderly Layout for easy scrolling and consumption by the visitors.
Visual Design 🌈
The next step in the Design process was deciding the Visuals of the Page ( my favourite part! 💟). According to me the first thing that attracts and retains visitor’s attention to the page are the Visuals . All the research and information means nothing if the page is not striking and appealing to a visitor.
I had the Wireframe with all the information laid out, and it was time to bring it to life by adding some style 🪄 and colour to it.
- My research on the Creator’s style immensely helped me with this decision.
The Hero Section 🦸🏿♀️
The purpose of the Hero Section is to grab the attention of the visitors since the very moment they land on the page. At first glance the Hero section should deliver the taste and vibe of the Event as well as the creator.
I used all my learning and research in building this Hero Section.
- I aligned the Hero Heading to the left side of the page because according to the F-Shaped pattern theory, the digital reader's eye ventures left to right as it is naturally easier to read for the majority of the users.
- And to balance the section I placed the Image of the Creator on the Right side of the page for symmetry.
- The final result of the Hero Section matches the Creator’s Style, the Hero Heading and the Sub-Heading convey the Event’s brief in proper hierarchy.
The About Section ❓
This Section of the Page I gave a brief description of the Creator and about the Event.
Event Highlights 🎉
Why? Why should one attend the Event? What’s in it for them?
- For an Event to be successful, it should play into everyone’s general interest. And, listing everything that the Event has to offer pushes the visitors one step further into making the purchase decision.
- The final design of the page is less wordy and more visual so that even the visitors scrolling through the page can get the gist.
About The Book 📙
A summary of the newly released BOOK! This is a Book Signing Event after all!
- A quick summary of the Book to introduce the New release to the world along with a picture collage. Still following the F-Shaped pattern theory here by aligning the more important text to the left and the collage to the right for symmetry and balance.
The Speakers 🗣
The main Event is this! The Speakers (including the Creator) having a Meet and Greet with their fans.
- This section had to be very informative with less distraction.
- All the Speakers and their brief introductions were added in a simple and minimalistic style for easy readability.
The Passes 🎟️
The Prices/Passes section! The most important section of all!
- This is where the visitor makes their decision, therefore this section had to be tempting and create the desire to make the purchase to attend the Event.
- The information had to be direct and uncluttered with complete clarity.
- still being congruent to the Greek theme by adding some hint of it in BG so as not to distract from the Passes cards.
Miscellaneous
Reviews
A dedicated section for Reviews of the Book.
- Reviews from fans and Testimonials from peers and publishers show the credibility and legitimacy of the book.
Miscellaneous
This section contains the The Final CTA, Social Media links and FAQ + Footer.
- It gets a little busy here with multiple actions for the visitors to perform.
- It is essential for an internet creator to get traction on all their social media platform, therefore a call to follow the Creator for updates is necessary here.
- The FAQ is not actively present on this page but the option to browse for FAQ is provided.
- The Footer includes the standard kit of Social Media Links and other miscellaneous.
Final Design
Enjoy! Link to final design here! 🌟
Learnings
In conclusion, my takeaway from this Problem statement (which is also my 1st problem statement so it's very special to me) is that you have to stick to the Goal! understand and stick to the Goal!
- Design Process — There isn’t a one-size-fits-all design process. A Designers typically develop their own unique process as they gain experience, but having a strategy in place helps keep projects organized, on schedule, and on track.
- Feedback — Welcome critical feedback with a positive attitude, but also remember to incorporate it in a way that aligns with your design vision.
- Iteration —With each iteration, I improved my skills in constructing sections, organizing and arranging them to effectively convey a story. I also learned how to use text formatting, spacing, and card sizes for optimal legibility, and how to incorporate concepts and visuals to make the page more engaging.
…well The End!? 🥳
Thank you for taking out the time!!. A huge thanks to the 10kdesigners community and my 10K peers for guiding me throughout this journey. 😊
I hope you enjoyed it! Feedbacks are most welcome. Let me know your thought!💭 Thank you! 🙏🏽
Feel free to reach out to me on LinkedIn and Twitter. I'm currently open to Product Designer opportunities.
Thank you! 😊
