Indonesian Hydration Working Group: Making Public Health Education Easier to Access

Client

Aqua

Year

2020 - 2021

Indonesian Hydration Working Group: Making Public Health Education Easier to Access
Aqua

Creating a clearer public entry point for better hydration

The Indonesian Hydration Working Group (IHWG) was founded in Jakarta in 2012 as a public-private partnership between the Faculty of Medicine at the University of Indonesia and PT Tirta Investama, part of Danone-AQUA. Its purpose is to address hydration challenges in Indonesia through education, research, and public awareness.

The website was an important part of that mission. It needed to explain who IHWG was, why proper hydration mattered, and how the public could access credible information. It also needed to help companies and government organizations understand how they could collaborate with IHWG.

Suitmedia redesigned the website as a clearer, more accessible communication platform. The new experience combined public education, collaboration information, interactive elements, and an easy-to-manage content system so IHWG could continue developing its digital presence over time.


A public health mission needed a clearer digital front door

1. The first page had to answer the most important question

For many visitors, the website would be their first encounter with IHWG. That first interaction needed to explain the organization quickly and make the importance of healthy hydration immediately understandable.

If visitors had to search through several pages to understand IHWG’s purpose, the website would be creating unnecessary distance between the organization and its audience. Public education depends on clarity. People are more likely to explore a topic when they understand why it matters and where the information comes from.

The homepage therefore had to do more than introduce the organization. It needed to establish hydration as a relevant public health issue and make IHWG’s role clear from the beginning.

2. One website needed to serve two very different audiences

IHWG’s website had two main user groups. The first was the general public, looking for accessible information about hydration, nutrition, and health. The second included companies and government institutions interested in working with IHWG.

These audiences had different reasons for visiting. A member of the public might want to understand daily hydration needs. A potential collaborator might want to learn about IHWG’s work, expertise, partnership model, or contact details.

Without a clear structure, one audience could easily be overwhelmed by information intended for the other. The website needed to support both groups without making either journey feel secondary.

3. The existing platform was not fully supporting two-way communication

IHWG wanted the website to become more than a channel for publishing educational material. It also wanted to build stronger communication with the public and create a clearer path for collaboration.

This meant the website had to support two-way interaction. Visitors needed to be able to find information, understand IHWG’s work, and know how to take the next step—whether that meant learning more, contacting the organization, or exploring a partnership.

A site that only broadcasts information can educate, but it does not necessarily create a relationship. IHWG needed a platform that could support both knowledge sharing and response.

4. Important content needed to be easier to find

Health education websites often contain substantial information. Research, articles, news, organizational background, and collaboration details can all be valuable, but their value declines when users cannot find them easily.

IHWG needed a clearer information structure that reduced the amount of searching required. Users should be able to understand the main categories at a glance and move naturally toward the information most relevant to them.

The challenge was to simplify access without oversimplifying the subject. Hydration is easy to describe at a high level, but meaningful education may require supporting detail and credible resources.

5. The website needed to remain useful after launch

A website that communicates health information must continue to evolve. New research, campaigns, articles, and partnership activities may need to be added as IHWG’s work develops.

This created an operational requirement alongside the design challenge. IHWG needed a content management system that its internal team could use for future updates without relying on developers for every change.

The website therefore had to be both a finished experience and a manageable working system.


Designing one clear path for education and collaboration

1. Organize the experience around the two main user needs

Suitmedia began by separating the needs of the public from those of potential collaborators.

For the public, the most important requirement was immediate access to information about healthy hydration. For companies and government institutions, the priority was a clear route to learn about IHWG and make contact.

This distinction shaped the structure of the site. The public education message was given prominence on the homepage, while collaboration-related information was organized within the main navigation.

The aim was not to create two separate websites. It was to make the same platform understandable to two audiences with different goals.

2. Use the homepage to establish public awareness

The homepage was designed to introduce the importance of healthy hydration early in the user journey.

This decision was based on a simple principle: visitors should not need to understand IHWG before they can understand why the subject matters. By presenting hydration awareness immediately, the site could connect the organization’s identity with a clear public benefit.

The homepage therefore served as both an introduction and an educational starting point. It helped users understand the issue before asking them to explore deeper content.

3. Simplify navigation into six main menus

The redesign organized the website’s submenus into six main header menus.

This reduced the number of choices users had to interpret and created a clearer overview of the site. A well-structured header can act as a map, helping visitors predict where information is likely to be located.

