Elevating Skincare with AI: A Case Study on Designing a Skincare Landing Page
Designing a landing page for an “AI-Powered skincare recommendation app” that helps users achieve flawless skin.
🖥️ Background
Did you know that the Skincare industry is valued at over USD 100 billion, while the delivery market is only a fraction of this booming industry? Several companies have recognized this opportunity and are seizing the space it presents by stepping into the skincare industry.
Project Brief: Design a landing for an AI-powered skincare recommendation app that crafts personalized skincare routines.
Timeline: 2 weeks
This problem statement was one of 120 released by 10k Designers.
In a hurry? Here’s a short presentation video for you 👇
📝 Why this problem statement?
The challenge is to help users leverage AI for an improved skincare routine. But wait, why did I opt for a dark theme when most skincare landing pages are light and bright?
Traditionally, skincare landing pages favor light themes due to associations with fair skin tones and skin-whitening practices. Here’s a wonderful article that explains the rationale behind my decision. You can read the full article here.
This case study offers insights into the challenges, solutions, and lessons learned while working on this project.
🔮 My Story
I didn’t select this topic solely based on personal preference. The primary reason for choosing it is my following of dermatologists on Instagram and YouTube, as well as my interest in their recommended skincare routines.
Recently, I experienced acne, which led me to try a bunch of products in skincare industry. Thankfully, my sisters helped me find the right product for my skin type. However, not everyone has access to such advice.
What if there were an AI that could recommend a tailored skincare routine based on your skin type and concerns? Let’s find out!
💭 My design process
Understanding the problem ➡ Initial research ➡ Information architecture ➡ Wireframing ➡ Visual design ➡ Iterations ➡ Prototyping ➡ Delivery\
🔍 Research
After narrowing down the topic and style guide, it was time to begin the research phase.
Brand name: Entice (Hypothetical) — meaning (to attract or tempt by offering pleasure or advantage).
I began my design process by understanding the users’ needs and extended my research to include anything that conveyed a sense of aesthetics and AI integration.
I addressed key questions to determine my target audience and identify feasible solutions for them. The target audience comprises users actively seeking improved skincare routines and consistently using skincare products.
- Who is the primary user of this product?
- What does the user want to achieve?
- What is the user’s experience like with the current solution(s)?
- What are the key features or improvements that the user would like to see in a future solution?
- What tools or resources does the user currently use to perform these tasks?
The moodboarding included inspirations for the hero section, landing pages, footers, headers, and websites related to skincare, among other elements.
🎨 Style Guide
The reason I selected purple as the primary color is to maintain a gender-neutral approach, ensuring that skincare doesn’t appear exclusive to women.
Additionally, purple and pink are frequently associated with creativity, balance, and positivity. These colors convey the idea that the skincare solutions bring balance and positivity to users’ lives.
The reason for selecting Playfair Display font is that-
- In the skincare industry, elegance and minimalism are standard.
- Playfair font adds a touch of luxury and aesthetics.
I paired Playfair Display with Lato because-
- Lato is a clean and modern font.
- Together, these fonts create a visually balanced composition for the skincare landing page.
📃 Information Architecture
After getting a deeper understanding of the problem statement, it was time to define the structure for the landing page. So, I outlined the user flow and determined what actions would be available to users as they navigate through the langing page. Two key questions that helped me in defining the Information Architecture (IA) were:
- What’s the final outcome that the user expect from the landing page?
- What actions do I want the user to take?
✏️ Wireframing
One of my favorite aspects of product design is designing wireframes. I enjoy the iterative process, looking for that “wow” factor in my designs. However, due to time constraints, I focused on being efficient with my wireframing.
Designing wireframes with pen & paper intentionally slows down our thinking, which leads to sitting with the material for long, i.e. in-depth thinking. — Abhinav Chhikkara
My usual approach is to begin with pen and paper for the initial wireframe sketches and then transition to creating digital designs using Figma.
🧑🎨 Visual Design
Once I had completed my research, moodboarding, information architecture, style guide, and wireframing, it was time to start working on the final designs.
The landing page has several iterations for each section, which I will share below along with the reasons I chose not to proceed with them.
🦸♂️ Hero Section
I had over 15 iterations for the hero section. While I initially favored the first one for its minimal and clean aesthetics, my primary goal was to infuse a strong tech-oriented theme into the website. I opted for the second design as it better aligned with the overall tech-oriented vision for the landing page.
Reasons
- More space for adding animations to the hero section which leads to user engagement and increasing the chances of user retention.
- The call-to-action (CTA) and navigation have been improved to provide clearer contrast, guiding users to take action and onboard them to the app.
- Clear industry proof enhances user trust, ultimately boosting user acquisition.
- The green color was chosen to highlight ‘skincare,’ conveying the impression of suggesting natural products.
What changed after the feedback
- Implemented a navigation bar highlight effect for user-friendly page identification.
- The top-right CTA and primary CTA now share a consistent fill, ensuring users can easily download the app from anywhere on the page due to the sticky navigation bar.
- Reduced the size of the CTA and sub-heading to fit within the heading, improving user scanability.
- Applied Gestalt principles by grouping the CTAs closer together, creating a visual connection to emphasize their relationship.
🗂️ Why Choose us Section
Before feedback, I had some doubts about spacing & grid system but my mentor, Yutika Pahuja cleared them during the feedback.
In this section, the goal was to showcase the advantages users would gain by choosing us over any other brand. I emphasized important aspects that users typically consider before making a decision in skincare industry.
I had a clear vision for presenting this section from the start of the design process. I chose the ‘bento grid’ design pattern.
- It structures content blocks like a bento box UI.
- This pattern facilitates easy access and absorption of data.
📱 How it works Section
One thing I learned here is to keep iterating, it will take some time but the result will be worth it.
Personally, this was my favorite section of the landing page because it took a lot of time and numerous iterations to design it this way. Below are the iterations I came up with before the final version of this section.
What changed after the feedback
- The clear demonstartion of how the app functions.
- Included the “talk to experts” CTA for users who still have doubts.
- Made the copy clear and concise, which even resulted in lesser text.
- Gave this section a whole new look to keep it in line with the aesthetics
Initially, I didn’t prioritize this section due to time constraints. However, after receiving feedback from my mentor, who pointed out its dull nature, I decided to invest more time and effort into improving it. The final outcome was worth all the efforts.
I was lowkey proud of the iterations here because this was my first landing page design :)
🧾 Testimonials & Social Proof
In the testimonials section, I intentionally included a diverse range of personalities to convey that our product is suitable for a wide range of users. For instance, featuring testimonials from a fashion influencer, an IT consultant, and an athlete represents different user personas.
Initially, I wasn’t planning to add the social proof section because I didn’t see a pressing need for it. However, during my weekend session at 10k Designers, it was highlighted that humans tend to place their trust in something if it’s endorsed by a global personality or someone they admire.
It’s totally true, and we’ve all experienced it. We are far more inclined to try a new product in the market if our friends recommend it because we trust their judgment and value their choices.
✨ FAQ & Final CTA
The FAQ section presented a challenge in this design, as I had to iterate several times to achieve the desired minimal and tech-oriented vibe. I kept these three key considerations in mind while designing this section:
- Importance of FAQ section for a product such as skincare.
- Relevance of the questions asked in this section.
- Minimal and clean design for the user to easily navigate.
The size of the final CTA is a tad bit large because I didn’t want the user to miss this one at all.
Additionally, considering that the user has navigated all the way to this point, including a final Call to Action (CTA) was very important. This way, if the user is impressed with the product and wishes to download the app, they don’t have to scroll back up.
Footer
This section is crucial for businesses because when users sign up with their email, it allows a business to keep them informed about upcoming product launches. Subscribing to the newsletter also lets users receive updates and “how-to” videos on using the product, making it valuable for them too.
The “Sign me up” button is in inactive state so that when users starts entering their email, the button will change to primary CTA
Behind the scenes
The lesson learned here is the importance of organizing your files right from the start rather than leaving it to the last minute.
Reflecting Back ✍️
- Documentation: One of the most important skills in design is to document everything and every thought that you come up with because if it’s not there in your file, does it even exist?
- Feedback: There’s always room for improvement in your designs, and who else is more capable of giving you constructive criticism than your mentors or senior designers?
- Just start: The only way to learn is to get started. There are no shortcuts in learning, and I can say this from experience. I’ve consumed a lot of design content, but I’ve learned that nothing truly valuable comes from it unless you take action. Remember: Action > consumption.
- Ask questions: There’s no such thing as a stupid question. I used to think asking question would make me dumb because what if everyone knows the answer to it? Believe me, they are just as confused as you are if not more and it’s a win anyways because questioning is the only way you can get better.
It’s a wrap
Thank you for taking the time to read this case study, I hope you liked it. 😋
I’m available for projects. Do reach out if you’d like to work with me or collaborate on some projects. Check out my portfoio website here.
Connect with me on Twitter, Linkedin or reach out to me at ✉️ vaibhavsinghania07@gmail.com for opportunities.
