From Mediocrity to Wow: A Case Study on Revamping Our Homepage

Intro

"We cannot solve our problems with the same thinking we used when we created them." - Albert Einstein

Share on Twitter

I am thrilled to share our story of switching to a new website design with the Indie Hackers community. After almost two years in the market (Front-End development), our team decided to take a step aside, rethink the processes, and introduce a new branded homepage with some hidden gems. We aimed to create a more user-friendly and visually engaging customer experience. The new design features a modern look, updated content, and streamlined navigation.

Background

In most cases, when a new prospect comes to us, we spend a significant amount of time on onboarding activities. Of course, we share our previous projects, testimonials, references, etc. These activities are time-consuming and not always relevant to the outcome.

After some brainstorming, we realized that it would be better if most of this information our prospects discovered on their own and decided without any actions from our side. It’s not only a good idea for time spent but also for our future clients. No one pushes them to decide, and they will feel free of choice and understand we are an excellent fit for each other.

With those items in mind, we started working on the design and user flow in parallel. Here are our goals:

• All our visitors should be able to find all the necessary information on the landing (index page)
• We should present some case studies
• It should be possible to book a call right from the landing page
• It should be possible to contact us without additional apps from the user side
• It should be possible to buy a subscription right from the landing page
• Fast page loads, simplified routing, and excellent SEO and Lighthouse performances
• Simple CI/CD processes
• All content should be provided via Headless CMS
• Any new case study or blog post should be added via Headless CMS without touching the code base

Challenges

Our team likes challenges, and I must say that we are extremely good at them. We dealt with many interesting and head-scratching tasks while working on our new homepage. The list of challenges is pretty long, so I decided to share with you our top five challenges:

• Develop a consistent ecosystem and infrastructure
• Social share behaviour
• Use only the free tier option for all 3rd-party services
• Add a contact form
• Add subscription functionality

Solutions

Before writing any line of code and making any decisions, we usually do an elementary but essential activity - research + white paper and pencil.

First, we started thinking about a cloud provider for CI/CD processes and code sharing among the team. The most obvious choice in our case was to use GitHub with its infrastructure, including GitHub Pages, GitHub Projects, and GitHub Actions. The main benefit of using these services is that they are on one platform, and you don’t need to break the bank.

Speaking of the tech stack, we chose Next.js, React.js, and TypeScript. While we had hands-on experience with React.js and TypeScript, we were new to Next.js. However, we decided to give it a shot and see if it lived up to its reputation as described in ads and articles. Another reason for choosing Next.js was that some planned functionality required server-side code, so having JavaScript on both the server and client sides seemed beneficial. We used Material UI, built on top of Google Material design concepts, to create the UI and reusable components. It offers a rich set of components with enterprise-level performance and high extensibility, including responsive behaviour, accessibility, and light/dark themes.

After a week of development, we realized that GitHub Pages didn't support some of the functionality provided by Next.js, precisely API routes and Edge runtime. To overcome this limitation, we decided to switch to the Vercel platform. However, we encountered a few blockers: the Pro plan was required if the repository was under an organizational account, and we wanted to avoid potential vendor lock-in. As a result, we searched for alternatives and discovered Cloudflare Pages, which fulfilled all our needs. It turned out that Cloudflare Pages only supported the Edge API environment, so we had to write the server code accordingly, considering this limitation.

The next challenge was achieving the desired "Social share behaviour." When someone shares a link to our website, we want to display a title, a short description, and an image.

Twitter's behaviour when someone shares the link

LinkedIn's behaviour when someone shares the link

Let’s discuss the contact form and the possibility of sending messages from the landing page. For the first version of our landing page, we added a pretty simple solution:

<a href="mailto:[email protected]">
  get started
</a>

When a user clicks on that link, the default email client opens, and the user can write an email. However, we received feedback that many visitors to our website don't have a default email client or don't have one at all.

To improve this functionality, we decided to build it from scratch instead of using a third-party provider for the initial version. We developed our solution using nodemailer. We successfully implemented it, but we encountered several issues:

• Cloudflare Pages don't support Next.js API Routes based on Node.js. It only works with Edge Runtime.
• We had to deal with low-level code such as SMTP, ports, configurations, etc.
• The solution was unreliable and required too much manual work.

As a result, we decided to explore third-party providers for this task. We came across a solution called Resend through a post on Twitter. The integration process was straightforward. The only difference was that we opted to use Resend's API instead of the npm package because Cloudflare Pages don't support using npm packages in their Functions. Here is a simplified version:

// ...
const json = await req.json();

const data = await fetch(`${process.env.RESEND_API_SEND_EMAIL}`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json; charset=utf-8',
    Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
  },
  body: JSON.stringify({
    from: process.env.RESEND_FROM,
    to: process.env.RESEND_TO,
    subject: '🔥 New request on varbintech.com via contact form',
    html: json.html,
  }),
});
// ...

The last functionality we tackled was the subscription feature. Honestly, it was the most challenging one. It wasn't just about writing the logic and using APIs, it involved passing compliance checks and chatting with representatives. After thorough research, we found two third-party providers suitable for our needs:

• Paddle
• Lemon Squeezy

You may have heard about these providers before. However, it took us two to three weeks of waiting, chatting, and exchanging emails before we finally received approvals from the Lemon Squeezy team.

Lessons Learned

• Working with a team is an excellent choice
  • Collaborating with an experienced team can bring numerous benefits to your project. It enables you to tap into diverse perspectives, engage in collective problem-solving, delegate tasks, separate responsibilities, adopt Agile practices, and leverage team members' individual strengths and expertise. Even for projects like ours, involving a part of the team was wise.
• Set up the right mindset and never give up
  • Cultivating a positive and open mindset is crucial for success in any project. Approaching tasks with enthusiasm, adaptability, and a growth mindset can foster creativity, resilience, and effective problem-solving.
    Captain Jack Sparrow famously said, "The problem is not the problem. The problem is your attitude about the problem.". It was one of our motos during the development process
• Daily and weekly routines matter
  • Consistency in maintaining daily or weekly routines can significantly impact overall productivity and well-being. Establishing and adhering to practices that include self-care, work-life balance, and personal growth activities can enhance focus, energy levels, and mental clarity. It is essential to recognize the value of routines and make a conscious effort to prioritize them. While it's natural to occasionally falter in maintaining routines, being aware of their important

What’s next

• Continue onboarding existing clients to our subscription model
• Introduce a separate environment for headless CMS (e.g., Strapi)
• Integrate with headless CMS to simplify and streamline the case studies and blog content workflow
• Post all case studies that we have already prepared

Discount code for a monthly subscription

• QYMZM1NQ - 10%
• Expiry date - Sat, 10 Jun 2023