ANJALI SHARMA | PRODUCT DESIGNER
HACKERRANK
Graphic Designer
Adobe Creative Cloud, wire-frames, hi-fidelity mockups, marketing, brand design
Initial sketches for landing page design & concept
Iterations of lo-fidelity wireframes
Hi-fidelity mockup of landing page
GOAL
Design an engaging landing-page experience for a global coding challenge that would attract student developers and clearly communicate how the event worked. The experience needed to support awareness, motivation, and participation across multiple competition rounds. The goal was to create a structure that felt exciting and thematic while still making the event easy to understand. This required balancing brand storytelling with clarity, flow, and information hierarchy.
MY ROLE
-
Collaborated with the marketing team to shape the gamification concept for the event.
-
Served as the sole designer for the landing-page experience from early sketches through final mockup.
-
Used wireframes and visual exploration to define the page structure and communicate flow.
-
Partnered with developers during build and launch to help ensure the final page matched the intended design.
INQUIRE
Because the event concept was closely tied to business and brand goals, early conversations were important for understanding what the founders and marketing team wanted the experience to achieve. I needed to understand how the competition would be structured, what information participants would need, and what would make the event feel distinctive. This phase helped clarify both the business objective and the user-facing communication challenge. It established the foundation for designing an experience that could be both engaging and easy to follow.
RESEARCH
I worked with the marketing team to review examples of similar coding competitions and hack-a-thons run by more established developer-focused companies. I also incorporated insights from developer surveys and interviews to better understand what potential participants valued in these experiences. On the design side, I looked at landing-page and competition-based experiences to explore how structure, pacing, and visual energy could work together. This research helped shape both the event flow and the communication strategy of the page.
DEFINE
After the event structure became clearer, I translated those requirements into sketches and low-fidelity wireframes. This step helped determine how the page should introduce the event, explain the rounds, and maintain momentum throughout the experience. Multiple iterations were explored to test layout options and content grouping as details continued to evolve. Defining the page in this way made it easier to align stakeholders before moving into final design.
DESIGN
Once the World Cup theme was selected, I developed a visual direction that felt energetic and event-driven while still supporting HackerRank’s brand identity. The design work focused on creating a clear and digestible experience that could communicate logistics without losing excitement. High-fidelity mockups brought together structure, hierarchy, and thematic styling into a single landing-page experience. The final design aimed to motivate participation while keeping the flow intuitive for a global audience.
DEVELOPMENT
After the design was approved, I provided the developer team with the mockups, assets, and specifications needed for build. I stayed involved during implementation to review progress, answer questions, and help maintain alignment between the design intent and the final product. Once the landing page was built, it was tested by multiple teams to identify issues before deployment. This phase ensured that the experience worked not just conceptually, but as a functioning event destination for users.
