Wavenn

I helped the Wavenn team with the creation of their product first prototype, from investment simulation to performance monitoring.

Role

Product Designer

In direct collaboration with Founder

Skills

Product Vision
Workshop facilitation
UX Mapping
Wireframes
App Design

Tools

Figjam
Figma

Duration

6 months

Introduction

Wavenn is a responsible investment management platform. It aims to make finance ethical, simple and accessible to all, so that its users can invest their money in assets that respect the Paris Agreements (global warming < 2°C)

In a changing market, with new fintechs looking to compete with traditional banks, the Wavenn team needed to frame its product and identify the most important features for the Go-to-Market. We needed to build a product strategy within a low-code ecosystem before designing the first interactive prototype. This prototype had to illustrate how easy it was to open and manage a Wavenn account, while offering maximum transparency on the assets financed.

Product Framing

Why & Who

We conducted a first workshop to define the Go-to-Market and the first draft of roadmap:

- What do we want to accomplish with Wavenn?
- Who is the user and what is their need?
- How can we answer that need? With which features?

Wavenn's idea is based on the fact that today 87% of investment products are not responsible, which makes savings the leading source of CO2 emissions for individuals. Responsible investment is complicated, opaque and time-consuming, as it is difficult to identify truly responsible investment and greenwashing.

In order to structure the stakeholders' vision around a single plan, we defined a product vision, Wavenn's "WHY": The objective of the product was to make responsible investment accessible to as many people as possible.

In order to design a relevant and efficient product, we had to define the needs and expectations of its first users. This profile will obviously change over the course of iterations and product development, based on extensive user research.

Once these elements were defined, we could begin to list Wavenn potential features. We then organized this list using the Affinity Map method, which consists of creating clusters of features based on thematics. Finally, we separated the "Must-Have" from the "Nice-to-Have" features within these categories.

Features priorization

Our second workshop had the objective to narrow the discussion of which features we should start with.

- Which resources are necessary to develop each considered feature?
- What should our MVP include?

In order to make these features a bit more tangible and to start concretize the product, we then listed all the data that it would be necessary to collect from the user to allow each of these features.

The final step of the workshop was to prioritize the features in order to define a product roadmap. According to their impact and complexity of implementation, the features were arranged in a matrix, then ordered in a series of product versions.

Experience mapping

During our final workshop, we mapped the experience that Wavenn could offer, based on the elements previously defined. This UX Mapping went from the website first visit to the dashboard manipulation. For each major step of the journey, we listed Actions, Questions, Delightful Moments, Pain Points and Opportunities.

It became clear that our main challenge laid in the first moments: as a new financial product, it must raise trust and interest from users, so they start a first investment simulation. If the simulation is quick, clear and transparent, the user is more likely to become a customer. The entire Wavenn experience is currently based on this process, which is why we decided to optimize it as much as possible.

Once product scoping was done, we started the design by building a User Flow, in order to split the interface into several pages, arrange them the relation between each other, structure the processes related to each user action and highlight the omnicanal interactions.

Wireframes

Once the interface architecture was defined, we started working on the hierarchy of information within the pages. To do this, we designed wireframes, with gradual levels of fidelity, in order to iterate on elements layout, the relation between each other and pages construction.

This step allowed us to reduce the number of pages of the simulation, by logically organizing the questions, according to their complexity and personal nature. We also clarified the indicators within the dashboard as much as possible, so that a user with no financial knowledge could understand his portfolio.

Components design

Once the skeleton was established, we could move on to designing the components.

We had to define graphic identity foundations and integrate it into a variety of interface components. We wanted to create a UI kit that was wide enough that designing the next features would be very quick for the client.

We divided these components into categories (input, menu, CTAs, cards...) and we relied on Figma's advanced features (variants, properties, interactions) to make them as flexible and automatic as possible, which would allow the interface to be easily adapted on mobile. These components will be improved as the product evolves.

Prototype design

The final prototype design was driven by the idea to provide a crystal clear MVP for beginners users, useful and easy to learn.

Consistency between the simulation process and the dashboard was ensured through the use of components and a regular grid layout. This layout was the result of several iterations, but it was mandatory so that Wavenn's UI stand out from competitors. We also did some data visualization work for each indicator, in order to improve readability as much as possible.

We finally set up all the interaction links and animations between the pages, desktop and mobile, in order to deliver the most interactive and detailed prototype possible to the developers.

The handoff phase is essential to ensure consistency between the prototype and the developed version. We therefore made sure that our design was adapted to the way developers work. We set up a tree-like nomenclature and we produced documentation to facilitate their handling.

What I learned

Being involved so early in the product building process was a great opportunity for me. Everything had to be done, side by side with the founder.

I learned that flexibility was mandatory in order to adapt to founder vision and market changes. A good Product Designer should never fall in love with his designs, as they are so likely to change for so many reasons during the tortuous life cycle of a startup.

Finally, I understood that the early moments of a product experience are critical for product acquisition, especially in sector as competitive as financial services, where trust and understandability are crucial to hook users.

What I would do differentely

As often, I found myself quite frustrated by the absence of proper user tests in the design process. The founder wanted a first prototype to gather a first base of power users and we could not take 2 additional weeks before release.