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 consider when 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 Up Dynamic call to action Provide an Invitation Principle Keep it Lightweight P. - Toggle Reveal T. Main Navigation Hover Reveal Tool Contextual Tool Keep it Lightweight Principle USER INTERFACE DESIGN

Fader Stay on the Page Principle (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) Tabs Secondary Menu, Contextual Tool (Keep it Lightweight) Detail Inlay / Tabs (Keep it Lightweight) Expand/Collapse, Transitional Patters (Use Transitions) Google Map Scrolled Paging: Zoomeable User Interface (Stay on the Page Principle) ABOUT US

Free Phone Provide an Invitation Principle: Static Invitation) Silverlight Showing tweets with the words “food” and “mood” that is embedded on the HTML page Arrow Provide 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+), Internet Explorer (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