Altfit
Altfit is an aspiring Indian startup that aims to bring a variety of global workout programs to a single app in a follow-along format that is easy to digest for users. This website serves as a landing page to incentivize users to download the iOS app and inform users about its feature offerings.
Copywriting & Custom Components
AI Usage
Scope of work
UI, UX & Webflow Development
Tools
Webflow, Figma & Lottie
Duration
90 days
Capcity
Freelance (Solo)
Problem Statement
Altfit's old website was outdated from both an information & aesthetic perspective. After completing a redesign of the app, it was only natural to update the marketing landing page as well. Using the app's design system with minor modifications resulted in a quick turn around time.
Process
The client's requirements were straightforward and the process was kept the same as well. The initial focus was on collecting good references to give direction to the layout and overall feel of the site. Once the layout was determined through wireframing, UI and interactions fell into place shortly after the goal of telling a story about each product feature through animations.
Reference Collection
The client had a very specific look and feel that they wanted to accomplish. Based on some examples they shared, I browsed through Mobbin, Awwards & SAAS Landing Page to build the collection further.
Wireframing & Copy Writing
The wireframe and hierarchy followed the same structure that was laid from the client's previous website home page with some small tweaks. However, the copy for all the sections was completely overhauled with the help of Gemini.
UI & Animations
The client's mobile app UI was already ready, so it was easy for me to use their existing design system to create components & layouts. Figma's Lottie Plugin was extremely robust in creating relatively complex animations with ease. It used Figma's smart animate keyframes and translated that into downloadable Lottie/json files.
Webflow Development
The development of the site challenged me to use new libraries like Lenis smooth scroll, try out different interactions with Lottie & embrace the Webflow designer. The UI was slightly tweaked at the time of development but I was quite satisfied with the parity of design to development.
Conclusion
Making the website for Altfit was a rewarding experience that tested my visual and technical abilities while also managing stakeholder expectations. Creating Lottie Animations & implementing Lenis Smooth Scroll were learnings that I continued to use in subsequent projects.
