User Experience. Cereal - Initial Ux Redesign Concepts Wireframes

Size: px

Start display at page:

Download "User Experience. Cereal - Initial Ux Redesign Concepts Wireframes"

Millicent Pierce
5 years ago
Views:

1 User Experience Cereal - Initial Ux Redesign Concepts Wireframes Document: Breakfast Cereal - Plan - Wireframes_Desktop-Mobile-Facebook.vsd Last Updated: 31 July, 2014 This document is formatted for Tabloid (11x17) But can be printed in Letter format (8.5x11)

2 Cereal - Wireframes Last update: 31 July, 2014 page 2 of 20 Cereal Web Concepts o New Homepage o Revised Taxonomy o Clean out the clutter (dead links, abandoned campaigns) o Incorporate Partner Content o Tighter DYP Integration o Product Reviews from Amazon o Challenge Landing Page

3 Cereal - Wireframes Last update: 31 July, 2014 page 3 of 20 Cereal Homepage - not logged in Cereal.com Sign in Register Our Challenge Products Tools & Resources Title Area Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. What s happening on the Challenge ,000 people are currently on the challenge! 47,000 people finished the challenge today 200k 100k 0 bars cereal shakes drinks Facebook promo Title Tell us what you gain when you lose Promo 5 Promo 1 Promo 2 Facebook Promo copy Facebook Promo copy Facebook Promo copy Facebook Promo copy Mobile promo Like Button News & Promos signup Facebook promo Privacy Contact Us/FAQ Where to Buy Coupons Legal Site Map My Account Promotions

4 Cereal - Wireframes Last update: 31 July, 2014 page 4 of 20 Cereal Homepage - logged in Jane O. Doe s Awesome Wedding Diet Monday, 5/29/2011 to Sunday, 5/22/2011 Cereal.com Logout You will start in 3 days Our Challenge Products Tools & Resources o Need access to overall plan view o Need to see updates and alerts. How about setting up updates and alerts? Is this done in the proper Plan microsite? o Personalized tips and messages. Inbox for messages? Challenge Dashboard o Manage Daily Plan o See Updates/Alerts o Personalized Tips/Messages Community highlights Facebook promo Title Tell us what you gain when you lose Promo 5 Promo 1 Promo 2 Facebook Promo copy Like Button Mobile promo News & Promos signup promo Facebook promo Privacy Contact Us/FAQ Where to Buy Coupons Legal Site Map My Account Promotions

5 Cereal - Wireframes Last update: 31 July, 2014 page 5 of 20 Homepage - dropdowns Tools & Resources Our Challenge Tips & Articles Mobile Apps Breakfast Lunch Dinner Snack Alternative Meals (Vegan, GF) Ready to Eat Meals <TBD> Products Meal Products Snack Products By Craving Cereals o Blueberry o Chocolatey Delight o Cinnamon Pecan F o Fruit and Yogurt o Granola o Multi-Grain Oats & Original o Protein Plus F o Red Berries o Vanilla Almond F F Protein Shakes o Chocolate o Strawberry o French Vanilla Protein Meal Bars Chocolate Caramel Chocolate Peanut Butter Chocolatey Chip Double Chocolate Honey Almond Strawberry N N Protein Snack Bars Chocolate Delight Chocolate Peanut Cereal Bars o Blueberry o Chocolatey Chip N Cookie o Chocolatey Drizzle o Chocolatey Peanut Butter o Chocolatey Chip o Double Chocolate o Honey Almond o Strawberry Fruit Crisps o Blueberry o Strawberry Crackers & Chips o Savory Herb Crackers o Multi-Grain Crackers o Sea Salt Cracker Chips o Sour Cream & Onion N Cracker Chips Protein Water Mixes Iced Tea Pink Lemonade Strawberry Kiwi N o Chocolaty o Fruity o Nutty o Salty N New product F High Fiber Product

6 Cereal - Wireframes Last update: 31 July, 2014 page 6 of 20 Cereal - Product Category Detail Jane O. Doe s Awesome Wedding Diet Monday, 5/29/2011 to Sunday, 5/22/2011 Cereal.com Logout You will start in 3 days Our Challenge Products Tools & Resources Rollover State Cereals Title Area Cereal 7 Cereal 8 Cereal 9 Cereal 1 Product view Cereal 2 Product view Cereal 3 Product view Cereal 4 Product view Snack Package view F Cereal 10 Cereal 6 Product view Cereal 7 Product view Cereal 8 Product view Cereal 9 Product view On your Plan News & Promos signup promo Twitter/YouTube/Facebook promo Contact Us/FAQ Where to Buy Coupons Site Map My Account Promotions Cereal 10 Product view Cereal 5 Product view News & Promos signup promo Twitter/YouTube/Facebook promo Privacy Contact Us/FAQ Where to Buy Coupons Legal Site Map My Account Promotions

