Building an image<\/strong><\/p>\nWe started with a review of existing apps, taking into account standard guidelines and CI specifications from NovoNordisk. We discovered that a subtle UI, with playful graphics, makes the app pleasant and entertaining.<\/p>\n
The mood board, which defines the visual language and the style of the app, is built on these findings. In order to get a better understanding of what to illustrate, we also studied the positions of the body during exercise.<\/p>\n
Through the resulting illustrations, several product areas were graphically supported and symbolized. We have used them for the presentation of the categories as well as the background of interactions.<\/p>\n
The style is\u00a0 kept deliberately simple. Details in faces and clothing are kept to a minimum in order to focus on the body.<\/p>\n
Through the choice of colors, we avoid ethnic subtleties and can therefore avoid stereotypes for the user group.[\/vc_column_text][vc_empty_space height=”50px”][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row fullwidth=”true”][vc_column width=”1\/2″][vc_single_image image=”4734″ img_size=”full” alignment=”center”][\/vc_column][vc_column width=”1\/2″][vc_single_image image=”4736″ img_size=”full” alignment=”center”][\/vc_column][\/vc_row][vc_row fullwidth=”true” fullwidth_content=”false”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″][vc_column_text css=”.vc_custom_1638265249261{margin-bottom: 0px !important;}”]Creating the UI for a cross-platform application included generating illustrations and a design system as well as adapting the Google Material Guidelines for the interface. Our team decided to implement the app using the newly released cross-platform framework Flutter.<\/p>\n
We chose clear and vivid colors that are part of the NovoNordisk color palette.<\/p>\n
The main colors are white and dark blue. They are complemented by light blue, black and additional shades of gray.<\/p>\n
For example, active states are colored in dark blue and inactive states in light blue. Informational elements such as the instructions for the exercises are colored in gray. The accompanying illustrations use a complementary color palette, consisting of additional NovoNordisk colors.[\/vc_column_text][vc_empty_space][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row fullwidth=”true”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″][vc_single_image image=”4730″ img_size=”full” alignment=”center”][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″][vc_empty_space height=”50px”][vc_column_text css=”.vc_custom_1640188809590{margin-bottom: 0px !important;}”]Bringing it all together<\/strong><\/p>\nOur challenge was to provide people with haemophilia with security in their physiotherapy exercises and to motivate them towards regular exercise. By creating an intuitive navigation, cohesive visual system and user-friendly interactions, our team delivered a product now used by thousands of users around the globe.[\/vc_column_text][vc_empty_space height=”50px”][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row fullwidth=”true” css=”.vc_custom_1628261149174{background-color: #000000 !important;}”][vc_column][vc_single_image image=”4728″ img_size=”full” alignment=”center”][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"
Living Safely With Haemophilia: Relieve Anxiety, Motivate and Mobilize. <\/p>\n","protected":false},"author":1,"featured_media":3641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[26],"tags":[],"yoast_head":"\n
From an idea to the app - a case study with HaemActive<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n \n\t \n\t \n\t \n