Revamp and Develop the Axelar Network Website and Documentation with 100% Open-Source Code | Proposal

Introduction

We propose a comprehensive upgrade and redevelopment of the Axelar Network website and documentation, aiming to enhance design components where necessary while preserving the current aesthetic. Our goal is to optimize the website and docs for superior speed metrics, achieving a score of 95+ across all parameters, utilizing the latest technology stack and make both website as well as docs 100% open-source.

This revamp emphasizes incorporating cutting-edge technology to ensure that both the website and documentation are 100% open-source, high-speed, and easily maintainable. We plan to establish a dedicated space and pipeline for the community to showcase their work seamlessly, allowing contributions via simple markdown submissions and minimal PR details.

To enhance accessibility, the entire content of the website and documentation will be managed in markdown, simplifying the process for non-technical individuals to contribute and manage content. Our team will handle the technical aspects in the code, enabling content creators and contributors to focus solely on delivering valuable content through markdown.

This revamp initiative addresses code quality issues, streamlines workflows, facilitates content migration, and presents a refreshed, user-friendly interface. The proposal outlines the key tasks, metrics, and benefits associated with this endeavor.

Who We Are

We are a digital agency that offers world-class digital solutions to brands worldwide. Recently, we had the privilege of serving the Akash Network, and we are currently engaged in a comprehensive revamp and redevelopment of the Akash Network website, employing 100% open-source code. Our commitment extends to wanting to serve the Axelar Network, and detailed information about our plan is provided in this proposal.

The Necessity for Revamping Axelar Network Website & Docs

The decision to overhaul the Axelar.Network website is crucial for the continued growth and prosperity of the Axelar ecosystem. The current state of the website and documentation presents numerous issues, including responsiveness, design flaws, and compatibility issues with various screen sizes. The code quality, maintainability, and UI of Axelar docs do not meet industry standards.

In response, our proposed solution advocates for a complete reconstruction of the website and docs, ensuring they are 100% open-source while adhering to industrial standards. The entire content of the website and documentation will be managed in markdown, simplifying the PR creation process for both the community and the team. The revamped website and docs can seamlessly be hosted on GitHub Pages, guaranteeing a score of 95+ in all metrics measured by Google PageSpeed.

The Role of a High-Quality Website in Ecosystem Growth:

User Engagement and Credibility

A visually appealing and user-friendly website captures visitors’ attention, encourages exploration, and fosters trust. Quality content and intuitive navigation enhance user engagement and convey professionalism, boosting Axelar’s credibility.

Effective Communication

The website serves as a primary channel to communicate Axelar’s mission, services, and success stories to a global audience. Clear and concise content combined with an attractive design ensures that visitors can easily understand the value Axelar offers.

Community and Contributor Attraction

A high-quality website is not only user-centric but also developer-friendly. Clear documentation, clean code, and a modern stack attract contributors and community members, leading to ecosystem growth through collaborative efforts.

SEO and Discoverability

Search engine optimization (SEO) is critical for visibility. A well-structured website with optimized content and modern technologies like pre-rendering improves search engine rankings, helping Axelar reach a wider audience.

TL;DR

The Axelar.Network website revamp is more than just a cosmetic upgrade. It’s a strategic investment in the ecosystem’s growth, user engagement, and credibility. Addressing code quality, responsiveness, design, and content challenges will lead to a stronger online presence, better user experiences, and increased adoption of Axelar’s services. The proposed changes align with the ecosystem’s goals, ensuring that Axelar.Network remains at the forefront of innovation in cross-chain communication for web3.

Tech Stack to Be Used

The proposed revamp leverages cutting-edge technologies, including AstroJS, Typescript, and TailwindCSS. This tech stack offers several benefits:

1. AstroJS

  • Performance: AstroJS is designed for optimal performance, providing fast page loads and an enhanced user experience.
  • Developer-Friendly: It simplifies the development process, allowing for modular and efficient code structuring.

2. Typescript

  • Type Safety: Typescript introduces static typing, reducing errors during development and enhancing code reliability.
  • Scalability: With strong typing, Typescript facilitates the scalability of the codebase as the project evolves.

3. TailwindCSS

  • Utility-First Approach: TailwindCSS streamlines styling with a utility-first approach, promoting rapid development and consistent design.
  • Customization: It allows for easy customization, ensuring the website’s unique visual identity.

