Abaca

— working together since 2018

Connecting Entrepreneurs and Investors

  • WebApp

Work Type

Product Strategy

Branding

UX Design

UI Design

Infrastructure

Front-End Development

Back-End Development

Technologies

  • Vue.js

    Vue.js

    Vue.js
  • Django Rest Framework

    Django Rest Framework

    Django Rest Framework
  • Webpack

    Webpack

    Webpack
  • Divio

    Divio

    Divio
  • Postgres

    Postgres

    Postgres
Full project overview

Work Type

Product Strategy

Branding

UX Design

UI Design

Infrastructure

Front-End Development

Back-End Development

Technologies

  • Vue.js

    Vue.js

    Vue.js
  • Django Rest Framework

    Django Rest Framework

    Django Rest Framework
  • Webpack

    Webpack

    Webpack
  • Divio

    Divio

    Divio
  • Postgres

    Postgres

    Postgres

Laying the path to new funding possibilities

In their quest for improving fundraising for entrepreneurs and supporters, the team at Village Capital, the largest organization in the world supporting impact-driven and seed-stage startups, reached out to Pixelmatters with an idea.

They wanted to transform their VIRAL (Venture Investment Readiness and Awareness Levels) framework into a WebApp, supported by a sophisticated matching algorithm and assessment mechanism, that would provide a common language for entrepreneurs and investors during funding conversations.

Named after Abacus, the ancient calculation tool, Abaca was born.

abaca webapp viral framework

A week of onsite collaboration

Peter Lundquist and Andrew Hobbs from the Village Capital team, who had been working on this framework's conception for a while, flew from Washington DC to Porto, where our HQ is located, for a thoughtful kick-off meeting. The goal was to determine what features would be developed and how the experience would look like to achieve the product's mission.

Following their visit, every meeting happened remotely, with a distance of 3,523 miles between us, and a 5 hour time zone difference.

abaca webapp onsite collaboration
Photos from our week with the Village Capital team in Porto, and one of many remote meetings.

Defining the product strategy

Once the main goals, features and flow concepts were defined, it was time to look at everything from a strategic standpoint. How can we deliver a significant amount of product value with the smallest investment possible while being quality-driven and having a scalable approach?

As a part of the product strategy exercise and roadmap definition, compromises were made to define what was the ultimate MVP and how to set up an iterative and evolutive process that would allow the product to scale in the upcoming months while delivering value in the short term.

representation of abaca’s roadmap
Representation of Abaca’s Roadmap.

Defining the core experience

It was time to get our hands dirty. After having both the Strategy and Roadmap defined, we started sketching up some ideas that would then result in high-fidelity wireframes. Part of this process was a full in-house collaboration with the client, with real-time brainstorming and feedback sessions.

This was crucial to make sure we were fulfilling the users' needs while contemplating the best experience for the high priority features.

abaca webapp high-fidelity wireframe
High-fidelity wireframes that set the tone for the experience.

Crafting a beautiful and consistent visual

Abaca’s positioning and business goals called for a seamless experience aligned with a modern, stylish and strong look and feel. Users had to feel invited onto a completely new product and brand, where they could trust their data and be sure it would be put to good use — Trust and friendliness were the core concepts for this design.

From here, and considering the target audience, the core pillars of the design were created — and on top of them, a Design System was born — applying beautiful visuals to versatile, and most importantly, consistent components.

abaca webapp components
Several components used throughout the product to maintain consistency and visual integrity.

Simple, but powerful infrastructure

As a part of the initial product definition, it was necessary to determine which tech stack best fulfilled the product's goals. With a Vue.js and Django combination being selected, it was time to define where to host the application.

Abaca was in an embryonic stage and therefore the infrastructure needed to be simple, offer tooling out-of-the-box, include an easy to set up deploy process and be ready to accommodate the product growth, and for that reason various Django applications were also used. For these reasons, DIVIO was selected to host the application. To make it all peanut butter and jelly, a CircleCI pipeline was configured to manage and automate all the workflow between environments.

abaca webapp tech stack
Representation of Abaca's workflow automation and infrastructure.

Finding the perfect match

The most complex technical challenge during Abaca's development was the elaboration of a matching system that would provide accurate matching percentages to entrepreneurs and supporters. Each account had a set of base criteria to consider - VIRAL level, location, business sectors - and a custom set of questions. The question was how to transform this information into valuable results?

An algorithm was built to calculate how much an entrepreneur and a supporter would hit it off depending on each base information and how the two answered specific questions. If both have similar information, matching answers and preferences, Abaca takes care of the rest!

abaca webapp matching algorithm

A release oriented process

The whole process was shaped in order to have a common language - the release version. Abaca's main product development focus is to deliver product value to users and for that, we needed to continuously ship new releases quickly and with the expected quality.

From roadmap and product specification through design and development, all tools and nomenclatures identify the version in which a certain feature will be released so we always understand what we are talking about.

abaca webapp basecamp communication
Representation of a communication sent to the client.

Feedback as the foundation for growth

On a product development process, it's crucial to have a well-oiled iterative process, especially when building a product from scratch. The product roadmap needs to adjust to users' feedback as a quick reaction to change also allows better traction among early-adopters while making sure that the features evolve to bring continuous value to the users.

The communication channels were defined in order to allow an on-going product specification process and feedback gathering, therefore serving as a foundation for a solid process between design and development.

abaca webapp iterative process
Different iterations based on users' feedback.
  • Andrew Hobbs
    Quotation marks

    Every step of the way Pixelmatters has been integral and has delivered invaluable product insights, beautiful designs, top-notch code, and steady project management. We’re proud of our work together and recommend them enthusiastically.

    Andrew Hobbs

    Manager, Product & Technology Strategy at Village Capital

abaca webapp responsive
Different UX between Desktop and Responsive versions.

The Result

After a challenging journey to build this product from the ground up, and different iterations from an MVP version release to early-adopters, we’ve officially launched Abaca in February 2019, achieving an increase in conversions and positive praise.

abaca webapp conversions increase
  • Peter Lundquist
    Quotation marks

    Pixelmatters is by far the best design talent of any team we've worked with, which pairs with a rigorous project management and development process. We're thrilled with the results.

    Peter Lundquist

    Chief Operating Officer at Village Capital

abaca webapp dashboard