MOOD FOOD

PROMOTIONAL

WEBSITE

Front end of a cross-module project between Advanced Rich Internet Applications and Advanced Client Side Scripting.

Promotional website of the “Mood Food” application:

Website plugin

Iphone App

MOTIVATION

What do consumers considerwhen making food choices?

Taste Price Nutrition / Health (long term effects)

Weight control Ethical concerns Natural Mood / Energy (short term effects)

Convenience

FOOD CHOICES

A chocolate bar a day helps you to work, rest and play

Real food for your busy lifestyle

Thirst stops here / good for you

Happy Meal

FOOD INFORMATION

The project life cycle will be closely related to the mood food product evolution, so far this website is informing of a product that hasn't been developed yet

Once the product is available the whole purpose of the website will change depending on how the food mood is

evolving. Agile development will be taken then for both the app and the promotional website.

PROJECT LIFE CYCLE

JavaScript

jQuery

HTML5

CSS3

Silverlight

Flash

STATE OF ART REVIEW

Wireframes

Sign UpDynamic call to actionProvide an Invitation PrincipleKeep it Lightweight P. - Toggle Reveal T.

Main NavigationHover Reveal ToolContextual ToolKeep it Lightweight Principle

USER INTERFACE DESIGN

FaderStay on the PagePrinciple (Scrolled Paging, Carousel)

Free Phone

Provide an Invitation Principle (Static Call to Action)

View Prices (i-phone app)

Make it Direct Principle (Direct Selection: Toggle)

Keep it Lightweight: Toggle Reveal Tool)

HOME PAGE

Who is is for?Scrolled Paging, Carousel(Stay on the Page)

TabsSecondary Menu, Contextual Tool(Keep it Lightweight)

Detail Inlay / Tabs(Keep it Lightweight)

Expand/Collapse, Transitional Patters (Use Transitions)

Google MapScrolled Paging: Zoomeable User Interface (Stay on the

Page Principle)

ABOUT US

Free PhoneProvide an Invitation

Principle: Static Invitation)

SilverlightShowing tweets with

the words “food” and “mood” that is embedded on the HTML page

ArrowProvide an Invitation

Principle: Static Invitation)

MOOD EXAMPLES

Form

Stay on the Page Principle(Process Flow, Inline Assistant Process)

React Immediately (Look up Patters, Auto-complete)

React Immediately (Feedback Pattern, Progressive Disclosure)

Arrow and Free Phone

Provide an Invitation (Static Invitation)

CONTACT US

JSON

JavaScript Object Notation

Lightweight text based data-interchange format

Easy for humans to read and write

Easy for machines to parse and generate (based on JavaScript)

DATA TRANSFER STRATEGY

Jquery

It is fast, well documented, easy to use

Wide range of event handlers and CSS selectors, it is good at filtering selections, small (only 30 KB) and has nice little built-in effects and plugins.

Actively supports the Firefox (2.0+), InternetExplorer (6+), Safari (3+), Opera (10.6+) and Chrome

(8+) browsers

Silverlight

Has been used only marginally on this project.

TOOLKITS AND FRAMEWORKS

HTML pages

CSS files

Scripts

Silverlight

Images

ARCHITECTURE

Client-side security is mainly about the security of the client (your browser, your machine, your software, etc).

This Rich Internet Application extensively uses jQuery and AJAX, which are a both JavaScript based. Javascript is the biggest security risk at the client side level.

From the JSON point of view eval() invokes the JavaScript compiler. A JSON parser should be used instead as itwill only recognise only JSON text.

SECURITY

Website is

Relevant and useful for all of the potential users, enjoyable, matches their mental models

Interactivity is there for a reason rather than as a showcase of what technology can do.

Forgiving to the users

Accessible, text is resizeable, print, CSS layouts, clear what the website is for, logical layouts, predictable, consistent and uses web conventions.

USER TESTING

The website looks and behaves consistently across the three tested browsers (Internet Explorer 8, Google

Chrome 10 and Mozilla Firefox 3)

Progressive Enhancement

Google Analytics

Debugging (BrowserSeal, Firebug)

SYSTEM TESTING

DEMO