Cereal - Wireframes Last update: 31 July, 2014 page 7 of 20 Cereal - Product Detail Jane O. Doe s Awesome Wedding Diet Monday, 5/29/2011 to Sunday, 5/22/2011 Cereal.

com Add to My Plan Choose your days and meal Select the day(s) first, then select the meal to which you d like to add this product.

7 Cereal - Wireframes Last update: 31 July, 2014 page 7 of 20 Cereal - Product Detail Jane O. Doe s Awesome Wedding Diet Monday, 5/29/2011 to Sunday, 5/22/2011 Cereal.com Logout You will start in 3 days Our Challenge Products Tools & Resources Protein Plus Cereal Title Area Where to buy Zip Code Add to Cart on Amazon.com Add to My Plan Choose your days and meal Select the day(s) first, then select the meal to which you d like to add this product. May 11 May 2011 Mo Tu We Th Fr Sa Su Clip Coupon Nutrition Product Packaging Add to My Plan You may also like these products... Select meal Cancel Select Yummy Ideas Interesting Articles Yummy Yummy Item1 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 1 Article1 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Yummy Yummy Item2 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 2 Article2 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Yummy Yummy Item3 1 Article3

8 Cereal - Wireframes Last update: 31 July, 2014 page 8 of 20 Cereal - Recipe landing page Jane O. Doe s Awesome Wedding Diet Monday, 5/29/2011 to Sunday, 5/22/2011 Cereal.com Logout You will start in 3 days Our Challenge Products Tools & Resources Healthy Search all Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi Enter search here Breakfast Lunch Dinner Snack Alternative Meals Ready to Eat Meals News & Promos signup promo Twitter/YouTube/Facebook promo Privacy Contact Us/FAQ Where to Buy Coupons Legal Site Map My Account Promotions

9 Cereal - Wireframes Last update: 31 July, 2014 page 9 of 20 Cereal - Recipe List View Jane O. Doe s Awesome Wedding Diet Monday, 5/29/2011 to Sunday, 5/22/2011 Cereal.com Logout You will start in 3 days Our Challenge Products Tools & Resources Healthy Breakfast > All Breakfast Lunch Dinner Snack Alternative Meals Ready to Eat Meals Search all recipes All Eggs Chicken Beef Pork Pancakes, etc Bread & Sweets All Breakfast Recipe 1 Recipe 1 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Recipe 1 Recipe 2 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Recipe 1 Recipe 1 Recipe 3 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Recipe 4 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Recipe 1 Recipe 5 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Recipe 1 Recipe 6 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Recipe 1 Recipe 7 Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna

10 Cereal - Wireframes Last update: 31 July, 2014 page 10 of 20 Cereal - Recipe Detail Jane O. Doe s Awesome Wedding Diet Monday, 5/29/2011 to Sunday, 5/22/2011 Cereal.com Logout You will start in 3 days Our Challenge Products Tools & Resources Healthy Breakfast > All >> Recipe 1 Breakfast Lunch Dinner Snack Alternative Meals Ready to Eat Meals Search all recipes All Eggs Chicken Beef Pork Pancakes, etc Bread & Sweets Recipe 1 X of n Picture of prepared recipe Rating 1 ingredient 2 ingredient 3 ingredient 4 ingredieng 5 ingredient Add to My Plan Content area Print Lorem ipsum onsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud Nutritional Information Next: Next Recipe Title You may also like these recipes Similar recipe Similar recipe Similar recipe Similar recipe Similar recipe Similar recipe News & Promos signup promo Twitter/YouTube/Facebook promo Privacy Contact Us/FAQ Where to Buy Coupons Legal Site Map My Account Promotions

11 Cereal - Wireframes Last update: 31 July, 2014 page 11 of 20 Cereal - Community Jane O. Doe s Awesome Wedding Diet Monday, 5/29/2011 to Sunday, 5/22/2011 Cereal.com Logout You will start in 3 days Our Challenge Products Tools & Resources News & Promos signup promo Twitter/YouTube/Facebook promo Privacy Contact Us/FAQ Where to Buy Coupons Legal Site Map My Account Promotions

