Instagantt Features

Mauricio Gonzalez

Web Designer
Webflow Developer
Figma
Webflow
Instagantt

Intro

Instagantt allows users to quickly convert task lists into Gantt charts and serves over 500,000 users worldwide. Although Instagantt revamped its website in 2023, ongoing content additions continue.

My role in this project involved aiding the team in redesigning the features page and creating a CMS collection with content for each category page.

The main challenge was to execute these tasks while adhering to the existing design and maintaining consistency with established design principles for any new elements introduced.

https://www.instagantt.com/features

Summary

  • 1x CMS template
  • 13x landing pages
  • 4x new components
  • 60x software mockups

Highlights

Landing Page for one of Instagantt's features.

CMS Template

A CMS template was built to speed up the development process and create a solid foundation for the team to update content in the future. The template supports up to 10 different feature cards to display information and visuals, one featured testimonial, one personalized CTA, and a custom hero.



Hero section / Information card / Category Tabs



Landing pages

Before the project, Instagantt already had a simple features page. During this project, and with the help of the Customer Success team, features were mapped and categorized. 13 landing pages were created. Here's the full list:

  • Features Page (new)
  • Gantt Chart View
  • Table View
  • Kanban Board View
  • Workload View
  • Projects Overview
  • Workbooks
  • Task Management
  • Project Management
  • Collaboration
  • Time Savers
  • Reporting
  • Data Import



New components

Information card
  • Information Card
    • problem: a component was needed to enter feature details and information.
    • solution: information card to enter text and visuals
  • Features navigation
    • problem: Instagantt has a lot of feature pages.
    • solution: create a feature navigation for easy information access.
  • Horizontal Marquee
    • problem: the existing marquee takes up a lot of space.
    • solution: create a compact version of the marquee.
  • Category Tabs
    • problem: the category navigation is not visible on mobile
    • solution: create a tabs element to display at the end of each page, so the user can still browse categories and navigate to other pages.
  • Instagantt Awards
    • problem: Instagantt has lots of awards issued by software review sites, but are not shown on the site.
    • solution: create an element to show award badges.



Software Mockups

Visuals were needed for the information cards. The client asked for software mockups to be created. 60+ new mockups were crafted, showing simplified versions of the software.



Color Coding / Comments / Public Snapshot



Partner With Mauricio
View Services

More Projects by Mauricio