Goal
Promis have been selected by the main incubator in Paris - Le Village, sponsored by Le Crédit Agricole bank. It is a French insurtech platform aiming at giving the best advice to independents (lawyers, liberal doctors, freelances) in regard to their insurance needs and selling those insurances as a broker.
The client turned to InventiStudio to help them design and develop front-end application.
Here's the live site, take a look!
Scope
We provided Vue.js front-end development and UI & UX design services.
UI & UX design
Color palette
Typography
Barlow sans-serif font has been used for the whole app's content.
Vue.js front-end
Responsiveness
One of the requirements was to make Promis responsive, as majority of users might look up the app on mobile devices. We made sure Promis looks perfect on all devices, be it mobile, tablet or desktop.
SVG progress circle
The "Our Assets" section was one of the trickiest (and fun!) parts of the interface implementation. It consists of a slider on the left side and an SVG progress circle on the right, representing the assets of Promis in four points.
It's all about the stroke-dasharray and stroke-dashoffset attributes, which we can easily bind to component data:
<!-- template -->
<circle
:class="['our-assets__circle--filled', isCircleTransitioned && 'our-assets__circle--filled-transitioned']"
:stroke-dasharray="circleDashArray"
:stroke-dashoffset="circleDashOffset"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3.5"
r="208"
cx="210"
cy="210"
></circle>SVG donut pie chart
Yet another SVG-powered piece of UI - this time SVG donut pie chart. We've made this one using d3.js library, which, because of it's imperative nature, is really helpful in such a custom cases.
The pie chart consists of various types of insurances, with colour intensity representing the importance of given insurance field.
Client's feedback
Vincent Stammbach
Co-Founder & CTO, Promis
“Excellent job done on Promis - congratulations! It is the first time I am outsourcing IT jobs outside of France and it was a perfect match! We had a very good communication (both written and spoken) in English, with the appropriate level of questions / feedback / reporting. InventiStudio have an awesome skills in front development (HTML / CSS / JS ES6 / Vue.js / Webpack) and there were some really tricky parts! They did a very reliable transcription of the design (Sketch files) to web pages and have excellent understanding of the instructions and challenge of the guidelines when required, with a true UI & UX design view and opinion.
PS. We have just started a second project together. Hope it will be as good as the first one!”