Case Study: Designing a landing page for a youtuber’s upcoming Book
Project Brief
This project was a part of 10K Product Design C5, where we were tasked to design a landing page from scratch for an internet personality of our choice. It took me five days to complete and share the assignment for internal review.
Problem Statement
Design a landing page for Anwar Jibawi (Youtuber) to showcase his new book and collect orders
Outcome
The success of the website was dependent on the following outcomes;
- Bring more awareness about Anwar and his book
- Help new comedians understand how this book can help them
- Build social proof
- Get more orders on Anwars book
- Maintain Anwars comic style throughout the design
Research
Since it was a simple landing page, I kept the research limited to understanding Anwar’s personality and brand, which was an essential factor in designing the UI.
Personality Discovery
I started digging into Anwar’s Wikipedia to find valuable key points I could use later in my content. Then, I started looking at his social profiles to understand his style and target audience.
- Learned Anwar’s history
- Understood his brand
- Found inspiration for copywriting
- Found inspiration for UI style
- I took screenshots from the videos to later use on the website
- Learned more about his background
Moodboard
After digging into his personality and brand, I got an idea of how the end visuals can look, and then I started collecting inspiration for my mood board.
- Found inspiration for clean and minimal landing page designs
- Collected inspiration for content reference
- Checked landing pages of authors selling books
- I looked for something unique and fun
Laying Down the Structure
Once I had enough data, I moved to wireframes, where I started laying down the structure for the landing page.
- I used a UI kit to save time
- Organized sections based on problems to solve
- Built a low-fidelity wireframe
Visuals
After setting the base structure, I moved directly to high fidelity, experimenting with different styles.
UI Explorations
I started playing with colors, fonts, and images. I was trying to achieve a fun and modern look while maintaining a clean hierarchy.
- Experimented with different styles
- I tried multiple font pairings
- Used hand-drawn symbols to add an element of “fun.”
Finalizing Style & UI
After many iterations, I finalized the styling of the UI, which I continued throughout the other sections.
- Wrote a rough copy for sections
- Created multiple mockups of the book
- Developed design system for typography
- 12-columns grid with 48 margin and 36 gutter for desktop
- Created mobile layout
Completing Project
Once satisfied with the look and feel, I started polishing the sections.
- Named all the layers
- Auto-layout everything
- Finalized the copy for sections
Learnings
I was thrilled with the outcome; it was a fun project. These were my learnings;
- Using illustrated graphics to create fun elements
- Using arrows to redirect a user’s attention
- Understanding a person’s personality and translating it to design
Thank you for checking out my case study. You can reach out to me on LinkedIN