Objectives (Revamp and Develop the Axelar Network Website and Documentation with 100% Open-Source Code, adhering to industry standards to effectively represent the entirety of the Axelar network)

  1. Implement and Develop Key Pages:
    • Landing Page Development (90 hours)

      • Develop a responsive landing page with engaging visuals and intuitive navigation based on the current design.
      • Implement key messages and design elements to create a compelling user experience.
    • “For Developers” Page Development (60 hours)

      • Enhance the existing “For Developers” page by integrating documentation, tools, and resources.
      • Develop an intuitive layout for easy navigation and access to essential developer information.
      • Streamline content presentation using Markdown/MDX for efficient management.
    • Blog Page Redesign and Development (150 hours)

      • Redesign and develop the blog layout for improved readability and user experience.
      • Implement an organized structure in line with the design, branding, and wireframe.
      • Utilize Markdown for efficient content creation and management.
      • Migrate existing blog content to this new repository.
    • Career Page Redesign and Development (70 hours)

      • Redesign and develop the career page layout to attract potential candidates.
      • Incorporate information about job opportunities, company culture, and application processes.
      • Implement Markdown/MDX for streamlined content editing and maintenance.
    • Team Page Redesign and Development (50 hours)

      • Enhance the team page for a more engaging user experience.
      • Showcase team members with enhanced profiles and introduce a visually appealing layout.
      • Leverage Markdown/MDX for content streamlining and easy updates.
    • Partners Page Redesign and Development (80 hours)

      • Redesign and develop the partners page to highlight key collaborations and partnerships.
      • Implement a visually appealing layout showcasing partner logos and relevant information.
      • Utilize Markdown/MDX for efficient content management.
    • Ecosystem Page Redesign and Development (120 hours)

      • Redesign and develop the ecosystem page showcasing projects using Axelar’s hosting services.
      • Highlight success stories and foster credibility within the community.
      • Migrate content of the ecosystem page to this new repository.
      • Integrate Markdown/MDX for streamlined content updates.
    • Grants Program Page Development (40 hours)

      • Develop a dedicated grants program page, providing information about available grants and application processes.
      • Utilize Markdown/MDX for efficient content editing and presentation.
    • Community Hub Development with Educational Resources (150 hours)

      • Develop the community hub as a central space for educational resources and community engagement.
      • Implement filtering and categorization for easy content discovery.
      • Leverage Markdown/MDX for content creation and maintenance efficiency.
      • Streamline pull requests to the repository through markdown and standard rules.
    • Documentation Page Redesign and Development (200 hours)

      • Redesign and develop the documentation page to enhance user experience and accessibility.
      • Ensure technical content is presented in a clear and organized manner.
      • Utilize Markdown/MDX for streamlined content management, easy maintainability, and upgradability.
      • Migrate old documentation content to this new documentation repository.
    • “Brand” Page Redesign and Development (40 hours)

      • Develop a brand page showcasing all brand elements.
    • “More” Page Redesign and Development (40 hours)

      • Develop a centralized “More” page providing access to additional resources, FAQs, and other relevant content.
      • Ensure easy navigation and a user-friendly layout.
      • Implement Markdown/MDX for efficient content presentation and updates.

Metrics and Benefits:

  • Enhanced User Engagement: Anticipating a significant boost in user engagement by implementing compelling designs, streamlined navigation, and valuable content.

  • Improved Developer Experience: Targeting an improved experience for developers through enhanced documentation, intuitive layouts, and streamlined content presentation.

  • Brand Visibility and Credibility: Aiming to increase brand visibility and credibility with redesigned pages, including a dedicated “Brand” page.

  • Educational Impact: Striving for a positive educational impact by developing a comprehensive community hub with filtering options and efficient content management.

  • SEO Optimization and Ranking: Focusing on SEO optimization through clean code, organized content, and improved structure, with the goal of achieving higher search engine rankings.

  • Streamlined Workflows: Expecting a 30% reduction in development time by implementing optimized workflows and markdown content management processes.

  • Content Migration Efficiency: Targeting efficient content migration and management through the use of Markdown/MDX, contributing to streamlined processes, making it easier for community as well as team to push content to the website or update docs.

Budget:

The proposed budget for the comprehensive upgrade is based on the estimated hours required for each task multiplied by a rate of $75 per hour.

Task Estimated Hours
Landing Page Development 90
“For Developers” Page Development 60
Blog Page Redesign and Development 150
Career Page Redesign and Development 70
Team Page Redesign and Development 50
Partners Page Redesign and Development 80
Ecosystem Page Redesign and Development 120
Grants Program Page Development 40
Community Hub Development 150
Axelar Docs Redesign and Development 200
“Brand” Page Redesign and Development 40
“More” Page Redesign and Development 40
Total Hours 1080

Total Amount Requested: $81k

Budget Utilization Strategy:

  1. Immediate Liquidity (30%): We will retain discretion over 30% of the funds initially, while converting this portion into a stablecoin for immediate liquidity as per our own wish.

  2. Project Completion Reserve (70%): We will Hold the remaining 70% of the funds in our reserve until the successful completion of the project. After completion, full discretion will be exercised over how to use/utilize these funds as per our wish.

