Vivace (a perennial plant :french:) is a website, structure of which is similar to a job marketplace and a project platform. Volunteers can apply to activities (events, tasks, projects, and training) created by organizations. This is my first project for Canada and French audience (it is still ongoing and will be translated to French and hopefully start-up in Quebec soon).

Logo design, branding, UI / UX design

Research > User flow > Logo & branding > Wire-frames > Mockups > Prototypes

The goal of the home page is to stimulate volunteer's motivation and give recent news of organizations he/she truly cares about. We (my client Samuel and I) tried to embrace user experience by enhancing volunteer's feeling of heroism and contribution. 

This is the end result, please scroll down to learn more about how this project evolved!

I can say with 100% confidence that Vivace is my favorite up-to-date project, just take a look at 18 description pages I was given from the very beginning :) It definitely took me a couple of days to study, understand and visualize but it was incredibly helpful.

First of all, I organized all the information and divided it by functions, user types, and pages. This helped to see full functionality of the website and variety of user personas.

At the beginning, I tried creating user flows for user types (organization admins, assets and volunteers). My sketches seemed too complicated even for me...

I had to come up with a different system: to show flows not depending on users but results they were coming for. Using this method, I was able to create 23 flows (I know :D) and showcase every step of every user type on every page. 

Some of them are:

- Creating / deleting an organization (for admins)

- Editing organization / activity profile (for assets)

- Suggesting / applying for / quitting an activity (for volunteers)

Even though the project name gives an idea of visual concept, I asked my client to create a mood-board that inspired and represented his vision. It has allowed me to synchronize with Samuel's ideas and deliver a better quality interface. Below you can see some images he sent me.

Creating a logo, I tried to keep it simple (as always) and easy to memorize. Firstly, it started with "V" letter sketches and then evolved it to different options for the client to choose from.

The goal of any landing page is to attract and present an idea of a project. Visual illustrations are one of the best ways to achieve this. For Vivace, I tried to merge two concepts: volunteering (rising hands) and the project name translation (growth of perennial plants). I guess it worked out pretty well, you can see Samuel's reaction below.

And this is how the illustration looks like on the landing page:

After logging in through the landing page, users will be able to use the platform for their benefits. There are many pages designed along with the ones you can see below.

8 pixels and 12 columns grids were used to achieve pixel-perfect interface.

Components, colors, icons & typography
Using components is an easy way to keep the work process simple and consistent. Usually, I create components for each frame group: desktop, tablet, and mobile. Also, #figma has text and color style features which I use in every project. There were 6 color styles and 7 styles of Nunito Sans font family used.

For now, prototyping works as a presentation for potential investors and will hopefully evolve into all pages platform prototype.

Credits: Samuel Dinel