Revamping HackerEarth’s Landing Pages: A UX Makeover for User Delight
This project unified brand visuals and improved engagement by creating a consistent, user-centered interface across platforms, reinforcing HackerEarth’s identity while supporting business growth.
Role
UI & Web designer
Company
HackerEarth
Collaborations
Creative lead, Product Marketing Manager, Leadership team
Duration
10 weeks
Setting the stage
About HackerEarth: HackerEarth is a B2B2C SaaS platform leading platform for developer assessments, hiring, and community engagement, trusted by both companies and developers globally.
The landing pages play a critical role as the first touchpoint for users, showcasing HackerEarth's offerings and guiding visitors through various solutions, events, and resources.
Design team i was a part of:
Identifying Key Challenges with the Existing Design
Need for showcasing the product suite clearly
Outdated visuals misaligned with modern marketing trends.
Lack of clear content design, leading to confusion and missed conversion opportunities.
Reduced user engagement and inefficient conversion paths.
Color Palette & Typography
Proxima Nova
Heading 1 Bold 56px
Heading 2 Bold 40px
Body1 Regular 24px
Body2 Regular/Medium 18px
Who are these users engaging with the platform?
The Recruiter (Tech Hiring Manager):
Goals: Source top technical talent, streamline the hiring process.
Pain Points: Difficulty navigating the platform to find relevant tools and features quickly.
The Developer (Job Seeker & Dev Community Member):
Goals: Participate in coding challenges, find job opportunities.
Pain Points: Needs more intuitive access to challenges, job postings, and developer resources.
Ideation to design: Elevating Visuals: Introducing a Fresh, Modern Look
Here are some options of design elements i designed for the hero fold of the website.
Here are some of the many options of the first fold we went over:
Validating the Design: Usability Testing & Iterations
Followed WCAG Standards and Used Accessibility Tools:
I adhered to WCAG 2.1 guidelines to ensure color contrast, text size, and navigational accessibility were all compliant. I used tools like Stark for Figma to verify contrast ratios and Color Oracle for color blindness simulation, helping make visuals universally accessible.
Audit & Iterate
During implementation, collaborated with developers to ensure designs are built with accessibility in mind.
After development, ran automated accessibility tests (like Axe or Lighthouse) and manual tests to catch any remaining issues. Refined the design based on these findings.
Delivering Results: The Redesigned HackerEarth Landing Pages
Impacts: Significant Improvement in Key Metrics
With a more streamlined and user-friendly interface, users were able to move more seamlessly through the conversion funnel. Simplified forms, clearer CTAs (Call-to-Actions), and a better flow of information helped reduce friction points, leading to a significant increase in conversions and a reduction in drop-offs. This directly supported business goals by increasing lead generation and customer acquisition.
Reduced bounce rates by
20%
Increased session durations by upto
2
Minutes
Improved conversion funnel drop-offs by
15%
Lessons Learned and Looking Ahead
What went well?
Fast Iterations,
Clear content design, Early Accessibility focus,
User centric designs
Challenges
Challenge:
Aligning Stakeholder Expectations
Solution:
Regular communication and collaborative workshops with marketing and technical teams helped to ensure alignment, balancing both business goals and user needs.
Future Opportunities
AI-Driven Recommendations:
Implement AI-driven features to deliver personalized content and product recommendations based on user behavior and interactions.