The Project
Kleine Wunder Babyschlaf Coaching is an open-hearted and ambitious one-woman business, led by Annalena Eigner. As a proud mother and trained sleep coach, her mission is to help mothers of babies and toddlers aged around 6-24 months to significantly improve their children's sleep situation. By following a gentle and attachment-oriented approach, significant improvements up to sleeping through can be achieved within 2-3 weeks.
The goal of this project was to establish a strong brand identity and website that would allow Annalena to become a leader in her industry. Further, it was vital to make the web design responsive in order to enhance the accessibility.
In the role of the UX/UI designer, I managed all aspects of the project- from the initial competitive analysis and creation of the visual identity to the user research and ideation, through to prototyping and user testing.
Duration: 10 weeks
Tools: Illustrator, InDesign, XD, Procreate, Useberry
Deliverables: Visual Identity, Print Design, Responsive Web Design
Target Audience
Kleine Wunder primarily aims at a feminine target group. The cluster mainly includes young mothers between the ages of 25 and 38 with a medium to high income.
Reliable
Strengthening
Sensitive
Friendly
We didn't just design a logo.
We designed an entire story brand.
The focus was on creating a logo that is both playful and modern. My client's preference was to include a soft watercolor effect in the brand type. Hence, I carefully drew shapes with a watercolor brush in Procreate. Then, I pulled these drawings into Illustrator to create a clipping mask with the text. For the tag line I chose a sans serif typeface to add a clean look to it. But we decided to even go a step further and add a baby cot mobile as a brand mark, so we can really concentrate on the aspect of sleep, baby sleep respectively. To the left, you see the main logo in a horizontal format. Later on you will see that this is also the format we chose for the website's logo in the header. To the right, we have the secondary logo which we used for the website's footer in the desktop version.
Primary Logo
Secondary Logo
UI Design
At the beginning of this design process, I only created very simple wireframes for both desktop and phone on paper. After validating the main concept with my client, I then started designing the screens in Adobe XD. Initially, the focus was on the desktop version. Here, the goal was to establish a user-friendly experience supported by a visually appealing design. The mobile screens have been designed to a later point in the project, after the approval of the desktop prototype. Overall I had to improve the desktop prototype over multiple iterations.
The Desktop Prototype
For the web design, I focused on keeping it minimal to avoid an overload of designs and information. We incorporated a fairly transparent background of a cloud to create a soft and friendly atmosphere when hopping on the website. For this project, I also designed further brand assets such as the stars and mobile graphics. Moreover, I worked with pattern libs as well as with my personal UI kit where I extracted relevant components from such as the contact form or buttons.
The main focus however, was on the Coaching page. The challenge hereby was to showcase my client's coaching process in a more visual way. Through my previously conducted market research, I quickly discovered that almost every competitor was displaying their process in the same, boring way...as standard body text. The amount of information was quite overwhelming increasing the risk of loosing the user's attention or, much worse, seeing the user leave the website entirely. In order to eliminate this potential thread, I decided to draw out the process. I requested from my client to rewrite the individual phases to keep them as short, sharp and shiny as possible.
Now, we basically start out with identifying the problem - why the baby isn't sleeping regularly - on this page first. From there, the user will be navigated through Annalena's coaching process which will solve the initial problem and result in a peacefully sleeping baby. It's almost like we are taking the user on a little emotional journey from which the user then can trigger the perfectly placed CTA button to get in touch with Annalena.
I'm really happy with how this page turned out. And seeing my client's positive reaction is what really drives me. Providing transparency and clarity to the users by showing them this straightforward process in a slightly different way, has become crucial in acquiring new clients. Through this design solution we established another USP.
The Mobile Prototype
To provide the best possible user experience, I designed for multiple screen sizes. This way, the layout content can quickly adapt to the size of screen the website is presented on. During the design process, I had to ensure that key elements such as consistency, whitespace, intuitive navigation and compatibility were used throughout.
Usability Testing
Before handing over the final files to the developer, I had to validate my proposed solution. Hence, I asked five users, my client alongside family and friends, to perform different tasks. I conducted all user tests through Useberry as it is a very handy tool for user feedback and prototype analytics that can be easily plugged in to Adobe XD. We started out with the first-click testing method to get an overall understanding of the website's usability. The task was simple as we tracked whether or not participants would click down the right path - leading to the contact page - on the first click. Except of one user, every participant completed their task successfully. For the second scenario, we confronted the users with a 5-second-test in which an image was shown to the participant for just five seconds on the dot. It was a great way to measure how well the design communicates the intended message of my client's business. I took notes of the participants first impressions and also asked them what they were able to memorize. Thanks to this feedback I was able to apply some final touches to the design.
Print Design
In the final phase of the project, I also designed a print flyer for my client that she could use for offline marketing. For this design, I used solely the green tones of the color palette. I mixed organic shapes with some of the designed graphics to give the flyer a playful look. Using as much whitespace as possible, we maintained a clean look.
In the final phase of the project, I also designed a print flyer for my client that she could use for offline marketing. For this design, I used solely the green tones of the color palette. I mixed organic shapes with some of the designed graphics to give the flyer a playful look. Using as much whitespace as possible, we maintained a clean look.
Reflections
I learnt how important it is to consider the user on every stage of the design process. I managed to hold all deadlines, even though I faced some design challenges as mentioned earlier. I understood that market and user research is crucial and need to be done thoroughly. The communication with my client was very easy and clear right from the beginning. Being a very organised person following an agile approach, I managed to stay on track and maintain transparency towards my client throughout the project. At the end of the project, all final files were handed over to developer, Nadine Jehle, who implemented the code using WordPress. If you are curious, click here to take a look at the live website which, however, has turned out slightly different due to coding challenges alongside a change requests made by the client.