12 Cereal - Wireframes Last update: 31 July, 2014 page 12 of 20 Cereal - Tools & Resources Jane O. Doe s Awesome Wedding Diet Monday, 5/29/2011 to Sunday, 5/22/2011 Cereal.com Logout You will start in 3 days Our Challenge Products Tools & Resources Tools & Resources Tips & Articles Mobile Apps Mobile App 1 Mobile App 1 Mobile App 1 Mobile App 1 Mobile App 1 App 5 App 6 App 2 App3 Pedometer App The Pedometer app consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse Download Now News & Promos signup promo Twitter/YouTube/Facebook promo Privacy Contact Us/FAQ Where to Buy Coupons Legal Site Map My Account Promotions

Cereal - Wireframes Last update: 31 July, 2014 page 13 of 20 Cereal - iphone Land, browse, view detail, add Landing Page Browse View Recipe Add Breakfast Recipe Lunch Recipe Dinner Recipe Snack Ready

13 Cereal - Wireframes Last update: 31 July, 2014 page 13 of 20 Cereal - iphone Land, browse, view detail, add Landing Page Browse View Recipe Add Breakfast Recipe Lunch Recipe Dinner Recipe Snack Ready to Eat Meals Alternative Meals Home Search Favorites Shopping List A B Breakfast Lunch Dinner Dinner Search Dinner A Recipe 1 A Recipe 2 Snack A Recipe 1 Lorem ipsum onsectetuer adipiscing elit, sed diam nonu A Recipe 2 Lorem ipsum onsectetuer adipiscing elit, sed diam nonu B Recipe 1 Ready To eat B Recipe Lorem ipsum onsectetuer Lorem ipsum onsectetuer adipiscing adipiscing elit, sed elit, diam sed nonu diam nonu Home Search Favorites Shopping List A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Back of A Recipe 1 Ingredients X of n A Recipe 1 Lorem ipsum onsectetuer adipiscing elit, sed diam nonu mmy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 10 ingredient ingredient ingredient ingredient 1/2 ingredient ingredient 4 ingredient ingredient ingredient 9 ingredient ingredient ingre 2 ingredient ingredient ingr 2 ingredient ingr 10 ingredient ingredient ing nonummy nibh euismod tincidunt ut laoreet dolore Home Search Favorites Shopping List A Recipe 1 Mo A 1 Add to My Challenge Add to Plan Add to Favorite Add to Plan nonummy nibh euismod Add to Shopping List May 11 Tu We Th Fr Sa Su Select Meal: Twitter Facebook More Cancel

14 Cereal - Wireframes Last update: 31 July, 2014 page 14 of 20 Cereal - Add to Plan, Search Add to Plan Search Back Add to Plan nonummy nibh euismod Mo May 11 May 2011 Tu We Th Fr Sa Su Search Search all Category Filters: Dinner Search Ready to Eat Meals Select Meal: Breakfast Snack Lunch Alternativ e Meals Breakfast Home Search Favorites Shopping List Home Search Favorites Shopping List

15 Cereal - Wireframes Last update: 31 July, 2014 page 15 of 20 My Plan - Mobile - Setup on iphone Landing Screen Setup Step 1 Setup Step 2 MEAL PLAN tab My Challenge My Challenge My Challenge My Challenge Welcome! Lorem ipsum onsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud When do you want to start? Tomorrow 05/20/2011 Next Week 05/23/2011 Select Date Popular Plans CLASSIC Featured Plans Design Your Own nonummy nibh euismod tincidunt ut MIX IT UP Meal Plan Day Breakfast Week May 20, 2011 Lorem Ipsum breakfast Login Register Continue as Guest I don t need a plan When do you want to end your challenge? 2 Weeks 00/00/0000 Decide Later nonummy nibh euismod tincidunt ut ON THE GO nonummy nibh euismod tincidunt ut CHOCOLATE LOVER nonummy nibh euismod tincidunt ut AM Snack Lunch PM Snack PM Snack Lorem Ipsum AM snack Lorem Ipsum lunch Lorem Ipsum PM snack Lorem Ipsum dinner GO! Go! Next Previous Save Meal Plan Shopping List Network Mood

