Village Capital, the largest organization supporting impact-driven and early-stage startups, reached out to Pixelmatters with an idea to improve fundraising for entrepreneurs and supporters.

Taking naming and visual inspiration from a modern twist on an abacus, Abaca was born, as our long-lasting collaboration with Village Capital. Since 2018, we’ve been building a world-class Web App focused on entrepreneurs’ and investors’ challenges by combining customized Design, Product, and Development strategies.

The Milestone Planner, a game-changer feature

Together with Village Capital, Pixelmatters realized there was a feature that could be created to make Abaca into an even more complete product.

On one side, the Milestone Planner helps entrepreneurs give more visibility to their milestones’ progress, and on the other side, it allows investors to track measurable progress. Let’s dive into some of its creation details.

Challenges and main decisions

First things first — not only does the Milestone Planner involve many screens (with different and intricate statuses), but it had implications and/or dependencies on other Abaca’s features, which brought complexity to building this feature.

As a result, Pixelmatters decided to create an MVP version, a simpler but bulletproof feature. An essential mindset that allowed us to deliver an effortless and performative Milestone Planner.

Teams’ communication

Since day one, feedback was essential to follow the Milestone Planner’s roadmap. On one side, the Design and Product Teams answered the Engineering Team’s doubts and requests, always trying to unblock the implementation flow. On the other side, the Design Team was proficient in breaking the Milestone Planner into smaller functionalities, ensuring full knowledge to the Product and Engineering Teams.

We adopted the test-driven Development (TDT) and kept the End-to-End testing, a path that boosted Pixelmatters’ confidence when deploying or altering a specific functionality.

On top of all that, everyone involved in the project weighed in on the decision-making process, making it more transparent and less error-prone.

Lessons learned

Building the Milestone Planner also brought new insights and discoveries:

1. Going beyond defined process steps and accelerating development brings more challenges than benefits in the medium and long term. Pixelmatters learned how to divide better and structure the work assigned to each developer.

2. Adoption of a stronger UI development approach based on components.

• A UI logic strictly based on booleans flags simplified the internal component execution.

• A Higher-level component hierarchization is responsible for deconstructing the business logic into booleans flags inherited as properties by the child components.

3. Using Storybook enabled an immense progression in the UI component development, especially when other decisions (with visual or functionality impact) were still pending on a final decision.

4. Optimizing the planning process. We understood how to improve our tasks’ organization — by having better use of JIRA to prioritize and measure the team’s velocity. In addition to that, we reduced complexity and focused on quality by levering a thorough cross-team analysis and feature deconstruction into specific tasks.

Conclusion

Village Capital and Pixelmatters' teams successfully created the Milestone Planner, an essential achievement on Abaca's path to becoming the tool to entrepreneurs find the right investor and investors to find the right entrepreneur. We can't wait for the next steps in evolving this top-notch digital product.