[Landing Page] Landing Page updates

[AdrianDudko]

Related PR's

• feat: add info banner for landing page #3398
• feat: add landing page carousel #3407
• feat: create colony cards for landing page #3425
• feat add invitation banner for landing page #3431

Vision

Create an engaging and informative landing page for the Colony app, where users can quickly understand what the platform offers, connect their wallet, and navigate to where they need to go. The landing page should serve as the gateway to the rest of the app, with a strong call to action for new users while providing returning users with an easy way to continue where they left off.

Scope

Notion link:
https://www.notion.so/colony/Landing-page-8b8e63c5b0d444b09b41229d5c139415

Overview

The Landing Page will act as the main entry point for Colony users. It will communicate the value proposition of Colony, highlight key features (e.g., decentralized finance for teams), and provide users with a call to action (e.g., connect their wallet, join the beta).

The landing page will also inform users of benefits of the platform, thereby also serving as a conversion or lead generator.

User stories

• As a first-time user, I want to understand the key features of Colony and quickly connect my wallet so I can start exploring the platform or request access.
• As a returning user, I want to re-connect my wallet quickly to get back into my existing colonies and continue working on my decentralized finance tasks.
• As a potential user, I want to easily take action to register my interest or understand where to find more information.

User Flows

• New User Flow:
  • The user arrives at the landing page.
  • The user reads about the key features of Colony in the “Decentralized finance for teams” section.
  • The user sees a prominent “Connect Wallet” button.
  • The user sees a strong call to action to request access.
• New Invited User Flow:
  • The user arrives at the landing page.
  • The user reads about the key features of Colony in the “Decentralized finance for teams” section.
  • The user sees a prominent “Connect Wallet” button.
  • User sees the option to join the colony they were invited to.
• Returning User Flow:
  • The user arrives at the landing page.
  • The user clicks on the “Connect Wallet” button.
  • After connecting their wallet, the user sees a list of their joined colonies to return to.
  • Clicking on a colony takes them to that colony’s dashboard.

Design

• Figma design - Landing page
  • https://www.figma.com/design/j0VEfFryOkmjrVVq2PItso/Beta-Launch?node-id=16532-6757&t=tIyBQePetzAI1muS-4

Success Criteria & Metrics

Success Criteria:

• Increase in registrations from the landing page.
• Reduced bounce rate on the landing page.
• Users report an easier and more seamless experience in their onboarding journey.

Metrics:

• Wallet connections on landing page.
• Bounce rate on the landing page.
• Number of lead signups from the landing page.

Acceptance Criteria

• General requirements

  • Should be in alignment with desktop/tablet/mobile design from Designs.
  • Should use existing components and styles where possible for consistency.
  • Should gracefully handle errors and display appropriate error messages.

• Image slider

  • Auto-scrolling image slider highlighting features of the app.
  • Images should auto change every 3 seconds.
  • Slider should be continuous, looping back to the start.
  • Slider navigation should work with touch swipe, click and drag, and click on the navigation bar.

• Connect wallet

  • Connect wallet button should be visible for visitors who are not connected to the app.
  • Should trigger the wallet connection modal.
  • Already connected users or auto-login users should not see the button.

• Connected - no access

  • User has connected their wallet, but they don't have an invite code, create colony code, or existing colonies.
    • User should see the “Request access” card.

• Join colony invite code used

  • Correct invite code
    • Shown to connected and disconnected users if their invite code is valid.
    • Disconnected
      • Shows the “Connect wallet” button.
    • Connected
      • Shows the ability to join the relevant colony.
  • Incorrect invite code
    • Shown to connected and disconnected users if their invite code is invalid.
    • Disconnected
      • Shows the “Connect wallet” button.
    • Connected
      • Existing colonies
        • Shows list of existing colonies.
      • No existing colonies
        • Show request access card.

• Create colony invite code used

  • Correct invite code
    • Shown to connected and disconnected users if their invite code is valid.
    • Disconnected
      • Shows the “Connect wallet” button.
    • Connected
      • The start of the create colony flow. Either create profile or create colony as the first step depending on if existing user or not.
  • Incorrect invite code
    • Shown to connected and disconnected users if their invite code is invalid.
    • Disconnected
      • Shows the “Connect wallet” button.
    • Connected
      • Existing colonies
        • Shows list of existing colonies.
      • No existing colonies
        • Show request access card.

• Request access card

  • Shown to users with no existing colonies and no valid invite codes.
  • Provides a call to action directing users to a request access landing page with the request form.
    • URL: https://colony.io/request-access
    • Opens in a new tab.

• Create colony invite card

  • Invites available
    • Shows the user how many colonies they can create.
    • Provides the URL with a copy icon for easy sharing.
    • Includes a “Create colony” invite button.
  • No invites available
    • Should show “Request additional colonies” button.
    • Provides a call to action directing users to a request an invite code landing page with the request form.
      • URL: https://colony.io/request-invite
      • Opens in a new tab.

• Existing colony list

  • Shows a list of the connected user’s existing joined colonies.
  • Colony item.
    • Includes:
      • Display name of the colony.
      • Number of members of the colony.
      • “View” button which navigates to the respective colony main dashboard page.
  • Create colony card
    • Shows the create colony card.
  • No existing colonies
    • Show empty state with message that they don't have any existing colonies.
  • Height
    • The height of the the colonies list should fill the height of the container between the description and create colony card.
    • The colony list should vertically scroll if the number of colonies exceed the height.
  • Pagination
    • We should load 20 colonies at a time.
    • More colonies should auto load on scroll.
  • Sorting
    • The list of colonies should be sorted by newest joined at the top, to oldest joined.

• Affected routes

  • To create a more consistent user experience, the updated design is to be applied on few different pages.
  • The landing page design should apply to the following routes:
    • /
      • Main app landing page.
    • /go/{colony_name}
      • Page for colonies for non-connected users.
    • /invite/{colony_name}/{invite_code}
      • Page for handling invite codes.
    • /create-colony/{create_code}
      • Only for the disconnected state.

• Create colony page update

  • Create colony route create-colony/{createcolonycode} with invalid invite codes should also have the “Request access” card added.
  • Includes a count of how many invites the user has remaining.