16 Cereal - Wireframes Last update: 31 July, 2014 page 16 of 20 My Plan - Mobile - iphone MANAGE popup SHOPPING LIST tab NETWORK tab MOOD tab My Challenge My Challenge Meal Plan Shopping List Day Week Day Week May 20, 2011 May 20, 2011 Network My Challenge Search messages Find people like you in your area ZIP Code It s day 4... My Challenge How do you feel? nonu nonu A Recipe 1 Breakfast AM Snack Lunch Lorem Ipsum breakfast Lorem Ipsum lunch Add to Plan PM Snack Lorem ipsum onsectetuer Lorem Ipsum adipiscing PM snack elit, sed diam nonummy nibh euismod PM Snack Select Meal: Lorem Ipsum AM snack Swap Breakfast, May 20 Add to Plan Remove I ate it! Lorem Ipsum dinner Cancel Meal Plan Shopping List Network Mood Saved recipe Saved recipe Saved recipe Saved recipe Saved item Lorem ipsum onsectetuer adipiscing elit, sed diam nonu Saved item Lorem ipsum onsectetuer adipiscing elit, sed diam nonu Saved item Lorem ipsum onsectetuer adipiscing elit, sed diam nonu Saved item Lorem ipsum onsectetuer adipiscing elit, sed diam nonu Meal Plan Shopping List Network Mood Michelle T. Celia P Jen H Carol P Michelle T. 32 minutes age nonu Lorem ipsum onsectetuer adipiscing elit, sed diam nonu Celia P. 32 minutes ago nonu Lorem ipsum onsectetuer adipiscing elit, sed diam nonu Jen H. 34 minutes ago nonu Lorem ipsum onsectetuer adipiscing elit, sed diam nonu Carol P. 40 minutes ago nonu Lorem ipsum onsectetuer adipiscing elit, sed diam nonu Meal Plan Shopping List Network Mood Mood 1 icon Mood 2 icon Mood 3 icon Mood 4 icon Mood 5 icon Mood 6 icon Meal Plan Shopping List Network Mood

17 Cereal - Wireframes Last update: 31 July, 2014 page 17 of 20 Facebook DYP You and the Challenge The Challenge Cereal My Special Challenge K Challenge 2 Meals Challenge daily menu is easy to follow 2 Snacks 1 Sensible Meal Fill up on Fruits & Veggies Ready to start? us! Already have a plan? Log in Now To start your plan, select

18 Cereal - Wireframes Last update: 31 July, 2014 page 18 of 20 Facebook - Setup My Special Challenge K Challenge 1 1When do do you want to to start? start? TOMORROW 00/00/0000 NEXT WEEK 00/00/0000 SELECT DATE 2How How long do you want your Challenge to be? to be? Special Cereal K My Special Challenge K Challenge You can determine how long you want your Challenge to be whenever you want. 2 WEEKS DECIDE LATER 00/00/0000 Which friends do you want to invite to do the 3 Challenge with you? Which Facebook friends do you want to invite to do the Challenge with you? 4 Which meal plan would you you like? like? Popular Plans Featured Plans Design Your Own CLASSIC MIX IT UP ON THE GO CHOCOLATE LOVER To start your plan, select Don t want to choose? Let your Challenge friends vote on the plan! Send Ballot Now! START MY CHALLENGE!

19 Cereal - Wireframes Last update: 31 July, 2014 page 19 of 20 Facebook - My Plan My Challenge Special K Challenge Get in shape for the reunion! Lose 12 lbs. in 12 weeks You will start in 3 days. Have a question about the challenge? What s on your mind? Send Special Cereal K My My Special Challenge K Challenge Meal Plan Progress Great! You and your friends have taken an important step towards achieving your weight-management goal! My Plan Manage your meal plan. Customize with your favorite Special K products and recipes! DAY WEEK Change a Meal Plan Print Share Shopping List MON 5/9 TUE 5/10 WED 5/11 THU 5/12 FRI 5/13 SAT 5/14 SUN 5/15 Breakfast AM Snack Lunch PM Snack Dinner Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Sensible meal of your choice To start your plan, select

Have a question about the challenge? What s on your mind?

20 Cereal - Wireframes Last update: 31 July, 2014 page 20 of 20 Facebook - My Friends My Challenge Get in shape for the reunion! Lose 12 lbs. in 12 weeks You will start in 3 days. Have a question about the challenge? What s on your mind? Send Special Cereal K My Special Challenge K Challenge Meal Plan My Facebook Challenge Friends Progress What s on your mind? My mood show more 6 To start your plan, select

Brand & Style Guide.

Brand & Style Guide. Contents 2 Introduction 6 Visual Identity 17 Applications Introduction A brand is more than just a logo. It's how we are perceived as an organisation, how we interact with our students,