Hanna Balabushko

The project was created for an experienced QA mentor and Technical Team Lead with over 10 years of experience in the IT industry. Anna actively shares her expertise through one-on-one mentoring programs as well as within global initiatives such as Women in Engineering (WINE) and Women for the Future.

The main goal of the website is to present Anna as an expert who helps career switchers confidently enter the IT field and supports specialists at all levels in developing their career skills, preparing for technical interviews, creating a personalized growth roadmap, and progressing toward leadership positions.

Deadlines:

  • Analysis:2 weeks

  • Design:3 weeks

  • Launch:3 weeks

  • Support:on request

The tasks we worked on

    • To reflect the multifaceted image of an expert who works not only with beginners and career switchers but also with experienced professionals seeking new opportunities for growth in QA
    • To create a landing page structure that clearly and broadly communicates Anna’s expertise and approach - even during “cold” interactions
    • To convey a sense of calm, support, and confidence through a light color palette, visual style, and tone of voice, so that the website becomes not just a service presentation, but a reflection of the expert’s personality, working style, and values
    • Create a minimalist design that highlights not only the services, but also the expert’s experience, approach, and values
    • Communicate the core idea: helping career switchers and testers find their career path, build a personalized roadmap, prepare for interviews, and grow into leadership roles
    • Show the broad target audience - from beginners to experienced professionals who need support, feedback, and structured growth
    • Emphasize the formats of collaboration: one-time consultations, mentoring programs with roadmaps, and individual guidance
    • Focus the main communication channel around the contact form rather than direct messages on social media
    • Add modern interactive elements and animations that enhance the user experience without overloading the interface
    • Build a structure that reflects the client’s expectations: the website should be “about her” and highlight the possibility to book individual consultations and mentoring programs - both for those already working in QA and for career switchers just entering the IT field

The solutions that were implemented

image
  • A well-thought-out page structure: from the hero section focused on personal branding to blocks showcasing services, benefits, statistics and a contact form

  • Throughout the site, background photos of the expert are integrated to reinforce her personal brand through visual presence and create a sense of live communication

  • The website design is optimized for three types of devices: desktop, tablet, and mobile

  • A concrete wall texture in the background of key sections, used as a metaphor for the solid foundation of knowledge and experience that the expert helps mentees build

image
image
  • A light minimalist color palette with an accent blue tone that evokes a sense of calm, support, and trust - the expert’s core values

  • The statistics block is designed with a focus on a large photo of the expert and animated floating numbers, highlighting her real experience and achievements. This approach showcases expertise and makes the information both accessible and convincing

  • The services section is structured so that the center card visually stands out, drawing the user’s attention to the key service package the expert aims to promote as the most optimal in terms of price and value

image
image
  • The contact form serves as the main communication channel: it allows the expert to receive requests from interested users, reducing the need for direct messages via social media

  • A block with links to active social media accounts (LinkedIn, Instagram) is placed in the footer, where more of the expert’s activity is showcased - while the main goal for the user remains filling out the request form

  • A navigation menu that supports the brand

    • The navigation menu is implemented as a familiar mobile-style burger icon, keeping the focus on the expert in the hero section
    • When hovering over a menu item, an additional effect changes the expert’s photo in the main block
    • This solution adds interactivity to the site and strengthens the personal brand through visual dynamics
  • Animations: a unified motion style

    • Animations are selected to be minimalistic and subtle in order to avoid overloading the interface and to maintain a sense of lightness
    • The main idea is to create a consistent animation style that connects different sections of the page and emphasizes key messages - such as a floating effect on cards describing target audiences and numbers in the statistics block, smooth text appearance in the “Collaboration Stages” section - which together create a sense of continuity
    • These details make the website feel modern and alive, while still aligning with the expert’s style, which aims to avoid unnecessary visual noise
  • Dynamic Advantages Carousel

    • The advantages section is implemented as an auto-scrolling carousel - this format makes it possible to present a large amount of information in a compact way, while keeping the design light and the interface modern
    • The key idea of this section is to show that these advantages are not just a list, but an essential part of the expert’s positioning
    • Interactivity improves perception: when the user hovers over the section, the scrolling stops, allowing them to read the full text comfortably

Responsive design

laptop frame
Desktop view
Mobile phone frame
Mobile view
Mobile mockup
Mobile view

The team that created this site

The technologies and tools

  • Figma

    Adobe Photoshop

    Astro.js

    Typescript

    Tailwind CSS

  • React.js

    Swiper

    GSAP

    React Hook Form

    Zod

View more cases

Book a consultation today and get it for free!