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.
Research

TBD
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:
<INSERT IA GRAPHIC>
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.
<INSERT SKETCHES GRAPHIC>
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.
Visual Design

The goal is to create aesthetically pleasing modules following WCAG standards that can be easily replicated to fit different brands. Once the wireframes were complete, I was able to create whole sites or pages with more clarity.
<INSERT VISUAL DESIGN GRAPHIC>
Navigation

TBD
<INSERT NAV GRAPHIC>
Hero Section

This is the most important section of any landing page. Visitors are driven to landing pages through different types of media (social, dynamic ads, organic search, emails, and printed flyers), so it must catch their attention within the first five seconds while giving a general idea of the page.
Some of the key considerations kept in mind while designing this section are:
✔️  An enticing headline that tells users why they've come here.
✔️  An enticing overview of features and benefits
✔️  Clear mention of how it will help solve an issue
✔️  Direct users to a clear call to action.
<INSERT HERO GRAPHIC>
Value Propositions

To help guide users through the AIDA framework, there should be mention of the value proposition up front, after a scroll from the hero section. 
For this purpose, I created four sections:
1. Experience Section: This describes the overall experience as well as the key benefits of the products and programs. Designers can pair copy with animated images or videos as a way to reduce cognitive load since educational sections are often text-heavy. Not to mention, the human eye reads from left to right, following a Z pattern, so alternating copy and images can help keep users engaged.
<INSERT EXPERIENCE GRAPHIC>
2. Service Section: Highlights the 3 types of services or steps in one row, with all elements center-aligned. Each column has a headline, description, and image. Headlines should have similar lengths across columns, with one or up to two lines. Descriptions should also have similar lengths across columns. Icons inside of circles should match the headline point size.
<INSERT SERVICE GRAPHIC>
3. Features Section: Describes features users will get from consuming or subscribing to the product/program, along with a brief overview. I paired copy with engaging images in this section to help break up the text-heavy content and add unique branding elements to the overall design. The section follows a Z-reading pattern that alternates copy and images to keep users engaged.
<INSERT FEATURES GRAPHIC>
4. Freestyle Section AKA a hierarchical grid that welcomes images of all heights, whose elements are placed "spontaneously" among the grid’s columns. In the BOOST® case, the team wants the latest blog post to be more prominent than others in the grid, so the image is taller, encouraging users to pay more attention to the blog. There is an added gradient overlay on the images to help improve the titles and call-to-action legibility.
<INSERT FREESTYLE GRAPHIC>
Medical Specialists

In this section, users get to know who the medical specialists are for this brand, hence why this section leads as a validation area for the value propositions. By showing people's faces, we are also increasing the users' empathy towards the brand. To build a layer of trust, I included their names and their expertise level.
<INSERT SPECIALISTS GRAPHIC>
Product Listing

After managing to retain their attention, interest, and desire, it is time for users to take action to make a purchase or subscribe. 
For this system, I decided to create product listings in grid and list view for consumer and medical products.
Consumer: Features bigger visuals paired with information that helps convince consumers to buy, such as star ratings, discounts, flavor options, best-sellers, add to cart, and a short description.
Medical: Features bigger visuals paired with product summaries split between 2-3 chunks of text.
Why grid view? Best for products that rely on multiple images and can be compared quickly without paying much attention to the specifications.
<INSERT GRID VIEW GRAPHIC>
Why list view? Best for products that require extensive information and specifications. This will help customers compare specs between similar products.
<INSERT LIST VIEW GRAPHIC>
After multiple iterations, I narrowed it down to a design pattern that gives a better visual hierarchy for the product on the left while also drawing attention to the benefits being offered for both products.
<INSERT GRAPHIC>
Partnerships

Sections with recognizable logos help increase the brand's online credibility when users skim through the website.
<INSERT GRAPHIC>
CTA Jump Link

It is used to bounce users back to a specific section once they reach the bottom of a page or direct them to make a purchase.
<INSERT GRAPHIC>
FAQs

This section accomplishes two goals:
1. To help users answer specific questions. The FAQ section is compiled with the most common questions from users, taken from several sources and prioritized by rankings.
2. To improve organic rankings, optimize the title tag and meta descriptions of each page with topic-specific keywords.
<INSERT GRAPHIC>
Sitemap Footer

Include a sitemap so when users reach the end of the content, there is a highly visible and instantly accessible navigation tool waiting to help them move freely around the website, or jump to another level within the site hierarchy.
<INSERT GRAPHIC>
✨ 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
👇 Want to see more? Keep scrolling to see more landing pages created with the system.
BOOST® Be Well
A new subscription program for outpatients who require nutritional drinks to be delivered to their door.
Campaign contained assets from multiple touch-points ranging from sales, marketing, DOC, digital, and print. 
My role in this campaign consisted of creating and designing an email journey for new patients. The landing page is a self-initiated project to test out the UI system efficiency.
BOOST Glucose Control® 
Multi-platform campaign with digital and print touch-points ranging from social, dynamic ads, organic search, emails to printed coupons. My role in this campaign includes re-defining the IA of the page, emails, DCO and collaborating with product and brand managers to create the content.
Launch of BOOST Genders
The MVP launched with both gender products on the same page, but we quickly realized the campaign messaging wasn't inclusive of the non-binary community. In the second iteration, the products were split into two campaigns, resulting in 2 landing pages: BOOST Women® and BOOST Men®.
BOOST Women®
The campaign includes social, dynamic ads, organic search, emails and printed coupons. My role in this campaign includes re-defining the IA of the page, emails, DCO and collaborating with product and brand managers to create the content.
BOOST Men®
The campaign includes social, dynamic ads, organic search, emails and printed coupons. My role in this campaign includes re-defining the IA of the page, emails, DCO and collaborating with product and brand managers to create the content.
🎥  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