{"id":580,"date":"2024-04-15T19:41:18","date_gmt":"2024-04-15T17:41:18","guid":{"rendered":"https:\/\/stanbednarekdesign.com\/?p=580"},"modified":"2024-04-15T19:41:18","modified_gmt":"2024-04-15T17:41:18","slug":"kietzee-making-parenthood-easier","status":"publish","type":"post","link":"https:\/\/stanbednarek.com\/index.php\/2024\/04\/15\/kietzee-making-parenthood-easier\/","title":{"rendered":"Kietzee. Making parenthood easier"},"content":{"rendered":"
UX\/UI Design<\/a><\/div>\n\n
\"\"<\/figure>\n\n\n\n
\n\n
Dashboard<\/td>\n March 2024<\/td>\n Kietzee<\/a><\/td>\n together with
David Can Umar<\/a><\/td>\n<\/tr>\n<\/table>\n\n\n\n

Intro<\/h3>\n\n\n\n

Kietzee<\/strong> is the online service<\/a> of the energetic American-German couple Jeff and Lisa, parents of two living in Berlin. The project was born out of pure neccessity – they needed to navigate through the meanders of the local legal, social and healthcare systems. Most of the information available in the infosphere was only in German language, so the couple decided to create a platform for parents with an extra focus on expats and non-locals<\/strong>. Moreover, most competitors’ products are aimed at mothers or are dedicated to observing the development of the fetus or child, rather than providing practical information about life around<\/em> the pregnancy.<\/p>\n\n\n\n

Kietzee is meant to be practical, parent-centered, father-inclusive and foreigners-friendly<\/strong>.<\/p>\n\n\n\n

\"\"
A depiction from Kietzee’s<\/a> website [12.03.2024]<\/figcaption><\/figure>\n\n\n\n

About the project<\/h3>\n\n\n\n

The scope of this two-week sprint was the creation of a Dashboard feature to the extisting and functioning website<\/strong>. The users should be shown their personalized journey’s timeline<\/strong>:
– adjusted to the stage of their pregnancy based on the expected delivery date or
– adjusted to the age of the infant based on the factual delivery date.<\/p>\n\n\n\n

Pre-evalution & scope concretization<\/h3>\n\n\n\n

Although this wasn’t directly<\/em> our task, we evaluated various information and data obtained from the Client prior to creating Dashboard. We checked, among other things, whether the Kietzee’s User Persona<\/strong> was consistent with real data (Google Analytics<\/strong>) and potential users’ profile, we performed Heuristic Evaluation<\/strong> and checked the Information Architecture<\/strong> stucture. Our findings were delivered to Clients, containing a detailed description of assessed problem areas, proposed solutions and proposals which activities we can incorporate into our scope.<\/p>\n\n\n\n

Ultimately, we agreed that we would create a responsive Dashboard and also propose a new color palette and icons for the portal. We chose a mobile phone as the dominant platform and that is where the flow is presented.<\/p>\n\n\n\n

\n
See Dashboard for Mobile<\/strong><\/a><\/div>\n<\/div>\n\n\n\n

Color palette and icons style<\/h3>\n\n\n\n

Kietzee’s main color was Teal and we haven’t changed it<\/strong> to keep the brand identity intact. Unfortunately, full previous color pallete did not always meet accessibility standards and sometimes conveyed ambivalent signals (clay red as a call to action, for example). So we created a new palette around the main Teal color.<\/p>\n\n\n\n

\"\"
Kietzee’s logo<\/figcaption><\/figure>\n\n\n\n

It was really a challenge, because such a delicate topic evokes many emotional responses and it’s difficult to find a compromise. We were committed, however, to avoid too mommy vibe<\/em>, as well as colors traditionally associated with the child’s gender – pure pink and blue. We proposed 4 color palettes and evaluated them in a Google Form. The palette presented below was the unrivaled winner (52% of votes).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The next step was to create icons<\/strong> for the website. While rounded shapes evoke warmer emotions and are associated more with care, they can sometimes evoke a sense of lack of professionalism. And no one wants a pregnancy help service to be frivolous! On the other hand, symbols that were too sharp<\/em> seemed unfriendly to parenting.<\/p>\n\n\n\n

After a series of tests, we found a solution in simple geometric shapes, but with rounded corners.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Dashboard<\/h3>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Our goal was not only to present the most important content for the user, but also to engage<\/strong> them in using the service without receiving constant notifications and emails. We tried the soft<\/em> Gamification<\/strong> – presenting a status that creates a sense of achieving a goal and motivates to do more, but without setting specific goals to achieve, which may be potentially stressful during pregnancy. Parents’ peace of mind is a priority! It’s making parenthood easier.<\/strong><\/p>\n\n\n\n

The User sees the number of articles read, events attended, offers redeemed, as well as professionals whom they consider important in their journey. Additionally, they immediately see the pregnancy status or age of the child – a journey’s indicator.<\/p>\n<\/div>\n<\/div>\n\n\n\n

At the bottom of the screen there are tiles with give only information adapted to the user’s moment in their journey.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Information Architecture<\/h3>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

The main need of the Dashboard was to sort the information<\/strong> in such a way that it was available clearly<\/strong> and not overwhelmingly. To achieve this effect we used card sorting<\/strong> and testing, testing and once more testing.<\/p>\n\n\n\n

After clicking on a tile, the roll of a given section expands.<\/p>\n\n\n\n

In the case of articles, the content is additionally divided into Beaurocracy – articles about the intricacies of the German socio-legal sphere, Health – about the physical health of the child and parents, and Self Care – a section for parents about taking care of their soul and balance.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

The Event section expands into a calendar that shows the user his month. The Toggle<\/strong> allows them to turn off the types of events that they are not interested in. A bisque colored circle denotes events for Expecting parents, teal one – for Parenting, a half-half bisque and teal circle for both categories, and a bisque circle superimposed on teal suggests that there are events from more than one category that day. The arrows allow to navigate forward or backward to show events from other months.<\/p>\n\n\n\n

When the user clicks on a day, a list of events for that day unfolds. The name of the event, its date and time, category and place are presented. After clicking on the selected event, a full description appears.<\/p>\n\n\n\n

Offers expand to Header height. Here, too, only the most important information is shown, and the user can see more by clicking on a specific product. The situation is similar in Experts section. The user sees experts’ profile picture, their name, roles, and the options of meeting the clients. Both screens can be scrolled.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Integrating existing features with the new Dashboard<\/h3>\n\n\n\n

David Can and I did not design the content view – i.e. individual articles, events, etc. However, these features had to be integrated with a new way of displaying content – our dashboard. We decided to create simple buttons that can be easily added to templates. We used colors from the new palette – system status pending and system status success.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Key Learnings and Prototype Recording<\/h3>\n\n\n\n
\n