Elevating User Engagement: Transforming Herbalife’s Intranet Experience

Here is how I revamped and deployed the SharePoint Intranet, alongside implementing a system to streamline content creation.

About Herbalife

Herbalife is a global multi-level marketing organization specializing in dietary supplements, weight management, and personal care products.

Our agency was approached by Herbalife India for a pivotal project: to redesign and manage their intranet. This initiative was part of a broader internal communications strategy aimed at facilitating seamless and engaging communication among over 2,000 employees within the organization in India.

The Need for Redesign

The intranet is built on Microsoft SharePoint Online, it serves as a cloud-based collaborative hub within Microsoft 365, offering Herbalife employees centralized access to news, announcements, and departmental quick links.

Unfortunately, user engagement on the intranet was noticeably low, with a preference for alternate communication channels like emails and chats, the intranet was being underutilized.

Key metrics indicating low engagement included:

• Fewer than 120 page views in the last 30 days.
• An alarmingly low number of unique visitors, with only 40–45 employees accessing the intranet monthly.

Herbalife recently underwent a rebranding initiative, altering its primary color palette to a more playful tone. This was another major reason to revamp the intranet.

My Contribution

I designed and deployed Herbalife India’s SharePoint intranet, and also created a system for my fellow visual designers to ease content creation on the platform. The end-to-end project was completed within a 6-week timeline.

As SharePoint was a new platform for me, I had to familiarize myself with it and grasp its limitations, which made designing for it challenging. Tools I used while designing included —
<Add Image showing different tools used>

Project Impact

The redesign resulted in a notable boost in user engagement, with over 33,856 page views, 564 unique visitors, and an average time spent that increased by 46% compared to the previous month.

Furthermore, we conducted a user feedback survey to measure employee satisfaction with the updated intranet, yielding a score of 4.2.

Audit and Benchmarking

As an internal communication platform, understanding the landscape of other intranet designs was a challenge. So, we gathered insights from various sources, including articles showcasing intranet designs and award-winning SharePoint designs.

SharePoint’s limitations required finding suitable references and designing within those constraints.

Given my limited experience with the platform, I conducted an extensive benchmarking exercise. This involved thoroughly searching the internet for every available design sample to ensure that my designs aligned with the platform’s capabilities.

User Research

We surveyed over 743 Herbalife India employees to gather feedback on the current intranet system featuring both objective and subjective questions for deeper insights.

The questions were formulated to align with the insights gained from the benchmarking exercise. We also conducted interviews with 14 employees to supplement the survey findings, considering the pilot project’s scope.

<Add image where different user points are highlighted>

Design Considerations

After the research and audit of the current design, we uncovered insights highlighting crucial areas for improvement:

1. Navigation is complicated, with clutter and disorganization in important links.
2. The layout is disjointed, with related sections inconsistently positioned.
3. The intranet lacks valuable or engaging content, with outdated information present.
4. The current design fails to maximize the utilization of available SharePoint features.

We will delve into the details of these insights later below. Upon discovering these, we aimed to —

Revamp the intranet homepage for easier navigation, increased engagement, and efficient design within SharePoint’s capabilities.

Let’s explore the constraints of designing and deploying with SharePoint.

<This needs to be changed in the context of challenges faced by me while designing for sharepoint>

• SharePoint offers sections like Full Width, One, Two, Three Columns, with a 12-column grid at 1204px width.
• Fixed design elements, or web parts, in SharePoint can be customized with only 2–3 variations each.
• Different web part designs have varying heights and widths based on section type, causing alignment issues.
• I creatively adapted web parts, drawing inspiration from benchmarked designs to meet our needs.
• We refrained from custom designs due to a lack of in-house .NET coding capabilities, and it was also out of scope for the pilot project.
• On the internet, there is a lack of clear documentation on SharePoint’s web part sizes and usage information.

The process and design

Let me walk through each problem area and the solution we devised to change the design.

Herbalife changed its primary color during the re-branding exercise

Problem 1: Disorganized and cluttered quick links with no clear segregation

The quick links section on the intranet serves a crucial function by directing users to specific actions or destinations. However, the existing layout lacks clarity and organization, resulting in cognitive overload for users. With identical icons and truncated text, it’s challenging for users to discern the purpose of each link without visual cues.

Solution

Based on insights gathered from user research and interviews conducted during the initial audit phase, we identified 9 high-priority links, and 3 key employee self-help resources out of a total of 17, and organized them based on contextual relevance.

By leveraging SharePoint’s web part options, we used distinct visual elements and grouping strategies to enhance usability and reduce confusion.

Problem 2: Redundant Top Banner Consuming Valuable Screen Space

The top banner that signifies the page as India’s homepage used the ‘Color-Block Title Section’, which is a restricted section by SharePoint since all pages should have title sections. But this section was redundant, occupying significant digital real estate without offering clear utility.

Solution

To tackle this, we iterated on the top section, experimenting with and without the Title Section, substituting it with other web parts. We drew inspiration from various intranet designs and introduced a personalized banner with essential links using Microsoft apps, optimizing space.

