{"id":4069,"date":"2023-09-22T13:48:55","date_gmt":"2023-09-22T13:48:55","guid":{"rendered":"http:\/\/miguelbarrerodesign.com\/?post_type=portfolio&p=4069"},"modified":"2025-03-07T11:14:58","modified_gmt":"2025-03-07T11:14:58","slug":"getsurance-web-app-redesign","status":"publish","type":"portfolio","link":"https:\/\/miguelbarrerodesign.com\/index.php\/portfolio\/getsurance-web-app-redesign\/","title":{"rendered":"Getsurance redesign branding and web"},"content":{"rendered":"[vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” css=”.vc_custom_1695721888973{padding-top: 10px !important;padding-bottom: 10px !important;}”][vc_column width=”1\/2″][vc_column_text animation=”animation bottom-to-top”]\n

Redesign of the Getsurance responsive online platform<\/span><\/h2>\n

Getsurance offers digital life insurance that people can buy online.\u00a0 They are a Berlin-based company that is reshaping the insurance industry. They develop products using cutting-edge technology to create a user-centric experience. Getsurance was founded in 2016 and has been moving fast ever since with the support of our partner and risk carrier, the Reinsurance Group of America.<\/p>\n

They want to redesign their responsive platform, so they not only refresh the branding but also apply it to the design of all the pages for Mobile, Tablet, and Desktop. They wanted to go for a design more friendly, and more emotional approach and they also wanted to create a design system with defined elements that they could use further.[\/vc_column_text][\/vc_column][vc_column width=”1\/2″][vc_empty_space height=”20px”]\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\tClient: <\/strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\tGetsurance\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\tMy role: <\/strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\tUI Design
Lead Art Direction
Branding
Creative Direction\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_full_width=”true” content_placement=”middle” thb_divider_position=”bottom” css=”.vc_custom_1695718564657{margin-bottom: 2% !important;background-color: #c3e8eb !important;}”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text]\n

Solution<\/strong><\/h4>\n[\/vc_column_text][vc_column_text]\n

A new, more emotional, fresh and friendly brand design.<\/span><\/h2>\n[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/2″ animation=”animation left-to-right”][vc_column_text]For the redesign, it was important to minimize and better define the brand’s colors, create more organic shapes, use shadows that provide depth and softness to the design, icons that are clear and fun, and define imagery of Photography and Illustrations.
\nAll new elements were designed based on a grid system and taking care of the design of modules that can optimize the development process.[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/2″ animation=”animation right-to-left”][vc_column_text]The imagery was important to communicate an emotional brand. I have defined photography using “real people” and matching the new colors with the branding. Also, Illustrations were really important to achieve the emotional and friendly values we wanted to achieve.
\nWe have collaborated with an illustrator to deliver the illustrations we use.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_full_width=”true” content_placement=”middle” thb_divider_position=”bottom” css=”.vc_custom_1695720459115{margin-top: 2% !important;margin-bottom: 2% !important;}”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″]\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”30px”][vc_column_text]\n

The elements<\/span><\/h1>\n

<\/h1>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”20px”][vc_column_text]\n

Cards<\/strong><\/span><\/h4>\n

A good design for cards was important. Cards were used for many different content like prices, features or advantages of the product, FAQs, testimonials, or User cases. These cards will make the content more appealing, and interactive. Moreover playing with soft shadows will bring the layout more deepness and look more friendly. Additionally, the content of the block will be better defined, making it easier for users to focus on the content.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_full_width=”true” content_placement=”middle” thb_divider_position=”bottom” css=”.vc_custom_1695720429465{background-color: #c2e8ea !important;}”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_full_width=”true” content_placement=”middle” thb_divider_position=”bottom” css=”.vc_custom_1695720444217{margin-bottom: 5% !important;padding-top: 5% !important;padding-bottom: 5% !important;background-color: #e7f6f7 !important;}”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”20px”][vc_column_text]\n

Information screens for a fully satisfactory experience<\/strong><\/span><\/h4>\n

Buyers need to be informed about the insurance product they are buying. Therefore these informative screens were designed and shown in between the shopping process. Then buyers have a fully satisfied and correctly informed experience of their purchase. There are different screens for each of the different products.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_full_width=”true” content_placement=”middle” thb_divider_position=”bottom” css=”.vc_custom_1695717647078{margin-top: 2% !important;margin-bottom: 5% !important;border-top-width: 0px !important;background-color: #c3e8eb !important;}”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”20px”][vc_column_text]\n

Funnel checkout<\/strong><\/span><\/h4>\n

It is important that the redesign of the funnel gets good usability for users and makes a smooth online purchase process. For this, I have optimized the User Experience in 3 steps.
\nIn the first step, the user answers some questions that appear interactively according to their previous answers. In the next step, the user is recommended a price that they can customize. In the last step, the user has an overview of their product according to their criteria. The last screen is the confirmation of the purchase (feedback screen).
\nIt’s that easy to buy online insurance cursomized to your needs!<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_full_width=”true” content_placement=”middle” thb_divider_position=”bottom” css=”.vc_custom_1695717651459{margin-top: 2% !important;margin-bottom: 5% !important;border-top-width: 0px !important;background-color: #c3e8eb !important;}”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”20px”][vc_column_text]\n

Design system redesign<\/strong><\/span><\/h1>\n

The design system had to be redesigned with new defined colors, new font sizes (for mobile and desktop), and updated elements such as buttons, cards, inputs, etc. And styles like shadows, spacing, etc.
\nAlso, the icons, images, and illustrations had to be updated and included in this design system as well as their sizes in their use on desktop and mobile for consistent use of them.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_full_width=”true” thb_divider_position=”bottom” css=”.vc_custom_1695402530259{background-color: #e7f6f7 !important;}”][vc_column][vc_empty_space height=”30px”][vc_column_text]\n

Design System<\/h2>\n[\/vc_column_text][vc_row_inner][vc_column_inner width=”2\/3″]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column_inner][vc_column_inner width=”1\/3″]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column_inner][\/vc_row_inner][vc_empty_space height=”30px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column width=”1\/6″][\/vc_column][vc_column parallax=”content-moving” width=”4\/6″][vc_column_text]\n

The final design<\/strong><\/span><\/h4>\n

The final design brings a use of color more consistent, imagery and elements more emotional and friendly look. Moreover, the usability was optimized for a better experience for the buyer, like a funnel or informative screens.<\/p>\n[\/vc_column_text][vc_empty_space height=”30px”][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_full_width=”true” thb_divider_position=”bottom” thb_video_overlay_color=”#f9f8f8″][vc_column]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”220px”][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"

[vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” css=”.vc_custom_1695721888973{padding-top: 10px !important;padding-bottom: 10px !important;}”][vc_column width=”1\/2″][vc_column_text animation=”animation bottom-to-top”] Redesign of the Getsurance responsive online platform Getsurance offers digital life insurance that people can buy online.\u00a0 They are a Berlin-based company that is reshaping the insurance industry. They develop products using cutting-edge technology to create a user-centric experience. Getsurance was founded in…<\/p>\n","protected":false},"author":1,"featured_media":4159,"comment_status":"closed","ping_status":"closed","template":"","tags":[],"_links":{"self":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio\/4069"}],"collection":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/comments?post=4069"}],"version-history":[{"count":63,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio\/4069\/revisions"}],"predecessor-version":[{"id":4264,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio\/4069\/revisions\/4264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/media\/4159"}],"wp:attachment":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=4069"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=4069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}