The simplified structure also supported both audience groups. Public users could find educational material more easily, while collaborators could access organizational and contact information without navigating through unrelated content.

4. Make navigation visible and approachable

The website used simple, visible, and engaging navigation elements. The intent was to make menus and buttons easy to recognize across the site.

This mattered because users may enter through different pages, especially when arriving from search engines or shared links. Every page needed to help visitors understand where they were and what they could do next.

An approachable navigation system also reduced the sense that the site was designed only for experts. Public health communication is more effective when the interface feels open to people with different levels of prior knowledge.

5. Create a clear path for potential collaborators

For companies and government organizations interested in collaboration, the website provided a direct route toward contact.

The user journey could end with a telephone icon in the header or at the bottom of every page. This gave potential collaborators a visible next step without requiring them to search for contact information.

The decision addressed a common failure in institutional websites: providing extensive background information but making it difficult to initiate a conversation. For IHWG, collaboration was an important part of the mission, so the contact path needed to be immediate and dependable.

6. Use minimalist design to focus attention

Suitmedia adopted a clean and minimalist visual approach. This helped the website direct attention toward important content rather than competing with it.

Minimalism was especially appropriate for a site with an educational purpose. The design needed to support understanding, not overwhelm users with unnecessary visual elements.

The choice also helped serve both audiences. Public users could focus on health information, while potential collaborators could evaluate IHWG’s work and purpose without navigating a visually dense environment.

7. Add micro-interactions to make the experience feel responsive

Although the interface was minimalist, it was not static. Suitmedia introduced micro-interactions to create a more satisfying experience as users moved through the website.

Small responses to user actions can provide reassurance. They show that the interface is working and help users understand where they are interacting with the page.

These details also added warmth to the experience. A public health website can be credible without feeling cold or institutional, and subtle movement helped make IHWG more approachable.

8. Use animated interfaces to hold attention

Animated interface elements were added across much of the website to make the design feel more personal and engaging.

The purpose was not to add movement indiscriminately. Animation was used to support the experience, guide attention, and create visual continuity between pages.

This was important for public education. Users are more likely to continue exploring when the website feels active and understandable rather than like a collection of static documents.

9. Make information easier to absorb

The combination of clear structure, minimalist design, and animation helped users approach information in manageable steps.

Rather than presenting every detail at once, the website could guide visitors from a broad understanding of hydration toward deeper resources and organizational content.

This reduced cognitive effort while preserving the substance of IHWG’s work. The design made it easier for users to decide what to read next.

10. Build a content management system for internal use

Suitmedia provided IHWG with an easy-to-use content management system for future updates.

This allowed the organization to add or revise content more independently. New educational material, news, campaigns, and collaboration information could be managed within the platform rather than requiring technical intervention each time.

The CMS also improved operational speed. IHWG could respond to new communication needs more quickly and keep the website aligned with its ongoing work.

11. Establish a communication guideline for future updates

The project also included a communication guideline to support consistent content updates.

This helped internal teams understand how to maintain the website’s tone, structure, and presentation over time. Without such guidance, a well-designed platform can gradually become inconsistent as different people add content in different ways.

The guideline protected the integrity of the new experience. It ensured that future updates would continue to support clarity, credibility, and the organization’s communication goals.

12. Make the platform support collaboration as well as education

The website’s design and content structure brought IHWG’s two purposes together. It educated the public about hydration while making the organization easier for potential partners to approach.

This created a stronger connection between awareness and action. A visitor could learn about the importance of hydration, understand IHWG’s role, and then see how to engage with the organization further.

The website became a more complete expression of IHWG’s mission rather than a collection of isolated information pages.


A clearer platform increased attention and created room for collaboration

1. IHWG gained a stronger public communication channel

The redesigned website successfully became a platform for educating the public about proper hydration.

It gave IHWG a clearer way to communicate its purpose and present health information online. Visitors could understand the subject more quickly and explore supporting content through a more accessible structure.

The platform helped make IHWG’s work more visible beyond the organization’s existing network.

2. Establishing early organic traction among high-intent audiences

Following the platform revamp, Suitmedia established an immediate organic footprint for IHWG, capturing over 5,000 verified users during the initial rollout without relying on paid media spend.

Specialized health and institutional portals typically struggle to break the 1,000-user organic baseline due to complex medical taxonomies and discovery hurdles. Suitmedia overcame this barrier by re-engineering the information architecture, transforming dense clinical research into accessible, high-ranking public resources.

