Sqala
Description
This project is one of the most complete I’ve worked on. It’s a landing page created for Sqala Tech, where I had full creative freedom to explore both the UI and the animations featured on the page. The result was something highly detailed and rewarding, for the user, the stakeholder, and for myself.
Client
Sqala Tech
Year
2025
Category
Landing Page
Role
UI / Motion Design
Wireframe → Website
The wireframe stage was essential to understand the direction we were taking with the project. If you look closely, the approved wireframe and the final website share several similarities, but they’re quite different, especially in the layout of the Hero section. This happened because, by the end of the wireframe phase, the client had not yet sent us photos of their product. As soon as we received the images, we had to restructure the layout to highlight the desktop version.
During the Key Visual (KV) stage, we discussed the change with the stakeholder and presented strong arguments showing that a Hero section with the images more prominently displayed would better communicate the product and, consequently, increase the page's conversion rate. The stakeholder was very understanding and accepted the new proposal.
Polish
The main highlight of this landing page, both for the client and for Insany Design, was the high level of polish achieved—paying attention to even the smallest details, such as lighting, texture, and pixel-perfect precision.
We refined the headlines to directly communicate the product’s value, using accessible language aligned with the brand’s identity. The typographic choices and strategic placement of the titles were designed to capture attention and make the product’s value proposition easy to understand.
Motion Design
We used animations created in Rive to add dynamism and interactivity to the interface, highlighting key elements without compromising the site’s performance.
The animations followed a step-by-step process: the initial idea came from the stakeholder → a rough sketch was created to validate the static illustration → final illustration approved → motion design produced in the Rive App, and finally, the animation was implemented into the landing page using the .riv file generated by the tool.
Consistency
We included complementary visual elements that reinforce the brand’s identity and contribute to a cohesive experience. Each component was carefully crafted to maintain both visual and functional consistency throughout the site.
Footer
Since we’re working with a landing page, there are no external links—only anchor links, which we chose to include solely in the top menu. In the footer, we kept things simpler, prioritizing the FAQ section as requested by the client.
Cross-functional Collaboration
Throughout the process, I maintained close collaboration with the Insany team, participating in internal feedback sessions that were essential for refining the design. This ongoing exchange ensured that the proposed solutions were aligned with the project’s goals and the stakeholders’ expectations.
Menu
The menu was something that wasn’t very clear in the client’s mind at first. We had to gather many references and present several concepts to help them gain a clearer vision of what they wanted. Sketches were created to validate the content and hierarchy, until we arrived at a solution that was both functional and visually appealing—on both desktop and mobile versions.
Learning
The Sqala project was an opportunity to apply my skills in UI and Motion Design to create an engaging and functional digital experience. Through a user-centered approach and effective collaboration with the team, we developed a landing page that clearly communicates the product’s value and offers an intuitive navigation experience.
