Kinsu

Design System

Simple, fair insurance has a new design system.

The Problem

Kinsu is an insurance startup that is committed to create a simple, honest, and easy insurance service.In 2018 the team reached out to me because they noticed some problems with their team communication, collaboration, and organization. Also, after having multiple designers working on their products, they felt that their product could be improved and more consistent.

My Role

During 3 weeks, I was responsible for the new collaboration process, components library design, and overall interface revamp.

Interface Inventory

Because I was not familiar with Kinsu’s products interface, I started by running an interface inventory that allowed me to categorise their components. An interface inventory is a collection of the bits and pieces that make up the interface.

I went through Kinsus’s mobile app interface and I found multiple inconsistencies such as different styles buttons, input fields, typography, etc…

Design and Development Teams Collaboration

Because Kinsu’s is still a small team, we didn’t want to create an unnecessary complex collaboration structure. We just needed to agree on communication channels, design processes, and development hand-off.To solve the interface design process, we decided to build a basic component library using Sketch Libraries. This allowed the team to share design components and styles across documents and have them up-to-date (consistency, remember?).

In order to have clear communication, it’s important to make sure that everyone has a clear understanding of things. That means creating naming conventions between design and development teams.

I went through Kinsus’s mobile app interface and I found multiple inconsistencies such as different styles buttons, input fields, typography, etc…

Components Library

The main goal for the components library is to save time designing the same elements over and over again. By creating a component, we are making sure that different designers are using the same element across document which makes the interface consistent and creates a better user experience.Using a component library on a daily basis allows designers to focus on creating better features and spend more time on research and validation.

Sketch Library components hierarchy (atomic design)
Now Kinsu’s design team can focus on creating new features, custom components, and user research.

Prototyping

Clickable prototypes are a great way to make sure that everyone is on the same page, reducing the chance for mistakes in the future.

Clickable prototypes allows designers to test their work and share it with developers to make sure everyone is on the same page.

Revamped Interface

It would not make sense to create an interface inventory and components system with an outdated interface. Here are some screens using the redesigned components.

Welcome
Sign Up / Log In
Dashboard
Product Input
Quote Card Details
Confirmation Screen
Client Feedback

“Really professional and delivered very high quality work, exactly what we needed.”

"I worked with Diogo on the creation of a mobile app design system and he has been amazing! Really professional and delivered very high-quality work, exactly what we needed."

Noach Ben-Haim, Head of Design at Kinsu

Browse More Projects