Here’s how I made the borderless landing page intuitive
Case study: Borderless Landing Page Redesign
As part of the 10k Designers UX/UI cohort assignment, I had to redesign a landing page. My goal here was to focus on making it more intuitive and engaging.
Project brief: “Design a Landing page for Borderless that helps companies solve international hiring and immigration processes.”
About Borderless
Borderless is a platform that simplifies global hiring for businesses by providing a one-stop shop for sponsorship, immigration assistance, recruitment of pre-vetted international candidates, and ensuring compliance with immigration regulations, essentially acting as a bridge between businesses and international talent to streamline the entire process.
Why do we need to redesign the Borderless landing page?
Lack of Clarity
It fails to effectively communicate its purpose or value proposition to the user, resulting in a lack of clarity and subsequent disengagement, and leading to high bounce rates.
Outdated Design
The current landing page design doesn’t meet modern aesthetic standards and lacks visual appeal, leading to decreased user engagement and potentially hindering conversion rates.
Weak Call-to-Action
Users are encountering difficulties in understanding the next steps or the benefits of taking action, leading to reduced engagement and missed conversion opportunities.
Ideation
Refine the message, Crafting a clear headline and value proposition that instantly tells users what you offer and its benefits.
Giving the page a modern makeover by using clean layouts, high-quality visuals, and a user-friendly interface to keep visitors engaged.
Making it clear what we want users to do next, Using action-oriented language, and prominent buttons, and highlighting the benefits of taking action.
Here is how my design has addressed both the user and business needs before getting into my process.
Design Success Validation
I conducted user testing with 10 participants with a combination of qualitative and quantitative methods and received valuable feedback that helped me validate and measure success.
These are a few major usability testing results that pinpoint specific areas for improvement.
And from the heatmap results I identified the areas of the landing page that receive the most attention from users. Based on both results, I reiterated and ultimately arrived at the final design.
The Design Process
Research
I started with initial explorations and secondary research on Borderless and the market of global hiring which provides similar services.
Knowing the target user
Group 1: Healthcare Recruiters, who are in need of sourcing candidates from abroad to address skill gaps, gain fresh perspectives, or expand into new markets. This approach requires navigating visa complexities, cultural differences, and communication barriers, but the benefits of a diverse and qualified workforce can be significant.
Group 2: Job seekers, individuals driven to pursue medical careers beyond their home borders. Motivations can range from seeking unique specializations unavailable locally, to contributing their skills in underserved regions or simply experiencing diverse healthcare practices.
Competitors
Analyzing competitors, helped me in ensuring the landing page effectively communicated the unique value proposition to the target users and benchmarking. Ultimately, provided insights into industry trends, helped identify opportunities for differentiation, and informed strategies for improving conversion rates.
Integrating AIDA framework
For creating a story that unfolds itself, the AIDA framework significantly influenced my designs. Here’s how it translated into my landing page design:
Attention: I knew the first impression was crucial, so I chose an eye-catching headline and a video to draw visitors in.
Interest: To keep them interested, I provided solutions that spoke directly to their needs.
Desire: Building desire involved showcasing the unique benefits and including real-life success stories as testimonials.
Action: I ended with a strong call to action, making it easy for visitors to take the next step and engage.
Information Architecture
Using the AIDA framework, I developed an information architecture that effectively tells our brand’s story. This design captures Attention, sparks Interest, builds Desire, and drives Action, guiding users toward conversion, retention, and engagement.
Wireframing
I began with traditional paper wireframes, which allowed me to quickly sketch out and visualize initial concepts. Converted these sketches into digital wireframes enabling easier modifications. To accelerate the iteration process, I leveraged AI tools, which provided valuable insights and suggestions, helping me to refine the design efficiently. Ultimately, I finalized one that had a well-structured story.
Style Guide
While choosing the colors and typography, I considered the preferences of our target audience. The choice of a primary blue hue was intentional, as blue is widely recognized for its ability to evoke feelings of trust and reliability. Additionally, this blue aligns seamlessly with our established brand colors, ensuring a consistent visual identity.
Iterations
Based on the usability test and heat map results, Many iterations were done and these are the significant ones
The hero section was not engaging enough, leaving users confused about the next steps. Additionally, users found the headline and the main unique selling point unclear. Many users found images, graphics, and videos helpful. As a result, I decided to enhance visual engagement and provide clearer calls to action.
A considerable number of users encountered challenges in fully grasping the array of services available. Addressing this problem, I revamped the layout to be more accessible, resulting in a substantial improvement in user awareness.
Final Design
After numerous iterations, I have successfully created the landing page, and here is the breakdown of each section.
The hero section concisely answers “What is Borderless?” with the compelling headline “Global Hiring Made Simple.” It highlights the key advantage with “Why is Borderless better?” emphasizing that the service is 10 times faster and 3 times cheaper. New users are invited to take action with a clear “Get Started” call-to-action while existing users can easily access their accounts with a “Sign In” option.
“Copy is a direct conversation with the user.”
Showcasing the healthcare companies that Borderless collaborates with immediately after the hero section enhances trust and credibility, significantly boosting conversion rates. This strategic placement reassures potential clients of Borderless’s reliability and expertise in the healthcare industry.
Now the services offered by Borderless are in one place from sponsorship to recruitment by visually showcasing the verified profile image that keeps them interested. This approach not only addresses user needs directly but also encourages further exploration through a “Know More” call-to-action, making users learn more about specific services tailored to their requirements.
I chose a layout that showcases the unique benefits and advantages of choosing Borderless creating a desire that drives users to explore further.
“You sell on emotion, but you justify a purchase with logic.”
The three-step process guide simplifies the complexity users often face and saves time by clearly demonstrating how straightforward and complete the process is. It reassures users that it is simple.
Included real-life success stories as testimonials that help create an emotional connection and demonstrate the value of the service offered. Also inspires potential customers and reaffirms their decision.
Answering the most common questions and concerns that potential customers may have about the service. It provides clear and concise answers to help users make informed decisions and overcome any hesitations they may have, which ultimately saves time and increases conversion rates.
As the user has made it to the bottom, it’s clear that they are deeply engaged. I have also absorbed all the valuable information that Borderless offers. The user ends with a strong call to action, making it easy to take the next step to book a demo call.
Full design: https://www.behance.net/gallery/199725187/Borderless-Landing-Page-Redesign
Reflections
I unlearned the conventional design process, embracing its non-linearity, and discovered that establishing a structured approach from the beginning can significantly enhance efficiency and save time.
By defining clear time constraints for each step and knowing when to stop, I was able to complete and submit my work on time.
Consistently documenting the process allowed me to revisit and reflect on all feedback received, facilitating iterative improvements. This practice greatly eased the process of writing the case study.
The End
Designing this landing page has been an epic journey, from brainstorming crazy ideas to perfecting every pixel. Also tested with many folks like a mad scientist and I’m pumped now to see this developed in the near future.
Congratulations on making it to the end! 🎉Drop those comments, feedback, memes, or hit me up for collabs. Let’s vibe and create something epic together! Twitter/X • LinkedIn