This strategic overhaul validated strong public demand for accredited hydration science. By converting a passive institutional repository into an active knowledge hub, the platform achieved compounding stakeholder reach while maintaining strict marketing capital efficiency.

3. Driving audience retention above industry engagement benchmarks

The redesigned platform achieved a 54.29% engagement rate, beating the 48%–51% industry median for healthcare and institutional education portals. This confirmed that over half of all incoming visitors converted into active, multi-action sessions rather than exiting after the first page.

Suitmedia accomplished this by eliminating friction through intuitive navigation taxonomy, contextual cross-linking, and responsive interactive modules. By transforming passive visits into extended exploratory journeys, the platform established a durable digital channel for recurring public health education.

4. The experience made complex information more approachable

Hydration and health education can involve technical concepts, but the website’s structure helped present the subject in a more accessible way.

By placing general awareness content on the homepage and organizing deeper information through clear menus, the platform created a gradual path for learning.

This improved the likelihood that users with different levels of knowledge could find something relevant. A visitor seeking a basic explanation and a collaborator looking for deeper organizational information could both use the same website successfully.

5. Potential collaborators received a clearer next step

The visible telephone contact path helped companies and government institutions move from interest to action.

This was a practical improvement with strategic value. The website could now support not only public awareness but also the development of collaborative relationships.

The second-order effect was greater organizational opportunity. A clear contact journey reduces the chance that potential partners leave without knowing how to begin a conversation.

6. IHWG gained greater control over its future content

The content management system and communication guideline created a more sustainable operating model.

IHWG could keep its website current, add relevant content, and manage updates with greater independence. This reduced reliance on external technical support for routine communication needs.

The platform therefore strengthened not only the public experience, but also IHWG’s internal ability to maintain that experience.

7. The website created a foundation for continued trust

A public health platform must be clear, consistent, and dependable. Every interaction contributes to whether users see the organization as credible and worth returning to.

The new website helped establish that foundation through a focused structure, accessible design, and an easier content update process.

Over time, a consistent digital presence can support stronger trust among the public and potential collaborators. The platform gave IHWG the means to build that trust through repeated, useful communication.


The deeper lesson: public education succeeds when clarity leads to participation

1. The first interaction should establish both purpose and value

Visitors need to understand what an organization does and why its work matters. IHWG’s homepage connected the organization with the public importance of healthy hydration.

This reduced the distance between institutional identity and audience need. Users could understand the subject before deciding whether to explore further.

2. Different audiences require different paths through the same platform

A public user and a potential collaborator may need entirely different information. A single website can serve both when its structure makes each path visible.

The lesson is not to create more content for its own sake. It is to organize content around the decisions each audience needs to make.

3. Minimalism can increase trust and comprehension

A clean interface helps users focus on important information and reduces the sense of effort required to understand a topic.

For educational and public-interest websites, simplicity can communicate confidence. It suggests that the organization has considered what users need and is willing to present it clearly.

4. Interaction should support meaning, not distract from it

Micro-interactions and animation can make a platform more engaging, but they should reinforce the content and guide the user.

IHWG’s design used movement within a focused visual system. This made the website more approachable without allowing effects to compete with the educational purpose.

5. A website is only as strong as its ability to evolve

Public communication needs change as new information, campaigns, and partnerships emerge. A manageable CMS and communication guideline help an organization preserve quality while moving quickly.

This turns website development into capability building. IHWG gained not only a redesigned platform, but also a stronger way to maintain and improve its communication over time.


Strategic Insights for the C-Suite

  1. Design the first digital interaction around the audience’s most important question. Visitors should quickly understand both what the organization does and why it matters to them. Clarity at the entry point increases the chance of deeper engagement.
  2. Serve different audiences through clear paths, not unnecessary complexity. One platform can support the public and institutional partners when its structure reflects their distinct needs. Organize around user intent rather than internal departments.
  3. Use simplicity to strengthen trust. Clean design, clear navigation, and focused content make important information easier to understand. In education and public health, comprehension is a core measure of credibility.
  4. Make collaboration easy to initiate. A website should not only explain an organization’s work; it should show interested partners exactly how to take the next step. Removing contact friction can create opportunities that information alone cannot.
  5. Treat content management as part of digital strategy. A platform must remain current after launch. Give internal teams the tools and guidelines needed to update content consistently, quickly, and without weakening the experience.

How We Transform Ideas into Reality