Don't try to build a car if you don't even have proof that users want a bike.

Someone told me this once. And I can't agree more by now.

Building a product is something challenging. Putting ourselves in the user's shoes makes us uncover users' frustrations and identify their problems, which really motivates us to generate ideas and build something for them. Something to meet their needs.

And we want to believe that our solution will be a rock star that users won't stop using. But by the time we finish it, we'll have a hypothesis. A candidate to a solution. Even the best usability experts won't be able to work on a perfect solution with just a single attempt.

So, why should be we spend time building the most robust and complex solution — such as the car example — if we can design a simple one to prove our concept — as a bike — that can be quickly validated and iterated based on feedback?

Eventually, our bike will turn into a car but let users drive us in the process.

From Prototype to Iteration

Iterative design can be a huge help at any phase of the product lifecycle. It will allow you to incrementally refine your product based on users' feedback, so you'll know that you are moving in the right direction. So, this iterative approach will be the most cost-effective one, either on an initial go-to-market phase or if your product has already been launched and you are looking to improve it. The earlier you implement it, the more effective and user-oriented your growth will be.

Prototype

It's almost always safer and cheaper to create a prototype, which might consist of low-fi wireframes or even paper sketches than it is to develop your solution from a gut feeling and then amend it based on user reactions.It can be a waste of time and resources.You'll find lots of tools that help you create your prototypes (some design tools already incorporate them, such as Figma does) — so make the most use of it and help your product grow in a sustainable way.

And don't forget: make your solution simple enough to avoid taking you a tremendous amount of time but viable enough to deliver the expected value, as a Minimum Viable Product should be.

Prototype → Test

Once you have your prototype ready to be tested, make sure you find a considerable amount of users to test it. Take notes, identify the problems they had and listen to their thoughts and requests. Then, move forward to the next iteration of your designs. You should then test it again to ensure that the adjustments made solved the problems identified.

Prototype → Test → Iterate

As soon as you have a solid and validated solution, move it into the development and watch out for users' reactions — new requests and adjustments might be required, either to adjust some flaws identified by the users or to evolve your feature to the next level.That's why the agile mindset is so important in this changing environment.

Into practice: Abaca WebApp Example

Abaca is a WebApp built by Pixelmatters and Village Capital, where an iterative design process was crucial to make it shine.

Each work cycle is MVP-oriented, balancing the value it will bring and the effort it will take, and also teaching us how to fulfill user needs.

We are working on a daily basis to transform their VIL (Venture Investment Level) framework into a WebApp, supported by a sophisticated matching algorithm and assessment mechanism. This algorithm helps entrepreneurs and investors meet each other, find their common interests, create relationships that, ultimately, can lead to good investment opportunities — so a win-win situation for both parties.

The Problem

One of the biggest challenges we faced was the "Matching" feature, a way to match entrepreneurs and supporters that helps them find each other.

This matching algorithm considers core metrics like the Venture Investment Level, attributed to Entrepreneurs based on their milestones' progress, and to Supporters based on the Venture Investment Level range they are looking for on Entrepreneurs. Other metrics used are location, industry sectors, and other secondary criteria.

A matching percentage would be calculated between them taking all of those criteria into account.

We also wanted to encourage users to improve their matches by adding other criteria, so that was another requirement to have in mind.

As a good match should be, after the love at first sight, someone needs to take the first step and show some interest or should I say request a connection? 👀

Well... let's take a deeper look.

The Proposed Solution: First Iteration

After some brainstorming sessions and layout explorations on the wireframes phase, we came up with a simple yet valuable solution for the Matching feature.

• A Discover page as the matching entry point, where Entrepreneurs and Supporters could find each other;

• It was composed of a simple cards list organized by highest matches first (featured cards) and lower matches (secondary cards) second, with only the essential information such as name, logo, Venture Investment Level, location, and industry sectors. And of course, matching percentage and main CTA to show interest;

• As we wanted our app to be friendly and have its own identity, we decided to put aside the standard terminology of "requesting a connection" and use a connection logic a bit more personalized: 1) A first user would show interest first > "I'm Interested" CTA; 2) The second user would know that and could then connect since the interest was shown already on the other side > "Connect" CTA; 3) Both will then be connected at a final stage > "Connected".

• In order to keep track of these connections, two other tabs were considered apart from the Discover: the Pending Connections and Connections. The first listed the pending states, such as the "Interested In Me" and "I'm Interested In". The latter listed the final connections;

• Finally, a right side box was also considered with some questions that correspond to criteria, named "Improve your Matches". There, users would be able to curate their matches even more according to their answers:‍ 1) We decided to make it always visible on the screen to encourage users to regularly answer new on, as this concept was somehow new on matching platforms.

This started to come to life as wireframes, but after some back and forth making sure it was aligned with stakeholder expectations, the UI phase was not long in coming.

Soon, the matching feature was developed and launched. And we were very excited to see users' reactions 🚀 👀

The Evolution: The Iterations

Note that in each cycle, we worked on specific user requests that were released separately.This iterative approach also helps users assimilate and absorb the changes with time, by understanding some logical changes without feeling confused or overwhelmed.

Summing up the changes made throughout the multiple iterations:‍

The Discover page become cleaner and easier to digest, making overall a better use of space:

• The cards' cover image was removed to clean them up and give space for other options to appear, such as the badges and the Add to List CTA: 1) We wanted to introduce a bit of gamification into the experience, so depending on users' selected criteria, they can earn some badges that immediately let them stand out in the crowd — on hover, they let you know more about the meaning; 2) A new CTA was added to create a bridge to another feature developed — Add to List — that as the name says lets you create a personalized list of your interest.

• The secondary cards were transformed into a list view to becoming easier to read;

• The personalized connection logic of showing interest ended up creating some confusion between the users, so we move back to the standard request logic: 1) On the main CTAs, the copy was changed to: "Connect" > "Accept Connection" > "Connected"; 2) The Pending Connection tab was changed to Connection Requests and inside, the tabs were changed to the common "Sent" and "Received".

• A filter mechanism was added to allow users to search and filter companies depending on their interests;

• The Improve your Matches box become a floating box that can be expanded and collapsed, as this concept is now known by the users and allows us to present more cards on the page: Inside the box, users can also attribute an "importance weight" to the question to make the algorithm more or less flexible.

By now, we find ourselves in a comfortable position on Matching, but always with an eye open on what may come next. This is an ever-ending process, while users keep using the product every day.

As you can see, this iterative process is nothing but a methodology that can be applied to every piece of your product. We are currently working on a new feature where the process has been exactly the same, as it already proved us to be successful in multiple contexts.

So, why should you take this iterative approach?

At this point, you should be able to recognize the benefits of using this iterative approach on your projects. But here's a list of undeniable advantages that we'll make you embrace this often:

• It allows you to rapidly validate your solutions early on the product development lifecycle;

• It makes use of user feedback as the guiding principle ensuring that our solutions meet user needs;

• It builds trust into client relationships, by showing evolution based on data rather than giving them a "final" product;

• It builds trust within the development team, as they know that what they are building has already recognized value;

• It helps you gain more experience on how to build certain things, considering the lessons and feedback collected overtime;

• It gives stakeholders a spot in the light and makes them feel part of the process, by showing we care about what they think.

As designers, we'll learn about when to abandon ideas that totally fail and embrace the promising ones, that can be iterated rapidly until they take sufficient strength to be developed.It's a cost-effective approach where the user experience is put at the heart of the design process.

Hope this helps you with your projects!Can't wait to see your bikes turn into the most functional cars.

→ Got curious about Abaca WebApp? Take a look at our case study.