🧮 Problem Statement

Scaler is coming up with a new product called “Scaler Ninja”, which is a new course about Competitive Programming. Design a landing page for the same.

Deliverables:

• You need to specify the design process you’d follow and carry out two processes in detail and document.
• Add three sections based on your understanding which are essential on the landing page apart from the ones given in the content.
• A neat and clean high-fidelity UI of the landing page. It’d be great if you could consider Scaler’s branding and design for the same. The brand guideline book is attached below.
• You can change the content and add relevant points if necessary.
• Add images, icons, and illustrations wherever necessary.

🔫 Research

It is time for some inspiration & competitive analysis. I decided to visit every significant ed-tech startup website and landing page designed by these startups, such as Hackerrank*, HackerEarth, Classplus, Byjus, Udemy, Skillshare, Coding Ninja, Codechef, Coding Blocks, Coding Minutes, Leet Code, Codecademy, Codeforces Unacademy, Graphy, Toppr, etc.*

I also visited many well-designed and high-converting landing pages of prominent startups and organisations such as Razorpay, Hacktoberfest, Growth School, Discord etc.

There were multiple objectives for performing the above step :

• To find inspiration for visual design.
• To understand the copy of their landing page.
• To figure out the Information Architecture.

🧠 Understanding Scaler’s Design System

Before Designing, I had to understand Scaler’s Design System. For this, I referred to the Brand Guidelines pdf sent by Scaler.