Exotrick Lab

Structure and ideas for the website

During the briefing with the client, we discussed her wishes and the key features of the course. I put together a competitor table to analyze page structures, commonly used terms, spot interesting ideas, and also see what we could do better.

As a result, I formed a pool of ideas that could be useful specifically for our website and created the landing page structure. At the end of this step, we know which content blocks the website will include and can move on to working on texts and navigation.

Wireframes

At the wireframing stage, we iteratively refined the texts. In this case, I chose a friendly and motivating tone of voice and made sure to maintain it consistently along the whole page. It was also important to ensure that the information was clear and logical, that most questions were answered in the text, and that there was a clear target action supported by call-to-action buttons placed throughout the page.

Since it was Jul’s first course, it was crucial to demonstrate her competence to build trust. We highlighted her professional background, included real screenshots of her current students reviews. Jul also recorded a short video introduction where she personally explained how course is made and invited people to join.

Design concepts

At this stage, we defined the visual direction of the page. I suggested three options to choose from:
[1] a mix of femininity and brutalism;
[2] a graphic black-and-white concept with an emphasis on vibrant photos;
[3] a bold concept with red accents and rough textures in the background blocks.

The client liked the third option best, as it fit the atmosphere of the course.

After designing the entire page in Figma, I transferred the site to Tilda. I added subtle on-scroll animations to further engage users in exploring the site.

The animations also support the metaphor embedded in the design: transparent blurred elements symbolize a fogged-up mirror in the studio. This conveys how immersive the tricks are, requiring full dedication while bringing absolute joy and self-appreciation.

The site is fully adaptive across all devices: large and small desktops, tablets, and smartphones.

For each step I prepare a video presentation and made interactive prototypes in Figma. This way, the process was clear, and the outcome is well thought out and predictable.

Design and development

Technical settings

One of the course promotion steps was a reel offering a free trial lesson. I helped set up automatic replies to comments with a thank-you message and a link to the lesson.

In addition, we connected the payment system to the website’s cart. To prevent the cart from looking too generic and to make it an organic extension of the design, I added custom code. It adjusted the cart appearance, including dynamically adapting the form color to the selected pricing plan.

User experience

I considered not only the main page itself, but also the technical pages that users don’t usually see, but that guide them smoothly through the website and create an impression of care and professional service. That’s why I also designed a 404 error page, a success page after purchase, and a failure page in case something went wrong during payment.

Website launch

I connected a domain to the website, set up a domain email, and configured automated purchase confirmations. I also set up a waiting list for when the course is on pause in the future. Additionally, I organized lead collection conveniently in separate CRM sheets with automatic notifications for new applications.

The client’s feedback on our collaboration: "I've never seen such beautiful websites before. And I really like how it looks on a phone. I’m impressed with the result of our work together!"

Feedback