Wireframes - Slim Fast

32
05/08/22 Pg 1 Slim-Fast Re-skinning © Grey Interactive Slim-Fast Site Re-Skinning Guidelines

description

Consumer-facing site redesign: Diet giant Slim-Fast needed to redesign their consumer website. They contracted with online ad agency Grey Interactive to put together the structure of their "new look", oriented towards "ease of use", self service and building a strong customer relationship. http://www.jcvtcs.com/-experience/grey-adv-slimfast.html

Transcript of Wireframes - Slim Fast

Page 1: Wireframes - Slim Fast

04/10/23 Pg 1Slim-Fast Re-skinning © Grey Interactive

Slim-Fast SiteRe-Skinning Guidelines

Page 2: Wireframes - Slim Fast

04/10/23 Pg 2Slim-Fast Re-skinning © Grey Interactive

Registration & Membership

•Unregistered Customer Experience

•Registration Process

•Membership Sections•Meal Plan

•Activity Log

•Nutrition Log

Page 3: Wireframes - Slim Fast

04/10/23 Pg 3Slim-Fast Re-skinning © Grey Interactive

Top Level Flow

Slim-FastHome

Unregistered Customer

Meal PlanMeal Plan

Registered Customer

Join Now!Join Now!Join Now!Join Now!

Join Now!Join Now!

Lifestyle Questionnaire

Lifestyle Questionnaire

Enrollment Survey

Enrollment Survey

Welcome to MembershipWelcome to Membership

GettingStartedGettingStarted

Join Now!Join Now!Activity LogActivity Log

Join Now!Join Now!Nutrition LogNutrition Log

My Slim-Fast Plan

My Slim-Fast Plan

Page 4: Wireframes - Slim Fast

04/10/23 Pg 4Slim-Fast Re-skinning © Grey Interactive

Enrollment Survey

Enrollment SurveyContent Area

Intro & Questionnaire

Slim-Fast Header & Navbar

Members Sign-In!

Remember me

Sign in

Enter your email

Enter your password

Join Now

Survey(illustration)

Bottom Nav elements

Disclaimer

Page 5: Wireframes - Slim Fast

04/10/23 Pg 5Slim-Fast Re-skinning © Grey Interactive

Welcome to Membership

Welcome to the Slim Fast ClubContent Area

Intro & Overview

Slim-Fast Header & Navbar

Tipsblurb

Go to page

Success StoriesFeatured story,

blurbGo to page

Tell a Friendblurb

Go to page

Thank you(illustration)

Bottom Nav elements

Disclaimer

My Slim-Fast Plan

BuddiesDiaryFitness PlanNutrition LogMeal PlanMy ProfileWeight ChartChange userSign out

Page 6: Wireframes - Slim Fast

04/10/23 Pg 6Slim-Fast Re-skinning © Grey Interactive

Lifestyle Questionnaire (pg 1)

Lifestyle Questionnaire

9 field areas (optionbuttons, dropdown listboxes, and checkboxes)

Save and go to Next page

Slim-Fast Header & Navbar

Page 7: Wireframes - Slim Fast

04/10/23 Pg 7Slim-Fast Re-skinning © Grey Interactive

Lifestyle Questionnaire (pg 2)

Lifestyle Questionnaire

3 field areas (optionbuttons and checkboxes)

Save and go to Next page

Slim-Fast Header & Navbar

Page 8: Wireframes - Slim Fast

04/10/23 Pg 8Slim-Fast Re-skinning © Grey Interactive

Lifestyle Questionnaire (pg 3)

Lifestyle Questionnaire

Content

Return to Site

Slim-Fast Header & Navbar

Page 9: Wireframes - Slim Fast

04/10/23 Pg 9Slim-Fast Re-skinning © Grey Interactive

Getting Started

Getting StartedIntro

Slim-Fast Header & Navbar

Disclaimer

Meal PlannerDescriptionGo to page

Food LogDescriptionGo to page

Fitness PlannerDescriptionGo to page

Activity LogDescriptionGo to page

Page 10: Wireframes - Slim Fast

04/10/23 Pg 10Slim-Fast Re-skinning © Grey Interactive

Meal Planner

Weekly MealsIntro