To implement this design, I utilized Microsoft apps within Microsoft 365, which can fetch user data such as name and email ID. With the help of ChatGPT, I crafted code to dynamically display the date and time in the desired format while also greeting users according to the time of day as per the design specifications. This approach not only saved us from developing a custom .NET-coded web part to replace the title section but also enabled us to leverage existing tech to create delight for users.

Despite encountering challenges, my familiarity with web development basics enabled me to overcome them and successfully implement the functionality in PowerApps formula language —

If(
    Hour(Now()) >= 0 && Hour(Now()) < 12,
    "Good Morning, " & Left(User().FullName, Find(" ", User().FullName) - 1) & "!",
    If(
        Hour(Now()) >= 12 && Hour(Now()) < 17,
        "Good Afternoon, " & Left(User().FullName, Find(" ", User().FullName) - 1) & "!",
        "Good Evening, " & Left(User().FullName, Find(" ", User().FullName) - 1) & "!"
    )
)

Problem 3: The layout is disjointed, with related sections inconsistently positioned with no availability of engaging content.

The intranet’s layout lacks cohesion, with related sections inconsistently positioned and a lack of engaging content availability. Announcements reside at the top while news is relegated to the bottom, with no clear segregation between local and global news. Sections share similar visual representations, making it challenging for users to discern and locate relevant content.

Solution

To tackle this, we precisely labeled and categorized sections, enhancing clarity and navigation.

Additionally, we incorporated automatic content updates, ensuring users access the latest information effortlessly. This not only enhances the user experience but also prioritizes the display of recent content, making the intranet a reliable source of up-to-date information.

Managing the intranet

Following the successful design revamp, the project’s subsequent phase involved managing the intranet, which included the creation of compelling content.

This included sharing updates about events, announcements, and news relevant to Herbalife India, aligning with the project’s primary objective of enhancing the internal communication experience and strengthening the employer brand.

Challenges with Content Creation

Our team at Velocita had to create news and announcement posts daily. This task included the creation of 5–6 posts, requiring 6 banners and 18–20 supporting images.

Here we faced some problems —

• Inconsistent designs due to non-standardized sizes and design elements caused distorted aspect ratios on various screens.
• Lack of adaptability in designs led to misalignments with safe areas in different Webpart styles.
• Access limitations to one person resulted in the constant involvement of 3–4 individuals in design-related tasks, consuming significant time.

Solution

After multiple iterations and experimentation across various viewports, I utilized Chrome plugins such as CSS Peeper, DOM Skeleton, Window Resizer, and Html.to.Design.

<Image showing the logos and icons of the different plugins in the chrome>

By testing across different screen sizes, I analyzed SharePoint’s resizing behavior and determined safe areas for various elements and web parts, providing a comprehensive solution to the problem.

Unified Asset Toolkit

I created a system in Figma to facilitate the creation, iteration, and visualization of banners, thumbnails, and other image assets across the intranet.

<image to show the thumbnail and the other features of the system, sort of a banner for the system>

This system incorporates a range of brand colors, gradients, shapes and patterns, size guides, and playgrounds, enabling the creation of banners and supporting images using different combinations.

Additionally, shapes and patterns are updated every month, providing a flexible framework for ongoing design enhancements.

<Image to show different pages of assets and other features>

I streamlined the process for visual designers to craft banners for posts by creating a user-friendly playground. Within this system, designers can:

1. Duplicate the section designated for banner creation, selecting the appropriate size based on the title style and utilizing a variety of assets for shapes, patterns, and colors for designing the banners.
2. Following the design, they can drag and drop the image frame into the safe area frame to visualize the banner across different screen sizes, and then make adjustments as necessary.
   <Gif of the working system of creation of the banners>
3. Once finalized, the images can be upscaled and exported to 2x resolution for crisp quality.
4. Similarly, the process for creating, visualizing, and exporting banners and other image assets follows the same steps outlined for banner creation.

In Conclusion

The project provided a valuable opportunity to embrace ‘Getting-Things-Done’ mindset, tackle scalability issues, and streamline operations for my agency, ultimately simplifying tasks for fellow designers.

Impact

As mentioned earlier, the engagement rate increased significantly, revitalizing a previously stagnant page with minimal traction.

/Image of the improved metrics

We conducted various campaigns, internal events, and webinars to enhance Herbalife’s employer brand with main communication channel was the intranet. For example, we even facilitated communication for an employee cricket tournament which garnered significant engagement.

My Key Learnings

I learned how —

• The disjointed positioning of important data points can increase the cognitive load, drastically decrease adoption and engagement rates.
• Proper segregation of information reduces cognitive load and makes information consumption flow intuitive.
• SharePoint works, including its constraints, and developing within set timelines.
• Basic Microsoft Power Apps are created and integrated into SharePoint online websites.
• Establishing systems for daily work promotes consistency in outputs and reduces time spent on tasks.

That’s all Folks!

Putting together this case study was an absolute blast! If you have any questions on SharePoint or anything, feel free to hit me up on LinkedIn Cheers!