Project Scope

The Content Studio is a newly formed team at Nestlé Health Science with three designers specializing in different media. As a team, we create content and digital products across 1–16 brands, including 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. While working on multiple projects, it was also time-consuming to address UI issues among brand teams, freelancers, and developers. Based on the secondary research I conducted, I learned a UI system could help NHSc to:
✔️  Streamline UI best practices across 16 sites + landing pages
✔️  Reduce time during content handoff between the in-house studio and external agencies
✔️  Free time to focus on what's essential for brand sites: content!
I began this project by adapting an existing system to meet NHSC's requirements. Currently, the library consists of 50+ blocks and is a living product. New blocks are added or revised on a need basis.
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 that 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 a 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 proper 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 visiting these pages, I researched landing pages and layouts in similar industries to understand how other retailers structured their pages. 
Information Architecture (IA)

I can start creating an efficient information architecture by leveraging previous research. The goal is to make the IA as intuitive and straightforward as possible to increase engagement, so the following four components are must-haves on any landing page:
✔️  Compelling headlines: Five seconds is the average time your customers 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 be 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 those 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 is the price?
Answering these questions upfront will help clear up any potential doubts users might have regarding the product, which creates another layer of credibility and trust in the brand. This also helps generate 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 sketched 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 built 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 the following:
✔️  Attention (cognitive): Obtain the attention of potential users.
✔️  Interest (affective): Appeal to the audience's self-interest 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 Well utilizing the AIDA framework:
I could also create several landing pages and complete brand sites by leveraging these blocks. 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 of how successful landing pages are structured. Although it is just a landing page, the strategy behind the creation is much more complicated than I imagined. It combines UX and marketing from page layout to copywriting to visual hierarchy.
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