Nutriklub (formerly known as Miluklub) is a project we worked on for four months earlier this year. Our goal was a complete UX redesign of the site.
Nutriklub offers extensive review articles, written by experts, on the most interesting and important topics for mothers. The website’s content is produced by professionals with a huge range of expertise - the bulk of the articles cover topics such as nutrition, pediatrics, and gynecology and obstetrics fields. Nutriklub also gives parents a chance to get in touch with experts and doctors to speak privately about any questions they might have. The website is continuously being updated to provide parents with permanent access to the most professional information about children’s nutrition and proper development.
The old website was created in 2009 and many new features had been added since then. Thus, the website was struggling with several problems: obsolete technical background, visuals and user experience; illogical and very broad structure; unnecessary items, and poorly constructed content strategy. Since 2009, there has been a significant increase in the number of users accessing the website from mobile devices. Currently, 70% of the total visitors access the site from smartphones and tablets.The old website wasn’t optimized for responsive usage, many of the features weren’t available at all for users on mobile and tablets.
Our goal was to simplify the structure and ease access to key features, organize the content more effectively, build an intuitive and consistent experience, and to push content to where it is useful and anticipated. All of these should follow the mobile first approach. The whole process included user interviews about the current website, wireframing, prototype development and usability testing, usability test validation, and iterations.
In order to achieve our goal, we had to go through a lengthy process. First, we did the research. We answered the following questions: “Who is our user audience? What are their needs and goals?” Then we defined business needs and goals. We had a relatively small target group, which changes rapidly. Within this group we had two types of mothers - those who are getting ready to become a mother, and those who are already mothers. Their needs were a bit different. Our pregnant mom is emotional, prone to worrying, and hungry for information. She needs reassurance that her baby is developing properly, and she wants to feel that she is well informed when it comes to medical details. Our mom who has already given birth has very little time, a lot of questions, and she needs expert answers fast. She needs reassurance that she is a good mom. Short term focus: questions/answers are all that she wants. Danone’s business goals were: to be a mother’s expert partner, to support them throughout their journey through motherhood from conception through toddlerhood by providing easy-to-access, trusted and up-to-date information, giving them emotional confirmation, letting moms connect actively with the brand, and engaging them with baby nutrition information.
After research, we started to work on page structure. We simplified it and provided easy access to key features. Before jumping into detailed wireframes, we needed to validate the navigation principles. There are two kinds of navigation on the website: time-based and topic-based. During the analysis it turned out that moms were interested in either a specific subject (e.g. signs and symptoms of pregnancy), or a specific time-period (e.g. 12th week of pregnancy), and everything that is included in the related topics. On the old website there was too much information shown at the same time, which made it harder for them to find their desired topic. The topic-based navigation wasn’t too obvious either, as it contained items that were time-based.
We simplified the navigation by restructuring it and keeping only the the topics in the menu, and with the help of a slider, users can navigate between time-periods.
The website architecture now allows for easy and intuitive navigation among all sections.
We started designing wireframes with mobile versions, since the majority of users visit the page from their mobile devices. The main challenge here was to include the following items on the top of the screen: topic-based navigation, search, profile handling, a user’s personalized page, and the slider. In the mobile version of the old site, the slider wasn’t available, despite being a key feature on the website. The reason for this was the difficulty of its optimization and implementation to a small screen. We solved this problem by providing special access to the slider as it appears only when it’s needed, thus doesn’t take up the screen space all the time.
Visit our Behance presentation for more details on the mobile phase.
After that, our biggest challenge was the adaptation of this complex navigation to desktop. On desktop, we show all the navigation elements. The first problem we encountered was the large amount of items we had to display. In the mobile hamburger menu we had nine menu items, four of them had submenu items as well (minimum seven, maximum eleven). Besides this, we had to provide highlighted space for contact info and consulting.
After several unsuccessful attempts, we simplified the navigation by moving the timeline-based and topic-based navigation to the upper part of the screen. Information about Nutriklub was moved to the left side of the page, and consultation went to the right side. This way, all topics were placed based on their categories. We weren’t satisfied with the format of the list view on the left side of the page, as it didn’t contain much information in itself, so we created another version: every menu item has a short summary about what to expect under it. In a later phase of the development, when the site will show personalized information, the current relevant content will be only displayed. Besides this, Contact and Consultation appear at the same place on all pages.
In addition, we re-designed the calculators (pregnancy weight, delivery date, percentile). More about the calculators and other details can be found in our Behance presentation.
The only way to find out if a solution will work is to do user testing.
We gave different tasks to 15 participants throughout three days. During the first user test we were curious to see if the Nutriklub’s new, more traditional time-based navigation and appearance was more useful, and if so, how much. Besides this, we wanted to see how they liked profile handling and accessibility of the products.
It was also interesting to experience what emotional feelings moms get from seeing the articles written by experts highlighted on the website.
The user tests turned out to be very constructive. We had to make three minor changes as a result and we received a lot of positive feedback during the user testing.
As a result of our work the number of active users has doubled, the number of page views more than doubled, and the number of returning users increased by 7%.
Nutriklub won the Audience Choice Award and Quality Award in the Lifestyle & Sport category in the 'Website of the Year 2016' competition.