Tacklit is a Care Delivery System that provide the tools for our potential clients need to deliver care their way they one. I rebrand and create a responsive site to increase the conversion and SEO rate, to let more potential clients know more about Tacklit.
Background
Tacklit .Com site
Challenges
As the designer and the customer success team find it difficult to update the content of the official website to communicate with the potential client, while we only can make the changes when the our development team available.
Goals
We decided to use Framer as our web builder that allow us to makes changes fast and easy.
Allow our potential client to easily to communicate and reach out to speak to us.
Cleaned up our page and design new usable page for to make our Tacklit site more visible and make our SEO better.
Create responsive view every page to make our potential client can reach out to us with different device.
Design Process
Revamp the whole website involves ultilizing the advanced features and capabilities of the tools that we used which is Framer.
Step 1: Discovery and Planning
Phase 1: Simplify key pages of the Tacklit site including the homepage, lead generation form, pricing page, product page, sign-in page, and about us page.
Phase 2: Create additional pages such as the customer story page, security page, support center page, and reports & analytics page.
Phase 3: Develop a resources page featuring product updates, an assessments library, and a capability overview.
Step 2: Research and Benchmarking
I reviewed competitors' websites to understand industry trends and identify best practices to incorporate into our design.
Step 3: Strategy Development
I created a Notion page to redefine the website's structure, plan content creation, and determine which content to keep, update, or remove.
Notion planning page
Step 4: Design & development with Framer
I initiated a new project in Framer, creating component assets such as the navigation bar, buttons, colors, and text styles. I designed each page and element step-by-step, ensuring responsive design and testing across various devices and screen sizes.
Framer Component- Navigation bar
Framer Responsive- Homepage
Step 5: Testing and Launch
I tested the prototypes created in Framer, gathered feedback, and made necessary adjustments, including alignment and font size across different devices and browsers. I ensured that all links and functionalities worked correctly and navigated to the appropriate pages. Finally, I collaborated with the development engineer to deploy the site to the Tacklit web server and hosting platform.
Step 6: Post-Launch
Development doesn't end with the launch. I continuously monitor site performance using analytic tools to assess user engagement and identify areas for improvement. Based on this data, I make ongoing updates and improvements to maintain and enhance the site.
Visual Style
To best express our brand identity while enhancing the user experience, the MVP version of T23 navigation bar makes all tabs more accessible, allowing users to efficiently navigate the entire system. Here's some UI of the before vs after:
Before
After
Conclusion
The biggest challenge during this development was familiarizing myself with Framer, a new tool for me to explore. However, I embraced this challenge as an opportunity for growth. I'm proud to say that I successfully navigated the learning curve and utilized Framer to develop the website step by step. This experience has not only expanded my skill set but also reinforced my capability to adapt and thrive in new environments.