snuux

Aptawelt

The modular portal for experts

Accessories configurator

re-design

My Role

UI Designer — Modular Design, Responsive Design, Visual Design, Illustration

Agency

big-picture.com

Timeline & Status

Launched — 10 months duration. Finalized in 2016

Launched

10 months duration.

Finalized in 2016

Overview

Aptawelt Experten portal is a professional platform created by Danone, specifically for healthcare professionals, such as pediatricians, midwives, and nutritionists. The portal provides access to resources and information related to infant nutrition, the latest scientific research, and Danone’s Aptamil products.

The initial brief was to design and develop an innovative, user-friendly online platform, Aptawelt Experten, tailored specifically to the needs of healthcare professionals.

This portal will serve as a trusted source of information, resources, and tools for professionals, enabling them to make informed decisions and confidently recommend Aptamil products.

Our design objective was to create the platform not only by applying Aptamil's Style Guide but to offers a combination of layout flexibility, responsive behavior, and engineering efficiency, by designing a modular website. It not only supports scalable growth and user personalization but also aligns with modern trends in UI/UX design.

HIGHLIGHTS

The launch of Aptawelt Experten represented a game-changing moment for Danone and its professional users, achieving market leadership and influence in the infant nutrition space

HIGHLIGHTS

The launch of Aptawelt Experten represented a game-changing moment for Danone and its professional users, achieving market leadership and influence in the infant nutrition space

HIGHLIGHTS

The launch of Aptawelt Experten represented a game-changing moment for Danone and its professional users, achieving market leadership and influence in the infant nutrition space

THE PROBLEM

Can science be design to attract?

Boost bonds with the pros in white coats!

Aptamil’s new professional portal, Aptawelt, required a fresh, responsive design built simultaneously with updates to the consumer site, demanding close coordination and a strategic approach to content and navigation.

With no existing online platform dedicated to professionals, Aptamil faced the challenge of establishing a new digital resource hub specifically for healthcare professionals, that will allow seamless access to resources, scientific research, and product information to support infant nutrition recommendations and boost sells

Enhanced UX

Parallel Project Management

Working in tandem with the consumer site team meant aligning on design standards and managing tight timelines, as their project was slightly ahead.

Enhanced UX

Parallel Project Management

Working in tandem with the consumer site team meant aligning on design standards and managing tight timelines, as their project was slightly ahead.

Enhanced UX

Parallel Project Management

Working in tandem with the consumer site team meant aligning on design standards and managing tight timelines, as their project was slightly ahead.

Supporting Sales

Scalable Content Structure

With new products and resources expected to roll out, content needed to be scalable and structured to support future growth.

Scalable Content Structure

With new products and resources expected to roll out, content needed to be scalable and structured to support future growth.

Supporting Sales

Scalable Content Structure

With new products and resources expected to roll out, content needed to be scalable and structured to support future growth.

Supporting Sales

User-Centered Navigation Redesign

Redesigned navigation to improve usability, making it easier for healthcare professionals to access information efficiently.

User-Centered Navigation Redesign

Redesigned navigation to improve usability, making it easier for healthcare professionals to access information efficiently.

Supporting Sales

User-Centered Navigation Redesign

Redesigned navigation to improve usability, making it easier for healthcare professionals to access information efficiently.

From curves to care

Aptawelt Experten required accurate, medically relevant illustrations and icons covering a range of subjects, from nutrition science and infant growth stages to detailed product usage instructions.

Enhanced UX

Consistency with Established Iconography

The consumer team’s existing icon examples set a specific tone for Aptawelt. Icons had to align with these visuals, ensuring brand consistency.

Enhanced UX

Consistency with Established Iconography

The consumer team’s existing icon examples set a specific tone for Aptawelt. Icons had to align with these visuals, ensuring brand consistency.

Enhanced UX

Consistency with Established Iconography

The consumer team’s existing icon examples set a specific tone for Aptawelt. Icons had to align with these visuals, ensuring brand consistency.

Supporting Sales

Complex Subject Matter

Illustrations and Infographics needed to convey technical information clearly, including topics like nutrition science and product application, while being easily understandable for healthcare professionals and following the stablished Style Guide.

Complex Subject Matter

Supporting Sales

Complex Subject Matter

Supporting Sales

Technical yet Approachable

Following the style guide’s color limitations and visual tone for Aptamil, made for a difficult application when designing sober and professional illustrations and icons.

Technical yat Approachable

Technical yet Approachable

Following the style guide’s color limitations and visual tone for Aptamil, made for a difficult application when designing sober and professional illustrations and icons.

Supporting Sales

Technical yet Approachable

Following the style guide’s color limitations and visual tone for Aptamil, made for a difficult application when designing sober and professional illustrations and icons.

Layout Design

Keep healthcare pros in the loop and in the now

Adapt and Attract

Aptamil's new professional portal, Aptawelt, required a fresh, responsive design. With new products and resources expected to roll out, content needed to be scalable and structured to support future growth

