Will Schmid - web designer
Zenfit.io
New message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Zenfit.io
development
webflow
interaction design
CMS
localization
client-first
Zenfit, a fitness software company, underwent a full brand redesign and required a new website to reflect their updated look and product features. This case study outlines the development process, challenges, and successful outcomes of the project.
Project scope
- Develop a new website in Webflow, ensuring it is scalable and easy to maintain.
- Create the following pages for initial launch: Home, Pricing, About, Nutrition, Workout Builder, and Progress Overview. Following launch there will also be Zenfit App, and Custom Website pages.
- Implement localization for 5 different languages post-launch.
- Build a blog leveraging Webflow's CMS, allowing content managers to add and edit posts independantly.
Team
- Mickey Switzer - design
- Jonas Bay - project manager
- Paola Fraga - project manager
- Will Schmid - web development
- Megan Ting - localization lead
Development process
Framework selection:
- I chose the Client First style system for it's simplicity, extensive documentation, and pre-made building blocks, which facilitated quick and organized development.
Design and interactions:
- Focused on fine details to enhance user experience, such as:
- Addictive snap for primary button interactions.
- Hero cursor delicately following the mouse and disappearing outside the section
- Smooth opening of the FAQ section.
Learning and implementation:
- Integrated scalable design systems and Webflow's CMS.
- Utilized Webflow's new localization tool to prepare for multilingual support.
Challenges and solutions
Challenge: Tight timeline to develop and launch the website.
Solution: Leveraged the client first style system for efficient development and clear documentation for easy hand-off.
Challenge: Implementing scalable design systems and new tools.
Solution: Invested time in learning and applying scalable design principles and Webflow's localization tool to ensure future-proof development.
Results
- Successfully launched the new Zenfit website within one month.
- Developed a scalable and maintainable site structure.
- Enabled easy content management through Webflow's CMS.
- Prepared and managed the localization process which will see the site translated into 5 different languages.
- Received positive feedback from Zenfit on the website's functionality and design details.
Conclusion
This project was an excellent opportunity to refine my skills in scalable web design and client collaboration. The successful launch of Zenfit’s new website not only met the client’s needs but also enhanced my expertise in using Webflow and implementing detailed interactive elements. I look forward to applying these insights to future projects.
Visit live site
Favorite details
FAQ accordion
The row springs open bringing the text to full black and twisting the icon 45 degrees turning the "+" into an "x". Also, to maximize space opening any option automatically closes all others.
"Scroll" cursor
In the hero section of the home page a custom cursor stalks the mouse prompting visitors to explore more. The cursor features a blurred glass effect that adds interest to the background video.
Nav bar
Scrolling down moves the nav out of the way to maximize space for page content. Scrolling up makes it visible again and scrolling to the top of the page returns it to the load state with a bottom border and no background.
Tool tip
A hover or tap of the info icon reveals a well designed explanation.
About text
Scrolling through the text changes the opacity one line at a time, helping readers digest the content and creating a bit of playfulness.