Bebino

Branding, UX/UI, Illustrations
 
Creating a responsive web app for documenting the memories during after pregnancy sharing family memories.
benino_thumbnail_2.png
bebino_desktop_mockup.png
Scope of project

"Bebino" was a product idea of a Berlin based startup who wanted to create an innovative digital platform targeting mothers for saving and sharing family memories during and after pregnancy. They hired UX studio to help them create a responsive web application based on this idea. They needed a safe and trustworthy platform, where young mothers could save and share memories and photos or main life events, track the development of their children and pregnancy online instead of a paper based diary. The platform was supposed to be easy to use, clean yet friendly with some fun gamification features.

Team

 

The project team consisted of 2 designers and 2 researchers and 2 project managers from the client's side. I had the pleasure to be one of the UX/UI designers delegated for this project by UX studio.

 

Main design tools: Sketch, Zeplin

bebino_parallaz.jpg
Discovery

 

We started out with a workshop involving all members of the project team. At this stage, we gathered and analysed insights from the team, and identified the most important needs that we should address with the product.

 

We created user personas, started sketching and made a clickable prototype. We performed usertests and user interviews with pregnant women and mothers to gather insights about their emotional journey and necessities during and after pregnancy, and shared it with the client on our weekly meetings. We kept iterating the wireframes based on these insights and feedbacks.

bebino_logo_horizontal_color.png
Visual identity

 

Since the product didn't have any visual identity yet, first we created some moodbards based on the user personas and the brand persona to specify the overall visual atmosphere.

 

After the client chose the moodboards they loved the most we put together some UI mockups. We also sketched some logo ideas for their brand that could serve as an app icon as well.

bebino_mobile_paralax.jpg
Illustrations & Icons

 

After setting up a basis for the product's visual identity we knew that we needed to add custom illustrations and icons to make the product more engaging emotionally.

 

I created 3 sets of example icons with slightly different illustrational styles. The client chose the first direction, a flat yet a bit shaded minimalistic direction, that was a great fit with the previously finalized moodboard.

collection.png
Final UI Design

 

After finalising the clickable wireframes with the client and having a basic visual identity, we started to build the final responsive user interface for desktop and mobile. The web app needed to look clean yet friendly. The home screen was a card view based dashboard, where users can add new images, text based contents and filter the previously added memories based on family members and category labels. The mother and the children had also separate subpages with a sidebar offering additional features like calendar, doctor appointments manager, development tracker, shopping lists, and rewards. We designed each screens in Sketch for desktop and mobile, and handed over the completed screens and UI kit in Zeplin for development.