Working together with the consumer site team we aligned on a fully modular, responsive website, for both ends.

The modular approach provided a consistent, intuitive layout, optimized across devices, that allowed easy updates and customization.

Show new

Modular Design

Modular design refers to a design approach where a product is broken down into smaller, self-contained units or modules.

These modules can be rearranged, reused, and combined in various ways to create flexible, adaptable, and scalable digital experiences.

In platforms like Aptawelt, each section—whether it's the resource library, product information hub, or interactive tools—acts as a standalone module that integrates seamlessly into the overall structure

UX enhancement

Design flexibility

Collaborative DEV

MODULAR BEHAVIOUR

Modular Design

Modular design refers to a design approach where a product is broken down into smaller, self-contained units or modules.

These modules can be rearranged, reused, and combined in various ways to create flexible, adaptable, and scalable digital experiences.

UX enhancement

Design flexibility

Collaborative DEV

MODULAR BEHAVIOUR

Craving new paths to health and nutrition

A streamlined navigation system was essential for this project.

Our main users needed easy accessing to research and product information, which would bring revenue as a result to the client.

The proposed sticky, expandable navigation (up to 3 levels) would enhance the user journey by making complex content more accessible.

Enhanced UX

Enhanced visual experience

Visual engagement: Product images within the navigation or alongside content sections encourage users to click and explore, providing a more engaging and visually appealing experience. This visual integration makes it easier for users to naturally transition from educational resources to product details, supporting a more seamless information journey.

Visual reference: By integrating product images within the navigation or content areas, users have a visual reference to aid recognition. This speeds up the process of locating product information, and allow users to associate certain sections with specific products. This improves information recall, making it easier for users to remember.

Enhanced UX

Enhanced visual experience

Visual engagement: Product images within the navigation or alongside content sections encourage users to click and explore, providing a more engaging and visually appealing experience. This visual integration makes it easier for users to naturally transition from educational resources to product details, supporting a more seamless information journey.

Visual reference: By integrating product images within the navigation or content areas, users have a visual reference to aid recognition. This speeds up the process of locating product information, and allow users to associate certain sections with specific products. This improves information recall, making it easier for users to remember.

Enhanced UX

Enhanced visual experience

Visual engagement: Product images within the navigation or alongside content sections encourage users to click and explore, providing a more engaging and visually appealing experience. This visual integration makes it easier for users to naturally transition from educational resources to product details, supporting a more seamless information journey.

Visual reference: By integrating product images within the navigation or content areas, users have a visual reference to aid recognition. This speeds up the process of locating product information, and allow users to associate certain sections with specific products. This improves information recall, making it easier for users to remember.

Supporting Sales

Sticky Navigation type

Persistent access: By making the navigation sticky, users have a constant reference point as they navigate.
Multi-Level structure: 3 expandable levels organizes content into clear, digestible categories. This minimizes cognitive load, and provides a clear path, making it easier for users to find specific content and improves learnability, enhancing the overall usability.
Herarchical structure: The multi-level navigation provides a visual hierarchy that helps users understand the relationship between sections.
Reduced clicks and page reloads: With a layered sticky navigation, users spend less time clicking through pages or reloading sections. This frictionless experience keeps them engaged and lowers the risk of frustration.

Supporting Sales

Sticky Navigation type

Persistent access: By making the navigation sticky, users have a constant reference point as they navigate.
Multi-Level structure: 3 expandable levels organizes content into clear, digestible categories. This minimizes cognitive load, and provides a clear path, making it easier for users to find specific content and improves learnability, enhancing the overall usability.
Herarchical structure: The multi-level navigation provides a visual hierarchy that helps users understand the relationship between sections.
Reduced clicks and page reloads: With a layered sticky navigation, users spend less time clicking through pages or reloading sections. This frictionless experience keeps them engaged and lowers the risk of frustration.

Supporting Sales

Sticky Navigation type

Persistent access: By making the navigation sticky, users have a constant reference point as they navigate.
Multi-Level structure: 3 expandable levels organizes content into clear, digestible categories. This minimizes cognitive load, and provides a clear path, making it easier for users to find specific content and improves learnability, enhancing the overall usability.
Herarchical structure: The multi-level navigation provides a visual hierarchy that helps users understand the relationship between sections.
Reduced clicks and page reloads: With a layered sticky navigation, users spend less time clicking through pages or reloading sections. This frictionless experience keeps them engaged and lowers the risk of frustration.

IMAGERY

Gentle Designs for Tough Topics

Consistent and scalable.

Learning curves and color coding

The Aptawelt project required a full set of responsive navigation icons, along with “How to Use” icons, scientific illustrations and info graphics for the navigation, their many articles and product descriptions.

Each element needed to align closely with the brand image and colors set by the Aptamil team. To achieve this, I illustrated scientific concepts in soft, neutral pastels and designed rounded icons for health and nutrition topics, ensuring a cohesive, approachable look that matched the brand’s visual identity.

Educational