Justification for the Amount:

The total amount requested of $81k is justified by the comprehensive scope of work, involving improving design and development across key pages, content migration, SEO optimization, and the creation of a centralized community hub. The rate of $75 per hour is competitive and reflective of industry standards for web development and design services.

The proposed tasks not only include visual enhancements but also prioritize code quality improvement, workflow efficiency, and user engagement. Each task contributes to the outlined metrics and benefits, ensuring a holistic upgrade that aligns with the organization’s goals and objectives.

Timeline (4 months):


Weeks 1-2: Landing Page Development, “For Developers” Page Development

  • Create a responsive landing page with engaging visuals.
  • Implement key messages and design elements using Markdown for easy updates.
  • Ensure intuitive navigation based on the current design.
  • Integrate tools, and resources for developers.
  • Develop an intuitive layout for easy navigation, using Markdown/MDX for efficient content management.

Weeks 3-5: Blog Page Redesign and Development

  • Redesign and develop the blog layout for improved readability.
  • Implement an organized structure in line with design and branding, utilizing Markdown for efficient content creation.
  • Migrate existing blog content to the new repository.

Weeks 6-8: Career Page, Team Page Redesign and Development

  • Redesign and develop the career page layout to attract potential candidates.
  • Incorporate information about job opportunities, company culture, and application processes.
  • Implement Markdown/MDX for streamlined content editing and maintenance.
  • Enhance the team page for a more engaging user experience.
  • Showcase team members with enhanced profiles, leveraging Markdown for easy updates.
  • Use Markdown/MDX for content streamlining.

Weeks 9-11: Partners Page, Ecosystem Page Redesign and Development

  • Redesign and develop the partners page to highlight key collaborations.
  • Implement a visually appealing layout showcasing partner logos and relevant information.
  • Utilize Markdown/MDX for efficient content management.
  • Redesign and develop the ecosystem page showcasing projects using Axelar, easy PR pipeline to add projects over to the ecosystem page.
  • Highlight success stories and foster credibility within the community.
  • Migrate content of the ecosystem page to the new repository.
  • Integrate Markdown/MDX for streamlined content updates.

Week 12: Grants Program Page Development

  • Develop a dedicated grants program page, providing information about available grants and application processes.
  • Utilize Markdown/MDX for efficient content editing and presentation.
  • Ensure a user-friendly layout and clear information dissemination.

Week 13-16: Community Hub, Docs, Brand & Final launch

  • Develop the community hub as a central space for educational resources and community engagement.
  • Implement filtering and categorization for easy content discovery.
  • Leverage Markdown/MDX for content creation and maintenance efficiency.
  • Streamline pull requests to the repository through markdown and standard rules.
  • Redesign and develop the documentation page to enhance user experience and accessibility.
  • Ensure technical content is presented in a clear and organized manner.
  • Utilize Markdown/MDX for streamlined content management, easy maintainability, and upgradability.
  • Migrate old documentation content to this new documentation repository.
  • Brand page showcasing all brand elements.

This timeline allows for a phased approach to development, ensuring thorough testing and refinement before the final launch.

Conclusion:

This proposal outlines a comprehensive plan for the upgrade of website and docs over a 4-month period, addressing various aspects from user engagement to SEO optimization. The requested budget reflects the efforts required for redesign, development, and optimization, ensuring a top-tier website & docs aligned with organizational objectives and making both website/docs 100% open-source.

Here is what we need from team

Certainly! For the successful execution of the web and docs development tasks over the specified weeks, the following requirements and practices are essential:

  1. Access to Existing Website Figma (If Available):

    • Request access to the existing website’s Figma or any design files available.
    • This is crucial for understanding the current design structure, styles, and elements.
  2. Access to Existing Website Content (If Available):

    • Obtain access to the current website’s content, including text, images, and other media assets.
    • This content will be utilized for migration, redesign, and maintaining consistency.
  3. Weekly Team Meetings for Discussion and Feedback:

    • Schedule regular weekly team meetings to discuss progress, challenges, and updates.
    • Provide a platform for team members to share their insights, feedback, and concerns.
    • Use these meetings to align on priorities, address any blockers, and refine project goals.
  4. Requirements Discussion with Team:

    • Conduct detailed requirements discussions with the team for each page development.
    • Clarify design specifications, functionalities, and any technical considerations.
    • Document and share requirements to ensure everyone is aligned on project goals.

By having access to Figma files and existing content, along with regular team meetings and clear requirements discussions, the development process will be more streamlined, and the final output will align closely with the project objectives. This collaborative approach helps in maintaining communication, transparency, and addressing any challenges effectively.

Thank you, We look forward to the feedback from community, leads and open to any questions.