Project Scope

The Content Studio is a newly formed team at Nestlé Health Science with 3 designers specializing in different media. As a team, we create content and digital products across 1–16 brands, ranging from social media, paid media, and websites. 
When I started designing landing pages and content at Nestlé Health Science, the studio didn't have a design system, and none of the sites followed UI best practices. It was also time-consuming to address UI issues among brand teams, freelancers, and developers while working on multiple projects. Based on the secondary research I conducted, I learned an UI system could help NHSc to:
✔️  Streamline UI best practices across 16 sites + landing pages
✔️  Reduce stress during content handoff between the in-house studio and external agencies
✔️  Free up time to focus on what's important: content!
I began this project by adapting an existing system to meet NHSC's requirements. As of now, the library consists of 50+ blocks and is a living product. New blocks are added or revised on a need-basis.
These blocks were helpful at ideation workshops, as I was able to create layouts on the spot with product managers.

As a result, we had more time to focus on digital strategies, content creation, content audits, and photoshoots instead of UI best practices.
The blocks are built with BOOTSTRAP and 100% of all handoffs are done via GitHub. Once the content is created, I would plug it into the coded layouts and share links with stakeholders to start the content review stage. Once they are approved, these links are shared with third-party agencies who handle implementation.
Comprehensive UAT is performed on sites going through UI overhaul with a group of 5-10 users. Landing page templates are usually recycled, and QA is performed before launches.
➡️  Grid: CSS / BOOTSTRAP
➡️  Software: Figma, HTML, CSS, JS, BOOTSTRAP
➡️  Platform: Drupal
⏲️  Timeline: 6 weeks | 🎩  Role: Research, Design, Pre-Production
Credit: Nestlé Health Science| nestlehelathscience.com
Digging deeper 👇
"How might we help increase productivity and visual consistency between in-house and freelancers across multiple brands?"
Design Process

As a newly established studio, there was no design process in place when this project started. As an organization, most processes follow the traditional waterfall format, which doesn't help us because we aren't creating well-defined deliverables. However, the Agile design process allowed us to have an iterative as well as an incremental approach. Dividing the required functionality into small iterations so that by the end of an iteration, we can start sharing our designs with customers to get their feedback.
Below is an overview of my process and what I did throughout this project.
With an UI BOOTSTRAP library, we can:

✔️  Streamline UI best practices across multiple sites and landing pages
✔️  Reduce stress during content handoff between the in-house studio and external agencies
✔️  Mix and match pre-defined modular blocks to create custom pages with low-code requirements
Finding the right focus with target audiences

Knowing the target audience helped narrow down which segment to focus on:
✔️  New users who are new to Nestlé Health Science products or programs
✔️  Users who want to find out more about a specific product or program
✔️  Users who are already a part of the community
After defining the target audience that might be visiting these pages, I conducted research on landing pages and layouts in similar industries to understand how other retailers structured their pages. 
Information Architecture (IA)

By leveraging the previous research, I am able to start creating an efficient information architecture. The goal is to make the IA as intuitive and simple as possible to increase engagement, so the following four components are must-haves on any landing page:
✔️  Compelling headlines: Five seconds is the average amount of time your customers will spend on your website before clicking off. Compelling headlines will encourage users to scroll on and consider the offers instead of bouncing off immediately.
✔️  Clarity over cuteness: Convince your prospects to covert with persuasive & straight-to-the-point copy.
✔️  Engaging media: copy-heavy content rarely keeps users engaged. Structured pages with a healthy 70/30 text to image ratio combined with videos can help users retain the information they read better.
✔️  Strong call to action buttons: Buttons should look like the buttons people have seen before. tap-friendly touch-points that pop, giving a higher visual hierarchy.
These are the questions the landing pages should help answer:
👉  What can users do on the page?
👉  When and how is it going to be useful for users?
👉  Why should users trust the brand?
👉  Whether they can try it for free, and if not what the price is?
By answering these questions upfront, it will help clear up any doubts potential users might have regarding the product, which creates another layer of credibility and trust in the brand. This also helps create an excitement factor that can lead to conversion.
The following IA was developed, leveraging the learning from my secondary research:
Wireframes

With the layout mapping finished, I started sketching out wireframes with paper and pencil to get a rough idea of how each block would look and test how they fit together as a page.
Due to time constraints, I chose to build them using stock templates as a starting point. I modified them to fit the requirements outlined in the previous step. Previous research and findings were referenced multiple times throughout the ideation phase.
The following is a suggested page layout for BOOST® Be Well™ created the blocks:
The AIDA (stands for Attention, Interest, Desire, and Action) framework was applied to help maximize the page IA by focusing on:
✔️  Attention (cognitive): Obtain the attention of potential users.
✔️  Interest (affective): Appeal to the self-interest of the audience with storytelling.
✔️  Desire (affective): Convince users they need the product and how it will help solve a specific problem they have.
✔️  Action (behavior): Lead users towards a measurable action.

Below is a revised layout for BOOST® Be WellTM utilizing the AIDA framework:
By leveraging these blocks, I was also able to create several landing pages as well as complete brand sites. Below are different iterations of the page above, created during workshops.
Below are examples of landing pages created with the templates above
Compleat Ingredients Page
Compleat Ingredients Page
FDgard Educational Page
FDgard Educational Page
Breakfast Nutrition Page
Breakfast Nutrition Page
Optifast Homepage
Optifast Homepage
IBgard Educational Page
IBgard Educational Page
Nestlé Nutrition Store Homepage
Nestlé Nutrition Store Homepage
✨ Takeaways + Next Steps

This project gave me a brand new vision on how successful landing pages are structured. Although it is just a landing page, the strategy behind the creation is much more complicated than I’ve imagined. From page layout to copywriting to visual hierarchy, it really is a combination of UX and marketing.
The next step is to A/B test different CTAs, copy and graphics of the landing page
🎥  Credits

Senior Digital Manager - Cassie Savage
BOOST Product Manager - Savannah Burkes
BOOST Brand Manager - Katharine Boyle
Designer - Kate Yip
Copywriter - Cassandra Rose
Back to Top