[# of Calories in current plan]Adjust My Calories

Lower Carb

Slim-Fast Header & Navbar

Activity Logblurb

Go to page

Nutrition Logblurb

Go to page

Tell a Friendblurb

Go to page

Meal Plan(illustration)

Disclaimer

My Slim-Fast Plan

Meal PlannerWeekly Meals

Weekly Shopping List

My Favorite Meals

Schedule Slim-Fast Meals

Meal Plan Help

Re-take Questionnaire

Daily Meal (x7 days)Display Printable Version of menu for day

For each of the 6 meals: (Breakfast, Snack #1, Lunch , Snack #2, Dinner , Snack #3)

Link to RecipeLink to Alternative Substitute

Remove

[Closure]Retake Lifestyle Questionnaire reminder

Remove all checked itemsView Last weekView Next weekPrint all meals

Print all dinners onlyPrinter-friendly version

Fitness Planner

BMI Tool

Food Log

Activity Log

Sign out

Page 11: Wireframes - Slim Fast

04/10/23 Pg 11Slim-Fast Re-skinning © Grey Interactive

Food Log (a)

Food Log DetailsIntro, Overview and Directions

Activity Logblurb

Go to page

Nutrition Logblurb

Go to page

Tell a Friendblurb

Go to page

Food Log(illustration)

Slim-Fast Header & Navbar

Entries for [ today’s date ]

Synopsis of Meals (x6)Breakfast, Lunch, Dinner, 3 Snacks

[ Meal #1 ]Link to Recipe Remove Add an item to this Meal

[ Meal #n ]Link to Recipe Remove Add an item to this Meal

Delete all checked items

Continued next page …

Nutritional InformationBreakfastLunchDinnerSnacksLast 7 Days

My Slim-Fast Plan

Meal Planner

Fitness Planner

BMI Tool

Food LogFood Log Details

Water intake log

How to use the nutrition log

Activity Log

Sign out

Page 12: Wireframes - Slim Fast

04/10/23 Pg 12Slim-Fast Re-skinning © Grey Interactive

Nutrition Log (b)

Synopsis of Meals(continued …)

Summary of Today’s Nutritional Information

Categories(17 Categories)

Actual Recommended

Daily Journal

Directions / blurb:

[enter text]

Save to my Log

To enter information for another date…

Calendar Selector

Define New Food

Define New Recipe

Manage my Defined Items

Page 13: Wireframes - Slim Fast

04/10/23 Pg 13Slim-Fast Re-skinning © Grey Interactive

Activity Log (a)

Activity Log[ today’s date ]

Step Your way to success with a Step CounterSlim-Fast recommendations for Stepping Success

Directions for how to use Step Counter and LogSave to my Log Activity Log

blurbGo to page

Nutrition Logblurb

Go to page

Tell a Friendblurb

Go to page

Fitness Plan(illustration)

Slim-Fast Header & Navbar

My Daily Step Counter Step Counter Summary

Goal for today: Steps

Today I walked: Steps

0

0

My Exercise Routine Today Cardio Calorie Burn Summary

Exercise Facts

Time (minutes)

Walking (moderate)

30

Continued next page …

My Slim-Fast Plan

Meal Planner

Fitness Planner

BMI Tool

Food Log

Activity LogStep counter & Activity log

Areas to improved

Stretching tips

Fitness plan help

Change preferencesSign out

Page 14: Wireframes - Slim Fast

04/10/23 Pg 14Slim-Fast Re-skinning © Grey Interactive

Acivity Log (b)

My Exercise Routine Today (continued….)

Exercise Facts

Time (minutes)

Additional comments about today’s workout:

My weight today:

(for calories burned calculation)

Rest

30

[enter text]

194 lbs / 88 kg

Save to my Log

To enter information for another date…

Calendar Selector

Page 15: Wireframes - Slim Fast

04/10/23 Pg 15Slim-Fast Re-skinning © Grey Interactive

Common Site Sections

The “Common” Site Sections

•Products

•Success Stories

•Tips

•Recipes

•FAQ’s

Page 16: Wireframes - Slim Fast

04/10/23 Pg 16Slim-Fast Re-skinning © Grey Interactive

Products section toppage

ProductsIntro, Overview and illustrations

Slim·Fast does NOT contain Ephedrine

Products(illustration)

Slim-Fast Header & Navbar

Product Categories (x7): Low Carb, Shakes, Meal Bars, Hot Meals, Powders, Snacks, Breakfast & Lunch Bars

[ Product Category #1 ]Link to Product categoryBlurb

[Product Category #2 ]Link to Product categoryBlurb

Products

Select from list of product categories

Display the clickable results below.

Recipesblurb

Go to page

Success StoriesFeature story,

blurbGo to page

Tell a Friendblurb

Go to page

[Product Category #n ]Link to Product categoryBlurb

Select Category

Bottom Nav elements

New ProductsPromotional blurb

Go to page

Low-Carb ProductsPromotional blurb

Go to page

Page 17: Wireframes - Slim Fast

04/10/23 Pg 17Slim-Fast Re-skinning © Grey Interactive

Product Category template

[Product Category]Intro, Overview and illustrationsProducts

(illustration)

Slim-Fast Header & Navbar

Product Sub-categories (~2-4)

Meal Bars

BlurbChocolate BrownieChocolate Peanut ButterCinnamon Bun

Snack BarsBlurbBanana NutChocolate PeanutCookies n' Cream

Products

Select category:

Meal Bars

Chocolate Brownie

Chocolate Peanut Butter

Cinnamon Bun

Snack Bars

Banana Nut

Chocolate Peanut

Cookies n' Cream

Shakes

Creamy Chocolate

Vanilla Cream

Recipesblurb

Go to page

Success StoriesFeature story,

blurbGo to page

Tell a Friendblurb

Go to page

ShakesBlurbCreamy ChocolateVanilla Cream

Low Carb

Bottom Nav elements

New ProductsPromotional blurb

Go to page

Page 18: Wireframes - Slim Fast

04/10/23 Pg 18Slim-Fast Re-skinning © Grey Interactive

Product Item template

[Product item Name]Blurb, description

Serving SuggestionsCross-links to other flavors

Directions on getting Nutrient info

Products(illustration)

Slim-Fast Header & Navbar

Nutrition Facts

Serving Size:

Calories (Energy):

Calories from Fat:

Nutrient List

(25-30 items: Fat, Carbohydrates, Sodium, etc.)

Mouseover displays glossary definition of nutrient.

Recipesblurb

Go to page

Success StoriesFeature story,

blurbGo to page

Amount per Serving

* % Daily Value

Return to Top of page

* Definition of “% of Daily Value”

Bottom Nav elements

Products

Select category:

Meal Bars

Chocolate Brownie

Chocolate Peanut Butter

Cinnamon Bun

Snack Bars

Banana Nut

Chocolate Peanut

Cookies n' Cream

Shakes

Creamy Chocolate

Vanilla Cream

Low Carb

Tell a Friendblurb

Go to page

New ProductsPromotional blurb

Go to page

Page 19: Wireframes - Slim Fast

04/10/23 Pg 19Slim-Fast Re-skinning © Grey Interactive

Success Stories section toppage

Featured Success StoriesMarketing BlurbSuccess Stories

(illustration)

Slim-Fast Header & Navbar

Featured Success Stories (by Category)

ProductsPersonal favorites,

blurbGo to page

TipsPersonal favorites,

blurbGo to page

[ Featured Success Story in Category #1]Highlight phrase, Before & After” picturesLink to Category

Bottom Nav elements

Today’s Featured Success Story

Marketing Blurb, Name,“Before & After” pictures, Amount Lost, How Long, Today’s Quote

Link to Testimonial

[ Featured Success Story in Category #n]Highlight phrase, Before & After” picturesLink to Category

Success Stories

Featured Stories

Lost up to 20 lbs

Lost 20-50 lbs

Lost 50-100 lbs

Lost 100+ lbs

Successful Women

Successful Men

Most Recent Success

Send us your story

Results Not Typical (disclaimer popup)Tell a Friendblurb

Go to page

Page 20: Wireframes - Slim Fast

04/10/23 Pg 20Slim-Fast Re-skinning © Grey Interactive

Success Stories (by Category)

Success Story[category] (by Weight, by Gender, by Most Recent)Success Stories

(illustration)

Slim-Fast Header & Navbar

Other Success Stories in this Category(1-n)

ProductsPersonal favorites,

blurbGo to page

TipsPersonal favorites,

blurbGo to page

Tell a Friendblurb

Go to page

[ Success Story #1]Before & After” picturesLink to Details

Bottom Nav elements

Success Stories

Featured Stories

Lost up to 20 lbs

Lost 20-50 lbs

Lost 50-100 lbs

Lost 100+ lbs

Successful Women

Successful Men

Most Recent Success

Send us your story

Principal Success Story: [Name]

“Before & After” pictures, Amount Lost, How Long, Today’s Quote

Link to Details

[ Success Story #n]Before & After” picturesLink to Details

Send us Your Story

Results Not Typical (disclaimer popup)

Page 21: Wireframes - Slim Fast

04/10/23 Pg 21Slim-Fast Re-skinning © Grey Interactive

Success Story Testimonial

Success Story : [Name]

“Before & After” pictures, Amount Lost, How Long, Today’s Quote

Success Stories(illustration)

Slim-Fast Header & Navbar

ProductsPersonal favorites,

blurbGo to page

TipsPersonal favorites,

blurbGo to page

Tell a Friendblurb

Go to page

Bottom Nav elements

Success Stories

Featured Stories

Lost up to 20 lbs

Lost 20-50 lbs

Lost 50-100 lbs

Lost 100+ lbs

Successful Women

Successful Men

Most Recent Success

Send us your story

Dear Slim-Fast

Testimonial letter content …

Signature

Results Not Typical (disclaimer popup)

Disclaimer and Send us your story

Page 22: Wireframes - Slim Fast

04/10/23 Pg 22Slim-Fast Re-skinning © Grey Interactive

Submit My Success Story Form

Success StoryMarketing Blurb

Directions for “how to submit a story” Success Stories

(illustration)

Slim-Fast Header & Navbar

1. Fill out the form (below)

2. Sign the disclaimer form

3. Send “before” and “after” pictures

My Success Story20 + fields of information (most are required)

Mini-Success Stories

Support the processGo to page

Send me more InformationMarketing Blurb (special offers, samples, etc.)

Bottom Nav elements

To Email materials to Slim-Fast

Slim-Fast Postal Mailing address

Disclaimer and View Privacy Policy

Yes, from all providers

Yes, but only from Slim-Fast

Submit My Success Story

Success Stories

Featured Stories

Lost up to 20 lbs

Lost 20-50 lbs

Lost 50-100 lbs

Lost 100+ lbs

Successful Women

Successful Men

Most Recent Success

Send us your story

Mini-Success Stories

Support the processGo to page

Mini-Success Stories

Support the processGo to page

Page 23: Wireframes - Slim Fast

04/10/23 Pg 23Slim-Fast Re-skinning © Grey Interactive

Tips section toppage

Tips IndexMarketing Blurb, Intro & OverviewTips

(illustration)

Slim-Fast Header & Navbar

Recipesblurb

Go to page

FAQ’sblurb

Go to page

Tell a Friendblurb

Go to page

Bottom Nav elements

Tips

Top 10 Tips

Eating Tips

Fitness Tips

Top 10 TipsContentLink to Reference material (optional)

Eating TipsContentLink to Reference material (optional)

Fitness TipsContentLink to Reference material (optional)

Success Storiesblurb

Go to page

Page 24: Wireframes - Slim Fast

04/10/23 Pg 24Slim-Fast Re-skinning © Grey Interactive

Top 10 Tips

Top 10 TipsMarketing Blurb, Intro & OverviewTips

(illustration)

Slim-Fast Header & Navbar

Recipesblurb

Go to page

FAQ’sblurb

Go to page

Tell a Friendblurb

Go to page

Bottom Nav elements

Tips

Top 10 Tips

Eating Tips

Fitness Tips

[ Tip #1]ContentLink to Reference material (optional)

[ Tip #2]ContentLink to Reference material (optional)

[ Tip #3]ContentLink to Reference material (optional)

[ Tip #n]ContentLink to Reference material (optional)

Page 25: Wireframes - Slim Fast

04/10/23 Pg 25Slim-Fast Re-skinning © Grey Interactive

Eating Tips

Eating TipsIntro & OverviewTips

(illustration)

Slim-Fast Header & Navbar

Recipesblurb

Go to page

FAQ’sblurb

Go to page

Tell a Friendblurb

Go to page

Bottom Nav elements

Tips

Top 10 Tips

Eating Tips

SnackingContentLink to Reference material (optional)

Dining Out GuideContentLink to Reference material (optional)

Portion ControlContentLink to Reference material (optional)

[ Tip #n]ContentLink to Reference material (optional)

Fitness Tips

Snacking

Dining Out Guide

Dining Out Quiz

Portion control

Lo-Cal suggestions

Meal Planning

Productsblurb

Go to page

Page 26: Wireframes - Slim Fast

04/10/23 Pg 26Slim-Fast Re-skinning © Grey Interactive

Fitness Tips

Fitness TipsIntro & OverviewTips

(illustration)

Slim-Fast Header & Navbar

Recipesblurb

Go to page

FAQ’s(contextual)

blurbGo to page

Tell a Friendblurb

Go to page

Bottom Nav elements

Tips

Top 10 Tips

Eating Tips

Fitness Tips

Exercise / WalkingContentLink to Reference material (optional)

Exercise / Walking

Basic Calorie Burners

Basic Calorie BurnersContentLink to Reference material (optional)

Success Storiesblurb

Go to page

Page 27: Wireframes - Slim Fast

04/10/23 Pg 27Slim-Fast Re-skinning © Grey Interactive

Recipes section toppage

RecipesIntro & OverviewRecipes

(illustration)

Slim-Fast Header & Navbar

Bottom Nav elements

Recipes

Find Recipes

Lo-Cal Cooking Tips

Submit a Recipe

Featured Recipe (s)

Description, imageLink to Recipe

Description, imageLink to Recipe

Find a RecipeDescription of Search Tool

Personalized Meal Plans

Promotional blurb

Go to page

Dining OutGuideblurb

Go to page

Portion Controlblurb

Go to page

Tell a Friendblurb

Go to page

Snackingblurb

Go to page

Page 28: Wireframes - Slim Fast

04/10/23 Pg 28Slim-Fast Re-skinning © Grey Interactive

Recipe Search

Find RecipesIntro & DirectionsRecipes

(illustration)

Slim-Fast Header & Navbar

Bottom Nav elements

Attribute Search

By Category

By Key ingredients

By Occasion

By Calorie count

By Prep Time

Search Results for: Soups

AppetizersSoupssalads and dressingssandwichesPoultryfish and shellfish

Click to select

Recipe #1

Recipe #2

Recipe #3

Recipe #4

Recipe #5

Click on a Recipe to view it

Personalized Meal Plans

Promotional blurbGo to page

Dining OutGuideblurb

Go to page

Portion Controlblurb

Go to page

Tell a Friendblurb

Go to page

Recipes

Find Recipes

Lo-Cal Cooking Tips

Submit a Recipe

Snackingblurb

Go to page

Text Search [enter text] Find it

Page 29: Wireframes - Slim Fast

04/10/23 Pg 29Slim-Fast Re-skinning © Grey Interactive

Low-Cal Cooking Tips

Low-Cal Cooking TipsIntro & OverviewRecipes

(illustration)

Slim-Fast Header & Navbar

Bottom Nav elements

Recipes

Find Recipes

Lo-Cal Cooking Tips

Submit a Recipe

Personalized Meal Plans

Promotional blurbGo to page

[ Tip #1]ContentLink to Reference material (optional)

[ Tip #2]ContentLink to Reference material (optional)

[ Tip #3]ContentLink to Reference material (optional)

[ Tip #n]ContentLink to Reference material (optional)

Dining OutGuideblurb

Go to page

Portion Controlblurb

Go to page

Tell a Friendblurb

Go to page

Snackingblurb

Go to page

Page 30: Wireframes - Slim Fast

04/10/23 Pg 30Slim-Fast Re-skinning © Grey Interactive

Recipe template

Recipes(illustration)

Slim-Fast Header & Navbar

Bottom Nav elements

Recipes

Find Recipes

Lo-Cal Cooking Tips

Submit a Recipe

Personalized Meal Plans

Promotional blurbGo to page

Recipe Details: [Recipe Name]

Intro & Overview

Preparation Time:Servings:Ingredients:Directions:

Nutritional info: CaloriesProteinCarbohydratesTotal FatFiberSodiumCholesterolCalcium

Appears in Menu

Dining OutGuideblurb

Go to page

Portion Controlblurb

Go to page

Tell a Friendblurb

Go to page

Snackingblurb

Go to page

Page 31: Wireframes - Slim Fast

04/10/23 Pg 31Slim-Fast Re-skinning © Grey Interactive

FAQ Topic Index

Frequently Asked Questions Topic IndexIntro & Overview

Customer Support phone number, email addressFAQ’s

(illustration)

Slim-Fast Header & Navbar

Bottom Nav elements

FAQ’s

Topic Index

Chats

Reference Library

Ask the Dietician

Contact Us

If you have a Question about:

Search

Find it

You can also search for pages on this site that contain specific words.

Enter text to search

•Fitness and Exercise question #1

•Fitness and Exercise question #2

•Fitness and Exercise question #3

•Related Chat

•Helpful Reference Material

Lo-Carb Issues+

Slim-Fast Products (ingredients)+

Problem areas+

Fitness and Exercise-

Pregnancy+

Using this site+

Page 32: Wireframes - Slim Fast

04/10/23 Pg 32Slim-Fast Re-skinning © Grey Interactive

FAQ Item

Frequently Asked Questions Blurb

Go to FAQ Topic IndexFAQ’s

(illustration)

Slim-Fast Header & Navbar

Bottom Nav elements

FAQ’s

Topic Index

Chats

Reference Library

Ask the Dietician

Contact Us

Search

Find it

You can also search for pages on this site that contain specific words.

Enter text to search

•Fitness and Exercise question #1

•Fitness and Exercise question #2

•Fitness and Exercise question #3

Other Fitness and Exercise Topics

Fitness and Exercise question #2

Answer to the question….

Related Link(s)

Haven’t answered your question?Ask the Dietician or Contact Us

Related Chatblurb

Go to page

Related Reference Materials

blurbGo to page