COVERFY
The product
Coverfy is the first insurtech mobile app in Spain. It has more than 100k users and a 4,5 ranking in the stores. The company is a startup based in Barcelona. It counts with more than 50 employees nowadays. The main product is the mobile app. It's free and it's available for iOS and Android, but they also have a web-app version. The highlights of Coverfy are:
-
Save time & money by using the app
-
Forget about papers having all your insurers in your pocket
-
Check your insurers wherever and whenever you want
-
Ask any question to you personal consultant, for free!
-
Hire a new insurer in less than 3 minutes from your phone
-
Declare an accident just tapping a button
Tasks
As Head of Design, I am in charge of all the design tasks. This includes:
UI/UX Design
Design and creation of the screens for the Mobile App (iOS & Android), as well as for the Web-app in desktop, iPad and mobile version.
For this task I did a previous market research to see how our direct competitors and the top internet companies were resolving some designs and processes, what were the latest good practices and best UI designs and what we could apply in our own product.
The challenge in this case was to design for a different target that I was used to: Spanish men from 35 to 50 years old. This made me pay special attention when designing like: adapting the touch & feel and the resolution of the screens to this specific target (bigger fingers, worst view, people not so used to use apps), using a male color palette and a formal tone when writing the copies.
App & Web-app Redesign
Since I got to the company, the app kept growing in functions but got sucked in design. So I proposed to make a “redesign” to make it newer and fresh. This is what I did:
-
Replacing the current type (Source Sans Pro) for a new one more rounded (Nunito)
-
Replacing the darkest color (close to black) for a dark blue and introducing some variants of the brand color to use them on animations and illustrations
-
Changing the style of all the icons in the app to make them clearer, original and easier to use after as a font
-
Improving the design of the app’s screens and its elements (policies, offers, lists, details, forms…) as well as some flows to make them shorter and easier for the user
-
Using a “text classes” system so when we gave the screens to the technic department, the received the flow in PDF, the screens within the UI design in PNG and these same images with the name of the class of each text instead of the proper text, so they don’t have to type styles in line in every single piece of text
-
Implementing a new work method using Abstract so several people can work on branches of the same master Sketch file in order to be more productive and to work always on updated files
A part from that, since I had to coordinate an intern for Video Editing & Motion graphics, we introduced in the app some animations, illustrations, icons and videos made by her. She is not my intern anymore (don't worry, she's hired). Her name is Laura Nelly and I can tell that she will have a great professional career. Here you can see some of the cute things that she mades.
Here you can see the before & after.
Web Design & Development
Web design, Front end & Back end development of the company’s site, internal landing pages and emails. This includes:
-
Original Design: customization of the website for Coverfy
-
Image Content Creation: creation of images for header backgrounds, animations and sections.
-
Front end Development: structure of the page with reusable code, comments in English and doing two versions of each file (one clean and one compressed).
-
Back end development: customization of WordPress templates using PHP for pages like blog, news or job offers.
-
Search Engine Optimization techniques: by placing correctly the fonts, CSS and JS files links in the HTML, optimizing images (weight, format and naming), minifying codes (HTML, CSS, JS), setting a caché for different elements, compressing the server and having a responsive mobile version.
-
SEO good practices: by using correctly the metas in the head, trying not to duplicate indexed content, including robots if it's necessary and naming properly all the images (alt, title).
-
Cross Browser: by using "webkit" styles in the CSS, checking if some styles are well seen in every browser or not before implementing them (like flex display or positions) and testing the website in different browsers before launching it.
-
Responsive design: by using mediaqueries in order to see the website correctly and adapted to different screen sizes or devices.
