Test Ideas Before Launching!
Discovering the best branding for a landing page
Parents prioritize safety and cost when considering an online course for their children while kids want an engaging and fun experience. I need to design with both audiences in mind.
Problem
Design and select the landing page that best resonates with parents, building trust and remaining friendly for their children.
Goal
Overview
UX Research + UI Design
I first understood users needs to propose two brand solutions and chose a winner design based on users’ feedback.
Role:
Tools
Figma
Miro
Google Forms
Duration
2 weeks
Design system
Responsive Design
Hi-fi prototype
Deliverables:
User Persona
Competitive analysis
Survey Design
Discovering
Parents seek protection while children want interactive learning
Understanding audiences…
User Persona
Gen Alpha has high standards when interacting with technology; they are the first digitally native generation. They expect high-quality graphics and enjoy learning through short videos and gamification, Minecraft being a popular learning tool.
Competitive Analysis
Green is a common color.
Adding a mascot or illustration can make the brand friendly even when using a serious tone of voice; don't overuse them.
Images and Headers must communicate the correct message and not mislead the target audience.
Gamification creates an interactive experience for children and a selling point for parents.
After analyzing direct and indirect competitors I created a guideline with successful strategies and brand mistakes I learned when researching:
Design Guideline:
Defining & Ideating
Let’s narrow down ideas
What’s the best layout and navigation for this site?
Researching users and competitors allowed me to identify the main sections needed on the landing page to facilitate the decision-making process for parents and provide all expected information.
SiteMap + Sketches
Navigation Menu
Intro
Benefits
Curriculum
Selling Point
Download
Price
Reviews
Recognition
Subscribe
Footer
Homepage Structure:
Wireframes
Using the approach to thinking mobile-first, I designed a mobile mid-fidelity wireframe, which became a responsive design that accommodates information based on the screen size, providing users with a seamless experience across devices.
Presenting two brand proposals
Lemonade Stand - Design #1
This design is inspired by nature and a lemonade stand, using bright colors, friendly illustrations, and warm images with welcoming professors.
Design Inspiration:
Cyberpunk - Design #2
This design is used for video games. It has a high contrast with black background and the use of neon colors to call children attention. This design is futuristic and innovative.
Design Inspiration:
Problem Statement
To choose the best design, I designed a survey to understand parents' perception of each website and their priority when choosing an online course.
Testing
Which design Is better?
Let’s ask our ideal audience with an online survey!
Parents trust “Lemonade Stand” design
Parents are more likely to choose design one over the second one when looking for an online course for a 12 years old child. The “Lemonade Stand” design won by 1 point with a total of 43 out of 50
Research Insights #1
““It looked informative, checked all the boxes””
Survey Participant
Likelihood of choosing each design
They described as “educational” and “informational”
Parents feelings were overall more consistent towards the first design. They described the lemonade stand design mainly as “educational” and “informational.”
Research Insight #2
Adjectives used to describe Design #1
The second design had mixed feelings, some parents loved it other described as “doubtful” and “fraudulent”
Adjectives used to describe Design #2
Improving winner design based on survey findings!
Emphasize price & safety!
Parents prioritize “Price” and Safety” followed by “Curriculum” & “Reviews” when looking for an online course for their children.
Iteration #1:
Parents Priority When Choosing Online Course
To integrate this research finding into my design, I created an emphasis on these two areas, integrating them into one section that stands out with a different background color and a large and friendly image (See image below)
Increase spacing between sections and minimize colors
Parents didn’t like colors and layout! Therefore, I chose only light blue for the background and separated sections with more noticeable margins.
Iteration #2
Elements that Parents Dislike About Design #1
Delivering
Friendly, informational, and welcoming landing page!
“It looked informative, checked all the boxes and gave guidance. The awards at the bottom legitimized it”
Survey Participant
Responsive design with strategic informational structure!
The final design is organized strategically into sections that uncover necessary information for parents to make a decision.
Introduce brand strengths with benefits and curriculum
Encourage parents to download the app
Build trust with safety and price
Reinforce positive feelings with reviews and awards
Invite parents to stay in touch and subscribe to newsletters
Information Flow:
Design System
Tablet and Desktop Wireframes
Mobile Hi-Fi Prototype
1) Overview
2) Sign in
1) New Account
Reflecting
There is always something to learn!
Remove bias, be accurate, and design for content.
1) Leave your assumption aside and listen to your audience:
My favorite design was the cyberpunk theme, and I thought that parents would select it. However, they chose the lemonade stand, and I had to put my opinion aside and improve this website based on their feedback.
If I had more time to share my survey and gather insights, I would add a second screening question ensuring that participants are parents with children between 10 and 12 years old to gain data that reflects even closer the ideal audience.
2) Add extra screening to narrow down your audience further and get better results:
I first tried designing the layout and sketching ideas for my landing page. However, I realized I needed to know the content for the landing page to create a wireframe that fits the length and information. Next time, I will start by defining copywriting.