Monk App
📋 After talking briefly to the client I understood that these were the requirements:
The landing page should super unique, creative and out of the box design with cool animations, scrolls, transitions and overall design.
The site should have a visual story telling.
Website should represent Monk App's goal and vision as soon as the user opens the site.
Site should maximise conversion and CTA clicks.
It should have a orange + Batman + Gen-Z vibe, similar to the mobile app UI.
SEO optimization
Share
🛠️ Execution:
I was very particular with the client requirements and made sure that I had to pass all the checks ✅. Here's how I made the execution:
I always play by the rule that the Hero section is the first thing a user sees and that is what determines the first impression left on the user. And if that's well designed and planned, the high bounce rates can be reduced instantly. So here my goal was Unique design + Visual story telling + CTA and after many trial and errors I finally came up with a design
The Hero section has an image of an iPhone that just received an Instagram notification with a bold text that says "Escape Brainrot" with a CTA to download the app from the store. Apart from that the phone has floating icons of most common distracting apps and notifications which visually helps complements the tagline written in the hero section. Then comes a scroll animation, as the user scrolls down, an animation shows as if the user tapped the notification to open Instagram but is shown the block screen of Monk App instead, when this happens a new text animates in saying "Enter Monk Mode" that complements the block screen visual. As a secondary background animation, during the scroll the floating icons go inside the iPhone, illustrating that Monk App captures these distracting apps and helps the user focus on their goal.
Next thing was maximising conversion, I placed CTA's at all potential places. First being the navbar as that will always stay in view the whole time giving easy access to the CTA and secondly, added the CTA's in prominent sections and footer.
For the next sections, I thought it would be best to first deliver some statements, show social proofs and then present the next sections in such a way as if it was giving a walkthrough of the app (Visual story telling again) So you'll find sections with animations of what the user will expect when they install and use the app → Set timer, block apps, Activate monk mode, build daily streaks, create schedules etc.
For the SEO, there were many factors but I could help with blogs. I used the CMS for blogs and designed a good looking and optimized layout for the blogs that can help with the SEO
Share
Client was extremely happy with how the site turned out :)
Share