Website and an interactive coaching platform of a career consultant Polina Usova

Career consultant Polina Usova
Project type
Website as an education and consulting platform with e-commerce functionality
Technologies used
Laravel, Vue.js, Tailwind CSS, Inertia.js, Alpine.js, MySQL, NGINX

Project description

This one was a contract to develop a complex system with a private education and consulting platform with the online purchasing functionality and a custom CRM. The project consists of three main parts:

  • Public website allowing users to purchase products and book appointments
  • Private area for users to manage their purchases, bookings, and courses
  • CRM system for managing sales, customers, and content

I ended up creating a multi-purpose system that allowed my client to avoid integrating 3rd-party platforms like GetCourse into her project and stay.

That also allowed my client to avoid introducing the middlemen into her product and service distribution channels and sell directly to her audience. Which keeps the tech limitations and external fees to a minimum.

Creation of a public website

The websites of the majority of Polina's competitors and colleagues are made with the zero-code page constructor called Tilda. It's a general-purpose page constructor that, despite being quite modern and well-made, doesn't offer any customization capabilities, so that wasn't an option for us in the first place.

A sales funnel or a sink for your budget?

Quite often, the limitations and the negative effects of using a no-code solution like Tilda are amplified by the incompetence of the contractors building websites with it. For demonstration, I ran some tests with Google PageSpeed Insights on a Tilda-based website of one of the professionals in the same field as my client's, and the results were horrendous:

Such a low score is a clear indicator of the fundamental problems in the website optimization, and it's especially important to keep such parameters as First Contentful Paint, Time to Interactive, Largest Contentful Paint, and Total Blocking Time in the green as they might negatively impact your website's search engine ranking otherwise.

But the most significant thing to keep in mind is the behavior of the users that will leave your website long before it loads in 12 seconds on their mobile devices, like that example website does. It means your AD budget will go down the drain since people will visit the website and then bounce while you have to pay for the traffic.

The solution is simple: just make your website fast!

Remember that owl sketch meme? "Draw a circle. Now, draw another circle. Now, draw the whole damn owl!". No, I'm being serious, it's not as hard as it seems to make your website work fast.

First, I decided to stick to the monolith app architecture using Laravel with a bit of Redis caching to speed up fetching the globally shared data. On its own, this approach already yields great results on modern VPS solutions.

Polina's website needed to be well optimized for SEO, too, as it was designed for unique long-form content, and the UI had to be centered around text content readability and not heavy-duty animations or full-screen photos in high resolution. That, combined with the tech stack, was a solid first base and allowed for keeping the load times low.

Second, I've created a custom block-based page constructor that was designed to be highly performant as it utilizes JSON columns in the database to store the content block data and reduces the DB query load.

It requires only one simple query to fetch the record containing all the content blocks for the page, and it's as fast as it gets. That way, even without caching the data in Redis, it's easy to keep the high page loading speed and keep things stable.

Third, I optimized all the heavy graphics on the website for a balanced loading speed / image quality ratio. But, most importantly, I stuck to a minimal approach to framework and library load on the frontend.

Tailwind CSS along with Purge CSS helped me keep the CSS production bundle to a minimum, making the layout loading blazing fast. And, for interactivity, I added the brilliant JS framework called Alpine.js to the stack. It's really lightweight and incredibly practical to keep your UI alive without bloating the frontend bundles.

Fast, convenient, and highly readable website regardless of the type of device being used

The results of implementing everything I described earlier can be seen on the screenshots below. I ran the complete Polina's website through Google PageSpeed Insights, and you can see that it performs equally great on both desktop and mobile devices, which makes using this website a pleasant experience.

Building the private user area

Most websites selling info products work as standard shopping cart solutions, send the receipts to customers, and thank them for the purchase, letting them wait for the purchased products to come via email by any other channel. That would be especially weird and impersonal in a business that is focused on building trust in helping people find their true calling and change their lives for the better.

Instead, I designed and built a whole minimalistic and user-friendly education platform for the customers that lets them book consultation appointments, complete interactive tasks, and go through courses, all while keeping the direct communication with the author on the spot.

Keeping personal stuff in private

Some systems like GetCourse, for whatever reason, only provide public communication tools, making personal commentary visible to other customers of the course that's being discussed. In the context of psychological consultations it's absolutely inappropriate as it discourages the clients to share personal things and disrupts the whole process of building trust.

For Polina's project, I picked a more reasonable approach: everything that the customer does and when they leave a reply to some tasks, etc. — it's always private and shared only between the customer themselves and the author of the course. As it should be, naturally.

Simple yet fast and convenient user interface

I've made the private user area of the website into an SPA built with Vue and Inertia.js. Built on top of a Laravel monolith, this combination yields amazing results from both the UI and DX perspective. It makes the interface feel snappy and the user experience — seamless, but it also allows me as a developer to adjust or modify the UI and functionality rapidly.

An exclusive CRM for managing the sales

The main tool in this whole project is its custom CRM system. Not just a classic CRM that you're used to seeing in SaaS projects, but a multipurpose control center that allows the business owner to manage sales, products, courses, communicate with the customers, and manage the website content through a custom, component-based page constructor. All in a robust SPA.

The goal of this system is to minimize the need for micromanagement and automate most of the routine tasks, and where you can't automate them — simplify them. The business owner only needs to supervise the main events such as new orders, bookings, and customer feedback.

While Polina sleeps or works on her other projects or blog content, her own platform is generating revenue, processes the sending of the purchased info products, access credentials, links, etc. The booking system is also automated along with the course management and personalization, and Polina's attention and involvement is only required when there is some personal scheduling conflict or an unexpected change of plans with a booked appointment.

An efficient monolith with a modern face

This system has a lot of tools built into it and makes it easy to work and make money without relying on the unnecessary 3rd-party services for everything. It's an autonomous, user-friendly project that connects even the less tech-savvy users with a person that can help them change their lives for the better not through wishful thinking, but through the psychological analysis and methodology.

Basically, this whole system is one layer of abstraction away from vanilla languages that its frameworks utilize. Not only does it make maintaining and extending the project easier, but it also allows the business owner to widen the talent pool of potential developers to take on the project after me, if, for some reason, we stop working together, or need to hire some help for some major extension.

The results from a client's perspective

From the monetization standpoint, Polina came into this project with a strong product and social media background with a following. She pretty much tripled the ROI of this platform in a month and a half since launch.

She's now able to create and independently publish new products and services on her own commercial and educational platform whenever she pleases, and the system will do most of the work for her, saving her a lot of time and effort to enjoy life and plan her next goals.

Considering the specifics of the info business, Polina doesn't need to manufacture physical goods and resources, which allows her to scale her business far beyond the capabilities of a single person, comparing to what she was able to do before we've created this system.