I had the opportunity to design both the platform and the marketing website for LendTech, a lending management platform for real estate lenders. As part of my role, I was responsible for the building the website and creating content.
The website, with a landing page and contact forms, was set up using Webflow. Its main aim is to encourage customers to book a demo appointment.
Webflow, a user-friendly website builder that reduces development time, was chosen for this project. To expedite the process, a Webflow theme was purchased and customized to align with the brand's style guidelines.
The site theme came with a Figma file, allowing me to quickly create mock-ups for the home page, about page, and pricing pages using pre-made components. I made iterative improvements to these pages based on feedback from the team, preparing them for development in Webflow.
Website Page Mock-ups Designed in Figma
I created a Notion page to house all content related to the website, including copy for each page. SEO keywords were incorporated into the text to enhance its readability.
Website Page Mock-ups Designed in Figma
The terms and conditions and privacy policy pages needed customization, which the website theme did not include. Given the amount of text in these policies, we needed a way for users to navigate to specific sections without scrolling through a lengthy page. A sticky sidebar navigation was the optimal solution, allowing users to jump to different sections without scrolling.
Since these two pages would look the same, I created a page template in the CMS collections section of Webflow to save time for future policy pages. CMS collections are akin to a database for storing content. Once a CMS collection is created and a page template designed, adding new collection items requires no additional designing or coding.
Policies Collection Template
For the sticky sidebar navigation, I cloned this site, Dynamic Anchor Tags from Rich Text (CMS Collections). It uses JavaScript to generate a dynamic list with specific anchor tags added in the Rich Text section of the page. In this case, every H3 created in the Rich Text section will become an anchor link and appear in the sidebar.
Any future collection items with H3’s on the page will automatically appear in the sidebar navigation, since the policy page template is a collection.
Dynamic Sticky Sidebar Navigation Code Snippet
Animated graphics
Creating mock-up animations on websites is a popular method to visually present product features. I'm still learning how to create these animations in Figma and import them to LottieFiles.
Separate page for features
Rather than having a single landing page, I would prefer to elaborate on our product's key features by designing separate pages.