student : MEDHA MALHOTRA

programme : Graduate Diploma programme

DipLOMA pROjEcT

THE cHAnGinG RETAiL MEDiuMsponsor : B & V desIgns , new delhi

guIde : RupESH VYAS

cOMMunicATiOn DESiGn (GRApHic DESiGn)

national institute of DesignAhmedabad

2010

the

eval

uat

ion

Ju

ry r

eco

mm

end

s m

edH

a m

aLH

otr

a f

or

the

D

iplo

ma

of

the

Na

tio

na

l In

stit

ute

of

De

sig

n

In C

om

mu

nIC

atI

on

des

Ign

(gr

apH

IC d

esIg

n)

her

ewit

h, f

or

the

pro

ject

tit

led

"tH

e C

Ha

ng

Ing

ret

aIL

med

Ium

"

on

fu

lfilli

ng

th

e fu

rth

er r

equ

irem

ents

by

*

Ch

airm

an

mem

ber

s :

*su

bse

qu

ent

rem

arks

reg

ard

ing

fu

lfilli

ng

th

e re

qu

irem

ents

:

reg

istr

ar(a

cad

emic

s)

Copyright © 2009 National Institute of Design

All rights reserved. No part of this book may be reproduced in any form, except

for the inclusion of brief quotations in review, without prior permission in writing

from the author.

I am indebted to B & V Designs and Namo for giving me the opportunity to do this project.

I am grateful to Julie and Pankaj for constantly guiding, criticizing and pushing me, as also for patiently allowing me to fumble through the project.

I thank my guide, Rupesh for his guidance and help.

Pankaj for all the discussions, exchange and criticism.

NID for laying the foundations to my professional life and for the ineffable four year roller-coaster ride.

Aditi and Kailash for sharing their web expertise.

Subrat, Sindhu and Naren for their technical assistance

Apurba, Lisa, Mridu, Prashant, Ipsa, Aditya, Rustom, Sumedha, Anosh for their inputs, suggestions, honest criticism and feedback.

Sagar and Raju Bhaiya for the endless chai, coffee and channa.

All respondants of my surveys, questionnaires and stupid questions at odd hours.

My family, for their constant support.

All my friends and graphic design batchmates for all the support learning and fun through the years.

Acknowledgements

1. Background

1a. Diploma Project 1b. NID and it’s Background1c. Sponsor1d. Client1e. Project Background

2. discipline and MediuM (Brief)

2a. Graphic Design Boost2b. Graphic Design Today2c. The Medium - Internet2d. How does the web work?2e. Evolution of Graphic design and web2f. World web usage2g. Web usage - In India2h. Factors affecting the use of web

3. ideation

3a. Initial brief, discussions and meetings3b. Old Website3c. Brainstorming3d. Initial Moodboard3e. User Research

Personas3f. Initial concepts3g. Exlorations

4. design Visualisation

4a. Design route 14b. Final Direction4c. Site Structure4d. Logo Type and Color 4e. Final Layout

5. naVigation and structure

5a. The Content5b. Navigation Structure5c. Final Navigation5d. Final Content5e. Testing

Contents

1010121415

1820212225272830

3234384041455564

7791929398

114120123134138

6. critical issues

6a. Commercial Issues 6b. Process Issues 6c. Technical Issues 6d. Web Design Issues

7. Wishlist

7a. Photo shoot7b. Webstore

8. discipline and MediuM (detail)

8a. Graphic Design then and now8b. The medium - Internet8c. Web usage in India8d. Personal psychographics of Indian users

9. references and research

Namo StationeryNamo PresentationSimilar ProductsCompetitors and Similar websitesTechnical reference and researchUser Interface & it’s principlesSource List

10. conclusion

144145146147

149161

173179196200

202204209212223233237

239

1. BACKGROUND

1. B

ackg

roun

d

| 10

After a four year course at NID, the diploma is the final project that is supposed to test all the different aspects learned during a thorough design education. Usually, the project is taken up with a sponsor and it is a real-time project that involves the complexities of the market and client interactions. Sometimes, a hypothetical project is taken up, which maintains a more academic slant. Either path is the choice of the concerned student and guide.

The Diploma Project, which is expected to be of 4-6 months duration, is a complete demonstration of independent client service by the student, and is expected to generate

a professional design assignment with application and implementation capabilities.

You could see it as a testing ground; using your skills in a complex design project outside the school atmosphere. It could also help with becoming gradually acquainted with the Indian design industry. This would be the second time that the freshers are exposed to the industry. The first time, they were student trainees and the second time as final year students that are much more confident and skilful. On the whole however, it is impossible to narrow on just one benefit.

As an imaginative speculator, I could be allowed to say that each and every student will be exposed to a different experience. Some will be disillusioned, shocked even, at the state of the design industry. Some will be amazed, refreshed and excited about this new, constantly changing world. Others could even be afraid, confused and wondering what they should do next. For every one of them, however, one common factor is the significance of graduation, the significance of the end of your student life.

1a. Diploma Project

1b. NID and its background

During the early years of post independence India, manifold changes were taking place in economic and social scenario and in production processes with the introduction of new technologies even in the remotest corners of the Indian sub-continent. There were at that time, great thinkers who realized that the process of development demanded a closer look at the future policies and resources that would later on determine the pattern and pace of growth envisioned for India of the future. The Industrial Policy Resolution of

1953 outlined these concerns and indicated broad guidelines. It was as result of these activities that the Government of India invited the renowned design team of Charles and Ray Eames to recommend a programme of design to serve as an aid to the newly established small industries in India. On the basis of their ground breaking and insightful document, ‘The India Report’, the Government of India set up the National Institute of Design in 1961 as an autonomous national institution for research, service and training in Industrial Design and Visual Communication. The echoes of Charles & Ray Eames and the school of Bauhaus still fill the grey cement corridors of the National Institute of Design. Every institute is the product of its conflicts and history: however this statement is too simple.

When N.I.D was started, the aim was “to provide a multi-disciplinary approach to design, to satisfy the complex problems of India’s changing environment”. After 49 years of design education and industry, it has become an institution of repute, instantly demanding respect. To understand its beginnings, the Eames Report is one of the few documents that describes what NID was like in ‘those’ days. Hearing the number of times their name is mentioned even today in NID underlines the tremendous effect and inspiration they had on the mysterious people that started this institute.

Charles Eames, American industrial designer and his wife and colleague Ray Eames, visited India for three months at the invitation of the

11 |

1. Backg

round

Government, with the sponsorship of the Ford Foundation, to explore the problems of design and to make recommendations for a training programme. The Eames’s toured throughout India, making a careful study of the many centres of design, handicrafts and general manufacture.

“The echoes of Charles & Ray Eames and the school of Bauhaus still fill the grey cement corridors of the National Institute of Design.”

The report states that “We have been asked by the Government of India to recommend a program of training in the area of design which would serve as an aid to the small industries. We have been asked to state what India can do to resist the rapid deterioration of consumer goods within the country today.” Many decades have passed since this report was written and acclaimed. In 2010, NID is a growing institution in three cities with a commercial and market-driven focus. The idealism it started with hasn’t faded away completely, but it hasn’t enthused the students of the institute for many years either. One of the main ironies behind this institutions is how heavily it had borrowed from the West, though its aim was to discover and nurture indigenous values.

NID was set up ‘to create an alert and impatient national conscience concerned with the quality and ultimate values of the environment.’ “With the aim of training a generation of educators, NID’s founding faculty were farmed out to carefully selected Western institutions such as Ulm or Basel, and given time to soak in ‘universal’ design values before returning to India to teach...The optimism of the time is reflected in the cool concrete and glass of the NID campus buildings, which, set within quiet gardens offer welcome relief from the mayhem outside the gates. Yet as with the shopping mall in Delhi there is little to suggest that this is India – just a different take on the global theme of everywhere and nowhere.”

1. B

ackg

roun

d

| 12

1c. Sponsor

B & V Design Private Limited was founded in 1998 by Julie Bose Verma and Pankaj Verma.

Julie Bose Verma graduated from the National Institute of Design, Amhedabad, after completing a five years course in Visual Communication, specialising in Graphic Design. Julie has been working in the area of packaging graphics for the past 10 years and has worked on a variety of products, ranging from cosmetics to FMCG products.

Pankaj Verma also graduated from the National Institute of Design, Ahmedabad, after completing a course in Industrial design. In 2000 he cofounded IndiStore, a contemporary furniture store in New Delhi. Pankaj has been working in the area of Furniture Design & has also worked on turn key projects for Domestic, Retail and Commercial Offices, in the area of Interior Design.

Neeta Bose Uppal, Strategic Marketing , MBA (Napier University, Edinburgh), MA (University of Gloucestershire, UK. Neeta has worked with Advertising Agencies, PR Consultancy Firms & Marketing Research Firms, on a variety of projects providing them with insights into their markets & Brand Positioning Strategies, in relation to

their communication. B & V Design was created with theaim to cater design services to clients. Utilising contemporary research techniques and the expertise of our designers, we create carefully targeted design solutions with maximum efficiency.

As a result driven agency, our foremost concern is the success of our clients. Living up to that commitment is the reason for our success. Our Design studio is one firm with a two word philosophy, “ Be somebody “. To stand out in a world of visual clutter, each client, each product must have a personality. Without it, no one will remember you. AND if you have the wrong personality, no one will believe you.

Brief list of client projects

ClientPepsi Food Pvt. Ltd. (India)

GlaxoSmithKline

Heinz Kingdom of Saudi Arabia U.A.E, Kuwait & Egypt

Design Project

Packaging Design I 7UP, Beverage I Slice Mango Drink, Beverage I Slice Mangola Drink, Beverage I Mirinda Slim Can I Tropicana Juice Tetra packs

Brand Identity : I Slice Mango Drink I Slice Mangola Mango Drink

Packaging Design : I Iodex Double Power I Boost I Boost Choco Blast

Brand Identity : I Iodex Double Power

Packaging Design : I Complan – Vanilla, Strawberry,

Chocolate I Heinz Baby Cereal – Complete

range of flavours

13 |

1. Backg

round

I Heinz Strained Baby Foods I Complete range of flavours

Brand Identity : I Complan

Packaging Design : I Lay’s Stax Chips, complete range

of flavours I Lay’s Wafer Style Chips, com-

plete range of flavours I Lay’s Potato Chips, complete

range of flavours I Lay’s Latino Style Chips, com-

plete range of flavours I Kurkure Namkeen, complete

range of flavours I Lehar Namkeen, complete range

of flavours I Chaat Street Potato Chips, com-

plete range of flavours I Cheeto’s Tangy Clouds I Uncle Chipps Tomato Tangy

ChipsBrand Identity : I Lay’s Latino Style I Brand Identity : I Kurkure I Chaat Street

Packaging Design : I Maggi Pazzta, complete range of

flavours I Maggi 2 Minute Noodles, com-

plete range of flavours I Maggi Vegetable Atta Noodles I Maggi Dal Atta Noodles I Maggi Rice Noodle Mania, com-

plete range of flavours I Maggi Cuppa Mania , cup noo-

dles complete range of flavours I Maggi Chatpata Sauce I Maggi Pudina Sauce I Maggi Tomato Sauce I Maggi Tomato Ketchup I Maggi Hot & Sweet Sauce I Maggi Pichkoo Rich Tomato

Sauce I Maggi Soups, complete range of

flavoursBrand Identity : I Maggi Pazzta, I Maggi Vegetable Atta Noodles

Frito-Lay India

Nestle India Ltd

1. B

ackg

roun

d

| 14

Namo is a registered trademark brand owned by B&V Design Private Limited. Namo, a design house launched in 2007 specializes in the devotional space, is the brainchild of Delhi-based Pankaj Verma and his wife, Julie Bose.

Pankaj Verma is NID graduate who worked as an interior designer for two decades before starting his own company. He explains, “Apartments are getting fancier, but we still have a traditional mind set in the way we do up our personal spaces, our pooja ghars. We wanted something contemporary, not hip.” He has experimented largely with stainless steel, hand-crafting and laser-cutting it; Namo’s designs are “clean and minimal”, in line with recent trends in design.

What is Namo ?

“Om Namo “The first step in offering salutations

to God. Namo means “Namaskar” or “Namaste” – greetings to God. It is uttered when one prays to God.

India is a religious country with age-old traditions & customs. At every step from birth to death, we worship God & pay homage. Nearly every house, across the country reserves a small part of their home to create an altar to God. Modern design in the Indian home has so far not touched this corner of the Indian lifestyle. Prayer & worship is an integral part our everyday life. The Indian calendar is liberally peppered with many reli-gious festivals. The rituals followed are deeply rooted in old traditions & customs, which have been evolving over the centuries. The ever-increas-ing pace of life has made that small amount of time spent in front of the altar, even more special, even more personal.

The beauty and the ornamentations found in temples has deteriorated over time, due poor reproductions and a lack of awareness to form & detail. Namo’s endeavour is to revisit & revive these elements and attempt to create a range of products for

“Bhakti”, worship & offerings to God. A tribute

1d. Client

to Indian traditions & customs, with a fusion of the old with the new.

Namo’s designs have been inspired by elements in nature and geom-etry – forms that are an integral part of many cultures. The designs are contemporary with strong traditional elements drawn from various Indian customs. These designs are unique and are a break away from the usual devotional products available in the market today. A conscious effort has been made to maintain a fine bal-ance between ethnic Indian designs and modern, clean lines. Namo’s products are made of high-grade stainless steel, a metal that stands the test of time due to its easy maintenance. Stainless steel has received new found attention in the world of design. Its brilliance adds to the aesthetic appeal of any interior space, whether contempo-rary or classic. Its strength, function-ality and durability guarantee unlim-ited boundaries when it comes to design.

The Namo range consists of “puja” plates (plates for offerings), oil lamp holders, bowls for “prasad” (sacred food offerings), incense stands, T-light holders, and alters (self stand-ing and wall mounted).

Namo products are manufactured in Delhi, fusing hand craftsman-ship with hi-tech laser cutting.

15 |

1. Backg

round

Introduction

Internet has become “the” medium of communication in the Indian as well as international context over the past decade or so. Web based services ranging from booking tickets to customized shopping, suggestions to fun and entertainment, is the current scene with almost every little chore that earlier involved queues and long waiting hours being solved within minutes.

The Internet has also become a large market for companies; some of the biggest companies today have grown by taking advantage of the efficient nature of low-cost advertising and commerce through the Internet, also known as e-commerce. It is the fastest way to spread information to a vast number of people simultaneously. The Internet has greatly facilitated personalized marketing, which allows a company to market a product to a specific person or a specific group of people more so than any other advertising medium. The Internet has also subsequently revolutionized shopping.

Project Background

In recent years, online shopping has become popular; however, it still caters to the middle and upper class. Namo, a line of exclusive décor accessories, wants to expand their brand to this forum. Currently, Namo products are sold at various retail stores and through exhibitions. Availability of the product online will help the brand reach consumers around the world and not be restricted to certain stores/cities.An influential factor in consumer attitude towards non-store shopping is exposure to technology, since it has been demonstrated that increased exposure to technology increases the probability of developing favourable attitudes towards new shopping channels.

Objective

The main idea of online shopping is not only in having a good looking website that could be listed in a lot of search engines and it is not about the art behind the site. It also is not only just about disseminating information, because it is all about building relationships and making money. Rather than supporting the company’s culture and brand name, the website should satisfy consumer’s expectations. A majority of consumers choose online shopping for faster and more efficient shopping experience. Companies should always remember that there are certain things, such as understanding the customer’s wants and needs, living up to promises, never go out of style, because they give reason to come back. The first and foremost thing that can irritate a customer is if the product isn’t showcased well. A website cannot be as interactive as a physical retail store with a sales person, therefore stress needs to be laid in giving all information a customer would ask a sales person without them asking.

1e. Project introduction and brief

An influential factor in consumer attitude towards non-store shopping is exposure to technology.

The Internet has greatly facilitated personalized marketing, which allows a company to market a prod-uct to a specific person or a specific group of people

1. B

ackg

roun

d

| 16

So therefore, I aim at creating a website/webstore for Namo, which helps customers all over the world to access the product range through an online catalogue, and shop from wherever.With the popularity of the Internet rapidly increasing, online shopping has become advantageous for retail store owners as well as small-scale manufacturers.

Scope of work

I Visual audit and analysis among competitors. I Understanding the e-commerce module and study the working, developing

logistics of Internet selling I Studying user interaction on product sites and their psychology when

viewing, reviewing and buying online. I Exploring new concepts in the area of web design keeping e-shopping in

mind I Visual and graphic elements particularly related to photography and

product usability hence creating an online product catalogue as well.

Methodology

The project was divided into phases, with each phase progressing after drawing inferences from the earlier one.

PHASE 1.RESEARCH

I Information collection: understanding the background and details about the products and services offered by Namo.

I Understanding the current scenario of the Internet and it’s application I Understanding the user, the human computer interaction factors and

cognitive issues through surveys and analysis. I Comparative study of competitors/contemporaries (ebay.com, amazon.

com etc) from the user’s perspective I By the end I should have an in-depth understanding of the existing

scenario and the design context

PHASE 2. EXPLORATIONSDesign, layouts, colors, typography, graphic elements, layouts

I Exploring the medium and understanding the possibilities and opportunities of design within the medium.

I Constructing a product catalogue - Display of the products and their use I Exploring basic elements of color and typography in the digital scenario I Exploring and applying engaging layouts for better user interaction

PHASE 3. REFINEMENT AND EXECUTION

I Validation of approaches and selection of final concept I Refinement and finalization I Supervision of the execution

“Ultimately, users visit your website for its content. Everything else is just the backdrop”.

I had various alternative options of the visual language, and narrowed down to one direction, which was taken further to build the final design.

2.Brief about the Discipline and Medium

It is always important to establish the context in which this project took place. Context is a term very easily thrown around nowadays, but this still doesn’t erode its significance. Now let’s briefly look at the history and cur-rent state of world graphic design today, and then an insight on the medium- Internet. This is discussed in a bit more detail in the 7th Chapter of

the document.

2. D

isci

plin

e &

Med

ium

(in

brie

f)

| 18

A whole new area of graphic-design activity mushroomed in the mid-1990s when Internet commerce became a growing sector of the global economy, causing organizations and businesses to scramble to establish Web sites.

1990’s

Post modernism escaped the confines of art schools and was embraced by marketers who hungri-ly chased after the elusive ‘cool’ - the important factor in branding. Eventu-ally, post modernism came to mean a multiplicity of appropriated graphic styles, characterized by visually arresting, layered compositions of frequently indecipherable meaning. Subvertising: jamming of corporate messages with strong direct com-munication in order to lead an anti-globalization revolution. Motivated by interest in sociopolitical reform.Characteristics were mixing of di-verse type size and weights, over-printing, cluttered pages, deliberate ’mistakes’, unpredictable historic references and blurred photographs.

2000’s

Graphic design in the 2000’s is held on to the Digital Revolution, which began in the 1960s.The computer, with its many periph-erals, has changed the way many look at design. Some designers have completely succumbed to this technology and traded in their tech pens and X-acto knives for a Wa-com tablet and a printer. Designs are now easier and quicker to complete. Many variations of a design can be made in seconds as compared to the lengthy times of changing a de-sign in the traditional fashion.

Though design is still not solely contained by the technology of the Digital Revolution. Our designs are still strongly influenced by many periods and individuals from the past. The work of Kauffer and Cassandre as well as other designers in Pictorial Modernism were producing pieces that would still work today. They often abstracted images to near silhouettes and worked largely in two-dimensional planes; much like the majority of design today.

Left and Above: These two anti- ads by the ad busters organization are subver-sive attempts to educate people about the extreme commercialism in the world today.

Above: This subvertisement mocks the famous brand, United Colors of Benet-ton, courtesy of Ad busters.

From the pop psychedelic imagery of the late ‘60s to the desconstructivist typography of the ‘90s, graphic design has often been faddish and trendy. While a hip stylish look might appeal to a particular demographic population, it is often the wrong communications paradigm, quickly becoming cliched and dated as fads change. Graphic imagery often needs to be contemporary, but if clarity does not rule the message could be obfuscated. After grab-bing the viewer’s eye, the function of graphic design is to convey information clearly and efficiently. If it doesn’t do that, it doesn’t work.By now, Graphic Design was no longer ART, it had become quite commer-cial, and advertising was where it was heading. From the retro to grunge to geometric Graphic Design had seen it all. A rebellious approach was being seen in graphic design merging characteristics from all these times.The introduction of electronics into the design field was a boon or a mishap cannot be justified. But by now the computer had entered the world and people then new, the computers would be the medium for graphic design soon. With the advancement in the technology and internet becoming popu-lar, the concept of Graphic design was changing. You can see a detailed timeline in Chapter 7.

2a. Graphic Design Boost late 20th century

19 |

2. Discipline &

Medium

(in brief)

So many movements are still holding a strong place in our designs, like the Bauhaus, Cubism, Constructivism, De Stijl, and the Isotype movement. All of which played a major role in getting current design where it is.

Above and above right: Famous posters from the Bahaus, DeStjil and Construc-tivism etc. era, whose insight can be seen in the modern posters below.

An example of strong Web design is the Herman Miller for the Home Web site, designed by BBK Studio in 1998. Designing a Web site involves the layout of screens of information rather than of pages, but approaches to the use of type, images, and colour are similar to those used for print.

2. D

isci

plin

e &

Med

ium

(in

brie

f)

| 20

New Pluralism: It is a response to the greater multicultural global soci-ety and at the same time prompted by the strong need from designers to develop their own style and thus stand out in a crowd.In the 21st century, graphic design is ubiquitous; it is a major component of our complex print and electronic infor-mation systems. It permeates contem-porary society, delivering information, product identification, entertainment, and persuasive messages. The re-lentless advance of technology has changed dramatically the way graphic designs are created and distributed to a mass audience. However, the fun-damental role of the graphic designer giving expressive form and clarity of content to communicative messages remains the same.GUI: Graphic user interfaces lead to a whole new fresh medium, and graphic design today is increasingly about movement and play.As a creative designer, I feel no intim-idation with these increasing num-bers. Good design, whether it’s ex-ecuted with a sketchbook and pencil or a Wacom Intuos tablet and pen, begins with a great idea. Technology is meaningless without the talented people who shape it. The Internet has created a wide plat-form for designers to share ideas making collaborations between graphic designers, transference of ideas. Distrust of commercialism: It is now time for practitioners to ques-tion their works ethical relevance. Graphic design has been cynically used as a means to induce people to buy products that they don’t need. There are efforts that can be seen at grass roots levels: e. g. Ad busters.The desire for emotional connec-tions: Increasingly designers are subsidizing self-initiated experimen-tal work that allows them to express their own individuality and personal ideas with revenues from commer-cial work.

“ The technology driven accel-eration has increased the sty-listic obsolescence of graphic design solutions - what ap-pears cutting edge today will appear old hat the next.”

The images shown here are from the portfolio of “nietylko” who I feel is a good example of the new pluralism found in graphic design today. ‘Valp aka Maciej Hajnrich is a freelance illustrator and graphic design maniac based out of Katowice, Poland. His showcase space -Nietylko- is over- loaded with abstract and colorful images..

2b. Graphic Design Today

21 |

2. Discipline &

Medium

(in brief)

2c.The Medium - Internet

The Internet has become so ubiquitous it’s hard to imagine life without it. It’s equally hard to imagine a world where “www” isn’t the prefix of many of our online activities. The terms Internet and World Wide Web are often used in everyday speech without much distinction. However, the Internet and the World Wide Web are not one and the same. The Internet is a global data communications system. It is a hardware and software infrastructure that provides connectivity between computers. In contrast, the Web is one of the services communicated via the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs.The Internet is also often simply referred to as the net. In many technical illustrations when the precise location or interrelation of Internet resources is not important, the Internet is often referred as the cloud, and literally depicted as such.

The Web is just one of the ways that information can be disseminated over the Inter-net. The Internet, not the Web, is also used for e-mail, news, instant messaging and FTP. So the Web is just a portion of the Internet, albeit a large por-tion, but the two terms are not synonymous and should not be confused.

2. D

isci

plin

e &

Med

ium

(in

brie

f)

| 22

The first step in understanding the technical know-how of the web, is the difference between the web and the Internet. Lets take a commonly used example to illustrate this difference. Imagine that the Internet and the web together make up a huge, sprawling city. Every building in the city represents the world wide web, holding the information that you want to retrieve. If you know the address of the building, which floor its on, and the room where the information is, then you can simply get into your car and drive there. Each road is a path to that information. These interconnected roads represent the Internet.Another way to define the web is through a concise definition.

According to Wikipedia, ‘The World Wide Web (or the “Web”) is therefore a system of interlinked, hypertext documents accessed via the Internet. With a Web browser, a user views Web pages that may contain text, images, and other multimedia and navigates between them using hyperlinks.”So lets get technical. Based on the earlier metaphor of a city, we can gather that if you explore the web you find information, whereas if you explore the Internet you will find routers, computers and cables. To understand the system in more detail, we need to look at its parts and how each part works.

“Based on the earlier meta-phor of a city, we can gather that if you explore the web you find information, whereas if you explore the Internet you will find routers, computers and cables.”

World Wide Web Technology is made of the following parts: The Web Browser that is viewing the information The Web Server that holds the information

The Protocol that connects the above two, the client and the server - HTTP

The Language used to compose the Web documents - HTML

The Means to locate the information - the URL

The BrowserThe Browser is a software applica-tion that requests the retrieval of information from the World Wide Web and displays the data on your PC. E.g. Mozilla Firefox, Internet Explorer.

The ServerThe Server is the hardware running a set of software applications. The Server is also the software applica-tion that retrieves the requested data and formats it for display or executes tasks requested by the browser.

The ProtocolThe Protocol is the method used to communicate between the browser and server.

HTTPHTTP stands for HyperText Trans-fer Protocol. HyperText refers to a collection of hyperlink-laden docu-ments. (A hyperlink is a word, phrase, or image that when clicked “sends” users to another document.)Transfer refers to the sending of commands from the browser to the Web server to “read” the requested

The World Wide Web is the only thing I know of whose shortened form takes three times longer to say than its long form. – Douglas Adams, The Independent on Sunday, 1999

2d. How Does the Web Work?

23 |

2. Discipline &

Medium

(in brief)

WebServer

Static ContentsHTML

Web Browser

1

1

2

3

2

3

Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource. The web browser then initiates a series of com-munication messages, behind the scenes, in order to fetch and display it.

First, the server-name portion of the URL is resolved into an IP address using the global, distributed Internet database known as the Domain Name System (DNS). This IP address is necessary to contact the Web server. The browser then requests the resource by sending an HTTP request to the Web server at that particular ad-dress. In the case of a typical web page, the HTML text of the page is requested first and parsed immediately by the web browser, which then makes additional requests for images and any other files that complete the page image.

In a simpler manner, first you access one of the browsers, such as Internet explorer. Then enter the address (URL such as www.google.com) of the information you want to retrieve. When you press enter what happens is shown in the diagram below:

The Browser sends the URL via the protocol HTTP to the server (software) such as Oracle HTTP Server, which is on the server (hardware)

The server software application retrieves the data, formats it using HTML and;

Returns the static page back to the browser for your viewing pleasure

Above: The diagram explains the three main steps that allow the user to access information via the web and Internet.

HTTP

2. D

isci

plin

e &

Med

ium

(in

brie

f)

| 24

Web page. Protocol is an agreed-upon sequence of bits, bytes or characters exchanged between pro-grams for purposes of sending and receiving data.

HTMLHTML stands for HyperText Markup Language. HTML is the language used to build Web sites (pages). HTML uses standard codes, or tags, to determine how a Web page looks when your browser dis-plays it. HTML tags also display the hyperlinks that connect information on the World Wide Web. Example

of tags controlling page presenta-tion: <B> Make me Bold </B> <H1> I am the largest Header </H1> <H6> I am the smallest header</H6> <BODY BGCOLOR=”GREEN”> <FONT COLOR=”RED”> Exam-ple of a tag defining a hyperlink: <a HREF=”http://www.asu/asuweb/ entrance”/< </a>

URLURL stands for Uniform Resource Locator and it is the address of a file and usually consists of four parts: the protocol, server (or domain), path, and file name. For example: http://

www.asu.edu/asuweb/studentaddresses, is an example of an URL. http is the protocol, and www indicates you are going to access the World Wide Web. asu.edu is the server, or domain. asu is the owner of the domain and edu is the owner type designator and indicates that the owner of the information is an Educational institution. Other organization type designators you may have seen include:.com= Commercial, .gov = Government and .org = Organization.Country specific websites have specific domains like .in (India) .au (Australia)

Above: An illustrated view of the world wide web and all the links between different packets of information, giving an idea of the innumerable number of links that are

seen, if he focus on a popular destination such as Wikipedia, the free encyclopedia.

25 |

2. Discipline &

Medium

(in brief)

2e. The evolution of Graphic Design and the webBy May 1991 the first web applica-tion was ready for use by scientists at CERN laboratories in Switzerland, Geneva. 16 years have passed since the development of this medium, and a lot has changed since then. Primarily it wasn’t something that everyone could use. In its early stag-es it required a lot of technical ex-pertise and was hardly user-friendly. Despite this, researchers, scientists and academics used the web to share data and quickly learned the new technology. This community started regularly sharing information through the web. As the web grew and the number of people using it also increased, the first graphical browser, called Mosaic was devel-oped by the NCSA (National Centre for Super computing Applications).

So by 1993, the web browser came equipped with the ability to handle images as well. This became the first time the web layout was born, since text and images fell together into ta-bles.By 1994, the first commercial web browser, Netscape Navigator was released. Web traffic also increased further and many commercial ven-tures, entrepreneurs and enthusi-asts became involved. This lead to the first time graphic designers were brought into the field. These early designs were characterized by an ‘over-saturation of images and poor functionality.’ This could be because the layouts created by the design-ers were print-based and with little knowledge about navigation and the web as a medium.

“So by 1993, the web browser came equipped with the abil-ity to handle images as well. This became the first time the web layout was born, since text and images fell together into tables. “

Left: This screenshot of an old Microsoft homepage shows an example of design when graphic browsers were very new, around the year 1994-95.

2. D

isci

plin

e &

Med

ium

(in

brie

f)

| 26

“Websites were becoming cool and exciting, attracting the attention of the ever increasing number of users online.”

“...we have now entered and are evolving through the usability era...This means taking into account ‘not only technical con-cerns such as download time and usability but also presenta-tion, emotion, and approachability’.”

Soon, the web was filled with in-creasingly newer applications (ap-plets and videos), add-ons to Web browsers for increased functionality (plug-ins) and newer Web Browsers. “Introductory animations created in Macromedia Flash and naviga-tion applets coded in Java (the pro-gramming language) became all the rage.” Websites were becoming cool and exciting, attracting the attention of the ever-increasing number of us-ers online.

According to Luke Wroblewski, a researcher and interface designer, we have now entered and are evolv-ing through the usability era. Today, the aim is not to make the site look ‘cool,’ but to focus on the usability guidelines, so that web-browsing becomes an intuitive experience. This means taking into account ‘not only technical concerns such as download time and usability but also presentation, emotion, and ap-proachability’.

Left Above: The Microsoft website from 1999 is a symbolic example of the kind of commercialized web layouts that were being churned out at the time.

Left Below: A 2009 screenshot of the same site shows how much the designs have changed since then, increasingly focusing on the conven-ience of the user.

27 |

2. Discipline &

Medium

(in brief)

Internet usage in the world is steadily increasing. According to JupiterResearch a leading and respected organization involved in marketing and Internet related trend research, ‘There will be 1.5 billion people with Internet access in 2011, with the biggest growth in the online population occurring in Brazil, Russia, India and China.’ In its “Worldwide Online Population Forecast, 2006 to 2011,” JupiterResearch anticipates that a 38 percent increase in the number of people with online access will mean that, by 2011, 22 percent of the Earth’s population will surf the Internet regularly.

At the same time, Internet usage has “matured,” and the growth rate has slowed in the developed countries such as the United States, Canada, Japan and much of Western Europe. The report says that 17 percent of China’s population will have regular Internet access by 2011 and India should hit 7 percent at around the same time. Infrastructure development and increased consumer purchas-ing power are the reasons for these large growth rates, notes JupiterResearch. By 2011, Asians will make up about 42 percent of the world’s population with regular Internet access. Brazil “with its soaring economy,” will experience a 9 percent compound annual growth rate, the fastest in Latin America.

In 2007, certain web properties have the higher values, and there are several studies at to which ones are the top properties in the world. There are two main ways this can be measured. One way is to rank the top ten global properties by average visits per visitor, which gives information as to how regular each visitor is, and how engaged they are with that particular site. The other method is to rank the top ten global properties by counting the number of unique visitors. Both stats have been shown, as of 2007. These charts give an idea of the most popular and most visited sites, and also the most valued sites of the web.

After reading these statistics, we get a commercial view of the world wide web, the growth rates from different countries, and the kinds of sites most people visit, whether from home or from work. However, it is important to read the note on statistics, and why it is important to think beyond them, as a designer.

Property by Unique Visitors

Average visits/visitors

Total Unique Visi-tors

Rank in Top 100

Total Internet Visits 54 739,835 NA

NHN Corp. 33 30,077 47

Tencent Inc. 31 53,175 21

Rising.com.cn 29 22,254 89

Google sites 24 503,033 2

Microsoft Sites 22 507,317 1

Facebook 22 24,782 73

Yahoo sites 21 458,985 3

United-Internet Sites 13 23,853 79

Time Warner Network 13 256,242 4

Fox Interactive Media 12 140,500 8

Top Global Properties by Average Visits per Visitor, February 2007 Note: visitors were 15 years old or older, ac-cessing the Web from home or work.

Source: comScore, 2007

“... by 2011, 22 percent of the Earth’s population will surf the Internet regularly.”

2f. World Internet Web Usage and Growth

2. D

isci

plin

e &

Med

ium

(in

brie

f)

| 28

Trends in Web Marketing: Social networking sites

When it comes to marketing, social networking sites are a new trend. Earlier, marketers were cautious about investing efforts into these types of sites. The study defines a social networking site as “one that allows Internet users the ability to add user-generated content such as: comments, review, feedback, ratings, or their own dedicated pages.” Sites such as MySpace, YouTube, and Amazon.com fit the study’s classification of social networking sites.However, targeting such sites had its advantages, since “Most marketers would far more prefer targeting a very think slice of a highly relevant audience than doing the mass marketer appeal,” says Murray. “Participation on these sites can take a couple different forms,” said Murray. “[Marketers] have to pick the right site, picking the one that most closely matches your online audience. Being very transparent in your communication is very im-portant. Each community has its own rules of engagement; a marketer must abide by those rules.”“Consumers visiting social networking sites generally do so through direct navigation and bookmarks. Second-ary is navigation through Google and Yahoo, or links in e-mail. In addition to optimizing participation on a social networking site to be visible on Google or Yahoo, marketers need to ensure “that their content is of high enough interest, quality, or value that it will serve as ‘link bait’ or ‘bookmark bait.’”“The report, conducted by JupiterResearch, is based on an Ipsos U.S. Online Consumer Panel of 2,223 indi-viduals. The survey consisted of 25 closed-ended questions about behaviors and preferences regarding online holiday shopping, search, ISP and video, online social networking (on behalf of iProspect), and online dating. Data were weighted by AOL usage, online tenure, and connection speed, determinants of online behavior.”

2g. Understanding Web usage in IndiaPC numbers in India

IDC (International Data Corpora-tion) figures show that last year (2005 - 2006) the PC market as a whole grew by 25 per cent in India - 5 million units were sold. Expected growth this year (2007-2008) is to be another twenty per cent. This is ac- cording to the research firm Gartner. Looking at a longer timeline, the technology research firm Forrester has predicted that India will add an-other 157 million PCs by 2015.

In the first quarter of 2007, 20 per cent of PC sales were of lap-tops. Also if you take year on year growth figures in sales of PC’s from April 2006 to March 2007, laptops sales have grown by over 85 per cent.

However, if we com-pare ourselves to the rest of the world, then

our PC penetration is just about 2 percent, the United States has a PC penetration of 73.4 percent, Sweden 56, Brazil 19.6, China 7, Russia 12 and Pakistan 1.3.

Why is the growth rate so high?

The segments that are driving the PC sales in India are Business and the government sector. The house-hold sector is also showing a healthy growth. In fact the household sector is showing better growth than the business segment. The latter may account for about 77 percent of sales (2006- 2007) and households just 23 percent of the total (desk-tops) but household sales of PC’s increased by 12 percent, higher than the 7 percent growth of the business sector. However, while looking at these statistics we must also keep into account the increasing number of laptops that are replacing desktop pc’s for the business sector.

“Looking at a longer timeline, the technology research firm Forrester has predicted that India will add another 157 mil-lion PCs by 2015.”

29 |

2. Discipline &

Medium

(in brief)

Another factor which is driving up home PC sales is the widely avail-able and inexpensive broadband. For just Rs 250 ($6.25 USD) to Rs 500 ($12.5 USD) - you can get a broadband connection (with limited downloads). “We have a large il-literate population and that is hold-ing us back. The real growth lies in the semi-urban and rural areas. The urban will keep growing steadily, but for the semi-urban to grow our country needs to take that big leap forward and take technology (com-puterisation, telephony and broad-band Internet) to small towns. And as for the rural, unless we educate our masses, they are going to be left out.”

Who buys home PC’s?

Expectedly, its the higher socio- economic catetgory (SEC A). Sec A is. SEC B has a lower (37 percent) market share, but showed a higher (33 percent) growth. SEC C showed 12 percent growth with 20 percent market share.The home segment is doing well not just because incomes are rising, but also because prices of pc’s are falling. In fact the price differential between a branded PC and an as-sembled one has lessened substan-tially. This is partly due to the govern-ment’s lowering levies and duties.

Internet Access

According to comScore Networks India, China and Russia experienced the highest year-on-year growth rates in terms of Internet users. The Indian Internet population grew at 33 percent, making it the fastest-grow-ing country of Internet users. India had over 21 million users aged over 15 years at the end of January 2007, as against 16 million a year ago.But this excludes traffic from public computers such as Internet cafes. In fact the actual number of active (those who have used the Internet

in the past 30 days) Internet users in India were almost 25 million six months ago according to IAMAI-IMRB survey. These figures take into account those who use public computers. However, even though India is ranked eighth in the world in terms of number of Internet users, the country is not ranked amongst the top 10 countries in terms of aver-age monthly hours online per unique visitor. This is because of two major reasons:1. The widespread use of public

computers here.2. Those who do use computers

at home, mostly use dial up, not broadband.

Mumbai tops in terms of Internet ac- cess, followed by Delhi, Hyderabad Bangalore and Chennai. The number of active users is what really counts

Place of accessing Internet (multiple

accesses).

Rank City

% of Regular Internet Users

Regular Users (in mil-lions)

1 Mumbai & Thane 9.8% 3.44

2 Delhi NCR 8.6% 3.02

3 Hyderabad & Secundrabad 7.4% 2.60

4 Bangalore 7.1% 2.49

5 Chennai 5.6% 1.97

Top 5 cities by contribution to regular Internet user population in IndiaSource: India Online 2008, JuxtConsult

Internet e-shopping

According to Assocham (Associated Chambers of Commerce & Industry of India), the e-commerce figures today (2008-09) are touching Rs. 2800 crore, but are expected to increase by 150 percent by 2010-11 to Rs 5,800 crores. The two metros Delhi and Mumbai are driving this phenomenal growth.Assocham says that books are the hottest selling item on the Internet. In fact most products bought and sold off online are: books, electronic gadgets and railway tickets. However, people are also buying clothes, gifts, computer and peripherals, and a few are buying home tools and products, home appliances, toys, jewelry, beauty products and health and fitness products.Kolkatta prefers to buy music and movies online, while Bangalore loves to buy a wider range of items from books, electronic gadgets, compu-ter peripherals, gifts movies, book-ings...Just about everything. Mum-bai leads in all categories, except jewellery. Delhites seem to prefer buying jewellery online as compared to any other city.

The main reason, amongst many others, that Mumbai and Delhi are leading e-commerce are because of their massive populations.

2. D

isci

plin

e &

Med

ium

(in

brie

f)

| 30

A lot of factors are respon-sible for a users interaction with the computer and the Internet. Building a website without understanding such factors was not seeming like a good idea. In the next sec-tion you will find the application of the research in building personas and user mapping.

I Current Priorities & Aspirations: Most important priorities in life currently,• Current absolute necessities in life, Current hobbies and interests,

Current role models, Parameter that defines ‘status in the society’ for them, Desired professional qualification for self/children (as ap-plicable), Most aspired luxuries of life

I Personal likes & preferences: kind of music listen to, kind of mov-ies like to watch, type of books prefer to read, favourite sports, favourite food, favourite clothing, drinking and smoking habits, Favourite indoor and outdoor entertainment activities, ways to relax /unwind, frequen-cy and type of holidays/vacations, favourite holiday places in India and abroad• Technology orientation: Role of technology in life, role of Internet,

computer, mobile phone and TV in life

I Personal Consumption Lifestyle Orientation• Personal Consumption Lifestyle classification• Level of socialization/social influence (how inclined to interact

with others in spending spare time at home, outside, in party/get- together, in solving a problem, in deciding to buy products/ services)

• Level of consumption Impulse (how inclined to keep abreast with lifestyle trends, buy what’s latest & trendy, frequency of replacing things at home, frequency of shopping, enthusiasm towards shop-ping, whether to consume or save if income increases, whether to consume or save if income declines)

• Buying Orientation: Attributes give preference to when buying, Fac-tors give preference to when deciding place of buying

I Other Personal Consumption Habits & Lifestyle• Whether owns a credit card, and card type owned• Whether uses a mobile phone, Services subscribed to on the most

used connection, Features present on this most used handset

I Online shopping behaviour • Penetration of online shoppers (only search) and buyers (search and

buy), Reasons for not buying online where applicable• Travel products bought and searched in last 1 year, search-to-buy

ratios, frequency of buying, average monthly spends• Non-travel products bought and searched in last 1 year, search-to-

buy ratios, frequency of buying, average monthly spends• Online payment modes used • Motivations of buying online and problems faced while buying online

2h. Personal Psychographics of Internet Users

3. IdeationThis section describes the briefs and meetings that helped us understand NAMO as a brand and what it should project. It includes the research done in understanding the user and who my target audience would be. My approach towards formulating personas to

understand user psychography better.Almost all the initial ideas,brainstorming and sketches are documented here and following that my early understanding of the content and how it should be structured in the website. Further analysis on content will be found in “Navigation and Structure”. The ideation and visualization processes, though documented in different chapters, often overlap and influ-

ence each other.

3. Id

eatio

n

| 32

3a.Initial Brief and DiscussionsThe first few meetings went in under-standing the project, the brand and the brief. Since the client was also a part of my sponsoring firm I had the advantage of having constant dis-cussions with him. Redesigning the website was the foremost task. The old website was purely a project undertaken in a short span of time. It was designed by Julie and Pankaj themselves with the help of a friend. It’s sole purpose was to take the domain name and have web presence anyhow. Initial discussion were more or less like Q & A rounds as I was trying to understand the ideology and thought behind the brand and how they fore-see Namo in the future.Also the existence of a previous website made certain things easy but certain more challenging. The stress on having something totally different and new, yet include certain aspects from it, was challenging.

According to Julie, Namo was a thought that occurred to Pan-kaj while thinking about his name. Pankaj means Lotus; Something pure and beautiful amongst dirt. He felt the need to bring beautiful design closer to Indian traditions while creating a bridge to the new evolving modern face of India

What is Namo? When asked to Julie and Pankaj,

After having spent nearly two dec-ades working on redundant product and graphic design projects, they decided to create something close to their hearts and closer to home. A deep-seated interest in Indian cul-ture and traditions sparked an idea and Namo was born. Namo is ac-cording to them a celebration of Indian lifestyles, which is a fascinat-ing blend of traditional and modern aspects in everyday life.

Q. But what is NAMO?

A. “Om Namo “The first step in offering salutations to God. Namo means “Namaskar” or “Namaste” – greetings to God. It is uttered when one prays to God.

The beauty and the ornamentations found in temples has deteriorated over time, due poor reproductions and a lack of awareness to form & detail. Namo’s endeavour is to revisit & revive these elements and attempt to create a range of products for “Bhakti”, worship & offerings to God. A tribute to Indian traditions & cus-toms, with a fusion of the old with the new.

“Namo is according to them a celebration of Indian life-styles, which is a fascinating blend of traditional and mod-ern aspects in everyday life”

Below: Screenshot of the homepage of the old site

3. Ideation

33 |

Keywords I picked: LOTUS, nature, geometric, modern, devotional, clean, God, de-votional, beautiful, wellness, experiential, lifestyle, good design

Left: Initial scribbles from my note-book. I had various questions regard-ing the brand being called ‘Namo’ as I was told they are breaking away from their devotional tag. How would the brand work for something apart from devotional products? Now that it has established itself as a devotional ac-cessories brand, what are they looking for? These were topics which were discussed in the initial meetings with the client.

Q. What Namo does?

A. Namo attempt to create a range of products for “Bhakti”, worship & offerings to God in the modern set-ting.The Namo range consists of “puja” plates (plates for offerings), oil lamp holders, bowls for “prasad” (sacred food offerings), incense stands, T-light holders, and alters (self stand-ing and wall mounted). Namo prod-ucts have been designed by Pankaj Verma & are manufactured in Delhi, fusing hand craftsmanship with hi-tech laser cutting.

Q. Why are the products as they are?

A. Namo’s designs have been in-spired by elements in nature and ge-ometry – forms that are an integral part of many cultures. The designs are contemporary with strong tradi-tional elements drawn from various Indian customs. A conscious effort has been made to maintain a fine balance between ethnic Indian de-signs and modern, clean lines.

Q. What Namo wants?

A. Namo’s designs are unique and are a break away from the usual devotional products available in the market today. Keeping this as it’s USP Namo wants to expand. Namo does not have a store of it’s own, but is stocked by a number of retail stores in various cities in India. With-out getting into direct retail through a shop, Namo is looking for a platform by which it could reach worldwide. Internet known to reduce distances all over the world seemed to be the right medium to showcase Namo.

Q: What does the brand project?

A: Experience, lifestyle, fashion, Well-ness. ‘It’s an INDIAN brand. The dif-ferentiators are the size,finish, good design, and experience, ambience. The products in stainless steel give a pure, clean simple feel, just as the lotus - something pure from the dirt.

Q: Who are the end users?

A: The audience he creates for is the modern urban household (not necessarily Indian). The most prob-able buyer according to him is in the age group of 35+. The product is not a necessity, a person doesn’t miss something if the product doesn’t ex-ist in their lives. This product is to make them feel good, pamper them-selves and feel satisfied about using a good product.

3. Id

eatio

n

| 34

Q: What should the new website be like?

A: Nothing like the previous one. The new website should be attrac-tive to a wide range of people. It is not just a website but a almost like a showcase. Creating a desire to ex-perience a Namo product is the main purpose of the site. It has to attract visually to all kind of people.We were told very firmly by the client that the design should not have an ‘Indian accent.’ It should be neutral as far as possible. Since the name Namo had a very strong Indian and Hindu connotation, then wanted to break away from any religious signifi-cance.A very product centered approach was encouraged. The product need-ed to be the HERO. However, at the same time they didn’t want to dis-tance themselves from the product and brand details. So bare minimum text on the website.

3b. The old SiteCriticism of the old site

Initially the site was successful since it helped attract a wide variety of clients, including artists and inter-national clients. This is the most sig-nificant point. But for a designer, the site falls short technically and aes-thetically. Several times, roll-overs on the menu had delayed or blanked out results. The pale yellow wall pa-pers created a dull and unattractive atmosphere. The logo was a com-pletely different colour and did not match the logo on the printed mate-rial. However, the site worked since it managed to convince the end cli-ents of the value of what Namo was selling. Taking feedback from some users helped me understand the Goods and Bads of the website.

Below: Screenshot of the first tab on the

horizontal menu bar which showcases

the categories of products in a thumb-

nail format.

3. Ideation

35 |

Some user reactions to the site and some suggestions for redesign, and designer’s notes.

I Simple, less distractions, no unnecessary fancy graphics, not very colour-ful.

I Simple to view product and go back to main page!!

I But the products seem to be removed from humans.. as in there is no person anywhere showing the context, which might be correct as they don’t want to bias the customer etc etc.. but human scale is important. If you could incorporate the product in an environment,

I Uncluttered and simple to navigate.. if that can be retained while increas-ing the interactivity it would make it a better experience.

I No where it is mentioned, its made from stainless steel, its benefits,

I You can’t compare the products through cutout pictures . the suggested use option works well since it helps you understand the product better.

I And I guess for home decor you need to know how it will look in your drawing room on a table or some thing. So maybe if you can show the product

I in the actual setup or may be with people using it then it will be much more clearer.

I The products are definitely showcased better with ‘suggested use’ col-umn. especially when you compare www.homeshop18.com

I The site colours are depressing.. reminds me of ponds talc... the PINK one... it shouldn’t remind you of anything else but NAMO!

My understanding of what the user wants;

An easy to navigate site; 3rd party independent reviews; easy to find contact informa-tion; response to any queries sent by e-mail; good colour scheme; lots of pictures from different views that help you understand shape, size, etc, minimal text, full information about the product - size, ma-terial, use etc.

A page inside a product category show-

ing all the products of the category on

the left , with the selected product in

the centre, along with an image of it’s

suggested use. A smaller version of the

product is totally useless here which

amuses the user, and also at times is

thought of as a mistake. The suggested

use option has been appreciated by all

and hence should be incorporated into

the new design somehow.

3. Id

eatio

n

| 36

I Toooooo much text.. images n animations can be WAAAAY better....

I Eveytime I click on the ABOVE menu bar.. with contact, about namo etc.. the NAMO animation keeps repeating itself.... WHICH IS DISTRACTING and annoying!

I Would prefer a site with better drop downs that you can click through easily - this site looks crowded, I can get lost here.

I Bad use of space considering the advancement of technology and browsers.

Above: Description of another product.

Below:Second tab on the menu which lists all the stores namo is available at in various cities in India. On all the text pages, there is too much text along with the animation on the left. Which is not very appeal-ing and is very distracting.

3. Ideation

37 |

Above: The third link on the menu. Page giving a brief about the team behind Namo. The flash animation is missing. The flash animation (when working) is re-

peated on every static page and becomes monotonous

Below: The fourth tab is of the copyright. I feel this is highly unnecessary as there is a copyright text at the bottom of the page throughout the site

3. Id

eatio

n

| 38

After a series of Q&A sessions with the client and receiving feedback re-garding the old website, I sat down to brainstorm.

During all these discussions, I kept jotting down keywords which I thought described Namo or would be of use to develop concepts for the designs.

First I figured out every possible con-notation I could to the word Namo. Namo, the word as well as the brand, so obviously the characteristics of

the product as well.The Namo logo has an inverted Lotus in it. I heard about why and how the Lotus became a part of the identity and wanted to take lotus as a part of my inspiration for the look and feel of the website. Again I did a brainstorming on Lotus and thought of how I could use it in my design. Namo’s color was a ‘just by chance decision’, since in India red is asso-ciated highly with being a religious colour and hence an INDIAN colour as well. So that was the 3rd brain-storm I did.

Above and right: Initial keywords, which

led to brainstorming.

Right: These were concepts/thoughts

coming into the mind when thinking

about the look and feel of the website.

Below: Initial concept of content struc-

ture - to keep it as upfront as possible.

3c. Brainstorming

3. Ideation

39 |

KeywordsIndian, devotional, traditional, home, ethnicity, wellness, fes-tive, gifts, simple, clean

KeywordsIndian, purity, spotless, femi-nine, divinity, beauty, wealth, charm,

KeywordsIndian, attractive, spirit, strong, religious, positivity, emotional, celebration

World clouds after brainstorming on

Namo, Lotus and Red.

3. Id

eatio

n

| 40

3d. Initial Mood Board

devotion

At a very early stage i tried to understand and devop an understanding towards the mood that the Namo product’s can create. I wasnted to some-how integrate this mood into the website. Then I had a question in mind to which i found answers too.

Do pretty graphics matter??

What are the essential graphic elements?

I To identify a website or service (e.g., company logo, corporate fonts and colors, etc.);

I To aid and improve navigation (e.g., icons, buttons, menus, etc.); I To visualize important concepts (e.g., illustrations, diagrams, graphs, etc.); I To visually prioritize the elements of a page (e.g., page header, primary

content, secondary content, etc.); I To create continuity and familiarity from page to page (i.e., to create a

seamless experience); and I To heighten emotional appeal.

3. Ideation

41 |

3e. User ResearchWe are experiencing today the co-evolution of two distinct approaches to human-centered design research in practice: research that informs the design development process and research that inspires the design development process. Research that informs the design development process has been evolving for many years and is by now well established.

At the time of ideation, I was working on other projects as well. Very little focus was on the user or any kind of user research that would prove useful during this stage in the process. I initially spent a minimal amount of time on synthesizing my notes on users and the different categories the content could be divided into.When I discussed this with my guide, Rupesh Vyas, he told me that user research would be the most important part of my project and I must stress on it. He gave me a copy of IDEO method cards to explain to me various directions I could take to achieve a good understanding of my users. User research, he said was important because my product (website) was not for myself or for one person, but a person seeing the brand, its products, its information through me. So to design something, I needed to know who will be viewing it. Since, in the end, usable designs are more enjoyable, and generate feelings of accomplishment and satisfaction for those who use them. We all regularly engage with designed artefacts; those we love, we love, and those we hate, we hate. When it comes to defining the quality of our experience, the responsibility is on the designer.We bear in mind that the object being worked on is going to be ridden in, sat upon, looked at, talked into, activated, operated, or in some other way used by people individually or en masse.

Design ThinkingDesign challenges are inherently complex and deserving of more than a step-by-step plan in order to resolve emerging nuances and provide pathways to implementation.

Because design is messy and non-linear, each project we do is bespoke. We customize it for the challenge at hand. The scoping of the project plan is when our approach starts to take shape, and where our partnership with you begins.

We refer to our overall approach as “design thinking”: a means of problem solving that uses design methodologies to tap into a deep reservoir of opportunity. These methods include observa-tion, prototyping, building, and storytelling, and can be applied by a wide range of people to a breadth of organizational challenges.

An inherently shared approach, design thinking brings together people from different disciplines to effectively explore new ide-as—ideas that are more human-centered, that are better able to be executed, and that generate valuable new outcomes.

Design thinking also enables us to collectively tackle problems and ideas that are more complex than the lone designer can im-agine: inaccessible healthcare, billions of people living on a few dollars a day, energy usage outpacing the planet’s ability to sup-port it, education systems that fail students, and beyond. These problems all have people at their heart. They require a collabora-tive, human-centered, iterative, and practical approach to finding the best ideas and ultimate solutions. Design thinking is just such an approach to innovation.

When the point of contact between the product and the people becomes a point of friction, then the designer has failed. On the other hand, if people are made safer, more comfortable, more eager to purchase, more efficient—or just plain happier—by contact with the product, then the designer has succeeded.

Usable designs cannot be divined, or derived from our own experiences. Website design discussions often revolve around the preferences of the people in the room—a group that usually isn’t representative

of the target audience. Design decisions that arise out of this type of internal discussion are unlikely to lead to websites that satisfy users and inspire those nice loyalty behaviours. As designers, we need to look outward, to the goals, preferences, and behaviours of our target users, in order to create sites that make them—and thereby us—successful. Which is what I realised after I conducted informal surveys, and created personas.

3. Id

eatio

n

| 42

IDEO Method Cards

It is a collection of 51 cards repre-senting diverse ways that design teams can understand the people they are designing for. They are used to make a number of different meth-ods accessible to all members of a design team, to explain how and when the methods are best used, and to demonstrate how they have been applied to real design projects.

IDEO’s human factors specialists conceived the deck as a design re-search tool for its staff and clients, to be used by researchers, design-ers, and engineers to evaluate and select the empathic research meth-ods that best inform specific design initiatives.

The tool can be used in various ways—sorted, browsed, searched, spread out, pinned up—as both information and inspiration to hu-man-centered design teams and individuals at various stages to support planning and execution of design programs. Inspired by play-ing cards, the cards are classified as four suits—Ask, Watch, Learn, Try—that define the types of activi-ties involved in using each method.

“Design thinking is an ap-proach that uses the design-er’s sensibility and methods for problem solving to meet people’s needs in a techno-logically feasible and com-mercially viable way. In other words, design thinking is human-centered innovation.” —Tim Brown

BUISINESS(VIABILITY)

TECHNOLOGY(FEASIBILITY)

PEOPLE(DESIRABILITY)

Emotional Innovation-Brands-Relationships-Marketing

Functional Innovation

DESIGNTHINKING

ProcessInnovation

ExperienceInnovation

Each approach is illustrated by a real-life example of how the method was applied to a specific project. As new methods are developed all the time, the deck will grow and evolve over time.

What does “user” mean today?

A newer approach is emerging in which we invite the people we serve through design to participate with us in the actual designing. We are now beginning to think of people as participants in the design proc-ess, as adapters of the designed ar-tefact or even as co- creators, i.e., equal in stature and possessing of unique and relevant expertise. At the top of the “hill”, designers become interpreters of people’s needs and dreams and not just the creators of artefacts.

Left: A diagram showing how design

thinking can lead to not just a solution,

but solutions at every step.

customer

consumer

user

participant

adapter

co-creator

1980’s 1990’s 2000’s

The figure below shows the lan-guage we have been using to talk about the people we are serving. During the 1970’s and 1980’s we called them “customers” and “con-sumers”. This timing coincides with the heyday of the market-driven era. A user-centered phase began in the late 1980’s and is today continuing to drive designing. In this phase we are more likely to refer to the people as “users” or “end-users”.

-Elizabeth B.-N. Sanders

Changes in the way we think about people.

3. Ideation

43 |

Some Ideo Method Cards, which I thought were of good use to me. My aunt has a

store in Delhi, where Namo is being stocked so I had an advantage of using these

tools. Though most of it is mere observation, I documented such observations in

the personas I built. I found that personas were a good combination of all these

tools.

3. Id

eatio

n

| 44

After informal surveys and interviews, I cumulated some strong characteristics of people and created a few personas so as to cover the mind sets of a larger section of people at a broader level. The main purpose of this exercise was to make this product more useful, desirable, accessible and credible (refer to the honeycomb below). Since I’m looking at achieving this through the web medium, my questions were mostly web centric.

Informal questions like - I What is usually the purpose of us-

ing the Internet (Apart from Face-book)

I Have you ever bought tickets on-line? (MOVIES /FLIGHT/ RAIL)

I What do you think about the con-cept of e-ticketing?

I Have you ever e-shopped? What do you think about the concept of e-shopping?

I Which site did you shop on? What did you buy? Why did you but it online?

I Was the site easy to use? Any good/bad experience using the website? How could it be better?

I Did you have any apprehensions using your credit card? Would you prefer using your credit card online or cash on delivery? Why?

I Have you ever shopped any home décor product online? I Would you buy such a product online if

you haven’t? If NO, reason?

After interviewing, I compiled all of the behavioural variables, i.e., ways in which interviewee behaviour differed. Most variables can be represented as ranges with two ends. In an online shopping

domain, for example, you might have variables such as frequency of shopping, degree of enjoyment, and price vs. service orientation. There may also be demographic variables that seem to affect behaviour, such as age or technical skill. Behavioural variables have far more impact on the design. After shadowing, making hypothetical scenarios, interviewing; I grouped people who clump together across multiple variables. When I found a set of people clustering across six or eight variables, I found a major behaviour pattern that helped me form the basis of a persona.

3. Ideation

45 |

PeRSONASBuilding the product on the best foundationThe whole point of creating personas is to get past our personal opinions and presuppositions to understand what users truly need. If we invent fictitious model users and call them personas, we’ll just have the same old problems with the development process packaged up in a new way. If you truly want to build a better product, create your personas based on real data, and use them in conjunction with business goals and good design principles to guide your solutions.

Using “personas” forces us to think carefully about who our customer is for each product — what they need and want and how they’ll use it. I’ve come up with a few personas, and each one has a name and personality.Personas are archetypal representations of audience segments, or user types, which describe user characteristics that lead to different collections of needs and behaviours. We build up each archetype where the characteristics of users overlap.

According to Alan Cooper,“The persona is a powerful, multipurpose design tool that helps overcome several problems that currently plague the development of digital products.” Cooper’s process of talking with your customers — or potential customers — then examining and distilling their needs and habits into understandable individual characters — personas — is a great way to help design better products and services. Even the scaled-down version of the process that we use in my business has already proven immensely beneficial.

Personas help designers: I Determine what a product should do and how it should behave. I Communicate with stakeholders, developers, and other designers. I Build consensus and commitment to the design. I Measure the design’s effectiveness. I Contribute to other product-related efforts such as marketing and sales

plans.”

Using the right approach

Personas are based primarily on ethnographic user data. Ethnographic techniques are valuable because they assume that an interview subject’s attitudes and behaviours are so habitual as to be unconscious. Rather than asking users what they want, it is more effective to focus on what users do, what frustrates them, and what gives them satisfaction. By combining interviewing with direct observation—preferably in the actual usage context—you can get a lot of data very quickly. Observation also helps minimize dependence on users’ self-reported behaviour, which is often inaccurate.

A dozen hour-long interviews are usually sufficient for defining a simple consumer product, though it can take several dozen for a complex enterprise application. You’ll know you can stop interviewing when you can predict how each user will respond; this means patterns are beginning to emerge. If you have the time and budget, you can verify your findings with quantitative surveys or other techniques, but these cannot replace direct observation.

“The persona is a powerful, multipurpose design tool that helps overcome several problems that currently plague the development of digital products.” -Alan Cooper

“Personas” forces us to think carefully about who our customer is for each product — what they need and want and how they’ll use it.

Rather than asking users what they want, it is more effective to focus on what users do, what frustrates them, and what gives them satisfaction.

3. Id

eatio

n

| 46

Personal Opinion on Personas

When my guide, Rupesh Vyas intro-

duced me to the concept of Personas,

I wasn’t very clear about the idea and

considered it pretty useless and con-

tinued to do the user study in my own

way. Once I did do an informal study,

I realised I had to put it all together in

some way. Then’s when I realised that

personas were the best way to put

it together. I did study different users

from different fields and combined the

similar ones to create (semi) hypotheti-

cal personas.

I read a lot about personas after the

discussions I had with Rupesh and was

surprised at that time to see that it is

considered a serious tool.

But after using them I do agree that it

simplifies things for you. The personas

I created, have helped me understand

the usability, possibility and desirability

of the product. I could not put in certain

points as I could not understand how

to put them across, certain intangible

feelings. But more or less I think I made

a comprehensive attempt.

Before making the personas, I made

certain assumptions regarding the

product from different points of view,

The producer, the consumer and the

distributor. These notes were based on

actual talks with the individuals, some

observations and general assumptions.

Pre Persona Notes

USP’s (Unique selling proposition) of the product

From the producer I Clean, simple, smart product I fits well in the Indian context due to devotional aspects, hence under-

stood well. I Ideal for gifting, small in size, lightweight with good packaging. I Presentable, good quality, decently priced I The product falls in the category of Home Decor / Accessories I 5-6 year old product line with no advertising or PR I Stocking in multibrand stores, hotels and hold regular exhibitions I Initially no direct competition. Started with only devotional products like

diyas and thalis etc. Slowly broadened the line to candle holders, vases and other home decor products.

I Might expand further into furniture, garments etc. I Wants to think global and go international.

From a Distributor I Different approach to devotional products I Simple yet smart product. Appeals to the modern buyer. I Works well for personal as well as corporate gifting I Compact packaging, easy to carry abroad as an Indian souvenir I Not a vast variety of products (like Magppie) Therefore gets associated

with only one kind of product. Maintains exclusivity. I Priced reasonably and is a good quality product, hence giftable, pick-

able and stockable. I Understood well by Indians as well as expats, but obviously some have

unconventional uses of the products based on their preference.

From a Consumer I Different than usual devotional items. Not typical ‘Mandir Material’ I Good looking, decorative, pretty, reasonable I Great for gifting. Price rage fits the ‘gift budget’ I Light weight makes it easy to carry , specially abroad. I Adds a personal touch.

Opportunity Mapping

Insight into the dynamics of the community comes from generalization – seeing the forest from the trees. A Persona represents a state-of-mind for a consumer and is characterized by the cause of the behaviour as opposed to the behaviour itself. Persona analysis is the causal analog of ‘Psychographic’ analysis used in Market Research.

Opportunity Mapping takes the individual community member profiles and discovers the patterns, clusters and distinctions that define the different per-sonas. Over the course of many engagements, it is possible to build a picture of the many diverse preferences regarding the innovation space. The opportunity mapping process identifies the needs and desires most representative of the full array of desired outcomes and experiences. The selected items are included in the persona reaction model to evaluate can-didate solutions.

3. Ideation

47 |

PeRSONAS

I Pankaj Verma - Client, owner of namo

I kaVita ShaStri - houSewife

I anuPama mallik - it ProfeSional

I DeePak Chawla - Pr exeCutiVe

I Valerie BranDt - exPat interior DeSigner

The personas are built on actual characteristics of various people. Each persona is a combination of inferences from a few people to cover a larger section of user.

3. Id

eatio

n

| 48

Pankaj VermaOwner, producer of Namo Design, along with wife.

Graduated from the National Institute of Design, Ahmedabad, as an Industrial Designer. For nearly two decades, has worked on a multitude of projects in the areas of furniture design and turnkey projects for Domestic, Retail and Commercial Offices, in the area of Interior Design.

After having spent nearly two decades honing their skills in the fields of product, interior and graphic design, Pankaj and his wife decided to create something close to their hearts and closer to home. A deep-seated interest in Indian culture and traditions sparked an idea and Namo was born. Namo is according to them a celebration of Indian lifestyles, which is a fascinating blend of traditional and modern aspects in everyday life.

His product range includes devotional items like Diyas & Decorative T-light Holders, Candle holders, Incense Stick Holders & Bowls, Puja Thalis & Display Platters, and Mandirs & Shrines etc. Most of the products have a devotional essence to it, targeting the religious sentiments of people. The product range gradually diversified from a devotional product line to a more contemporary home décor product line which included candle holders, vases, display platters etc. For the coming festive season, he plans to add more range into the existing product line.

His sales are primarily through exhibitions at regular intervals at various places in various cities. In the recent years, the brand has made place in some lifestyle & home accessories stores all over the country and also in gift shops in posh hotels. Since he has no retail outlet of his own, he wants to expand the presence and accessibility of his product to cater a wider audience.

The audience he creates for is the modern urban household (not necessarily Indian). The most probable buyer according to him is in the age group of 35+. The product is not a necessity, a person doesn’t miss something if the product doesn’t exist in their lives. This product is to make them feel good, pamper themselves and feel satisfied about using a good product.

WHY?

A person above the age of 35, irrespective of men or women, is a person pretty much settled in life, married, with children not too young. Well aware about the happenings, travels, works, financially stable and secure and like to enjoy and relax on a weekend. A person who socializes with friends and attends family social gatherings occasionally. Might be hosting dinners or get togethers at home, and but obviously would have to decorate the house to create the right mood and make sure the house looks good. Such a person, would take out time to think of what to place in the shelf of the living room, or feels the need to change the diyas or incense holder in the mandir or office. Since there is enough socializing in their lives, the trend of today demands small gifting to be done, so there would be a need to take a token to such occasions. If working, a person by that age would be having enough business/ professional contacts and/or a corporate circle, who again need to be obliged or gratified, especially on festivals and occasions.

3. Ideation

49 |

So in such a lifestyle scenario, the namo products could fit in all their requirements. Whether for their own home décor, a personal gift on someone’s anniversary or house warming, corporate gifting to clients on Diwali or New Year’s, or just for personal religious purpose.

Why it would fit in this scenario? USP’s of the product!

I CONTEMPORARY product. Clean, simple, smart, stylish DESIGNED product. A good quality product.

I Relatively NEW looking product I Has an emotional value amongst Indians due to the devotional aspect,

hence it is understood well. I Ideal for gifting due to lightweight, compact and presentable packaging. I Products of every price range Rs. 300 – Rs 30,000.

Because of these reasons, the products work very well for personal and corporate gifting. So hence, keeping that as a plus point, he wants to move forward in this direction.

GOALsSince the product is not available to physically see at a number of places, there needs to be a platform where it is possible. So to get to the people, and make them aware about the presence of the brand.Gifting is turning out to be the forte of the product, hence the product should be promoted as a gift item.Would want the products to be known internationally. The name and the products should speak out INDIAN. It should be known as an INDIAN brand. With the festive season coming up, people need to be updated about the new products .A portal is needed where selling becomes first hand and not through stores which would turn out to be easier as well.

sOLUTIONInternet has become “the” medium of communication and technology in the Indian as well as international context over the past decade or so. Increased exposure to technology increases the probability of developing favorable attitudes towards new shopping channels. So presence of the web can be a good solution so as to reach the goals desired by him.

3. Id

eatio

n

| 50

Anupama Mallik 45 yearsIT professional

Married, 2 children (14 and 15 years old in school)Lives in a posh colony with good neighbourhoodHusband- businessman travels a lot.In-laws live in the same house but on different floor

DAILY ROUTINELeaves for work after sending children to school and after finishing all household work. Does puja after bath without fail. Drives her own car and is independent. Flexible working days, so does to need to go daily. On return sits with children and decides for dinner.

sOCIAL FRONTLikes to watch the latest movies and interested in plays and exhibitions. Fond of live music and performances. Has a good social circle and goes out for social gatherings and parties. Also holds dinners at occasions for family and friends. Has maintained a good modern lifestyle and maintains her house well.

PERsONAL FRONTWorking. Is very particular about religious rituals. Stern believer of Sai Baba, visits his temple every Thursday. Keeps a fast on Mondays and Tuesdays. Keeps her self busy either with work or socially. Doesn’t like to go shopping but would attends fairs and exhibition to be aware. Not an impulsive compulsive shopper.

TECHNO FRONTWell versed with the computer and Internet. Uses for emailing, surfing and at times shopping. Does not doubt about using her credit card online for buying movie or flight tickets. “ These sites can be trusted. Amazon.com, ebay.com, indiatimes.com are big names, which can be trusted and cannot go wrong. But will buy only a tried and tested product from a tried, tested and trusted website.”If has seen a product, liked it, would definitely like to re buy. But time constraints or due to some other engagements might not happen to go out hunting for it. Should there be an easier way to get a tried product on call or online or home delivered, will make it more convenient.

OPPORTUNITIEs

I Husband businessman, travels a lot abroad and in India, Requires gifting I Does puja I Good social circle – family and friends; dinners and parties I Good terms with colleagues I Good modern lifestyle and maintains her house well. I Doesn’t like to go shopping; Not an impulsive compulsive shopper. I Well versed with the computer and Internet and e-shops

3. Ideation

51 |

Kavita Shastri 53 YearsHousewife

Husband – Executive in XYZ co.Son- Lawyer, recently marriedDaughter – works in a bank, soon to marry.Daughter in law – fashion designer, owns a boutique

Married at the age of 21, lives with husband, son & daughter-in-law, daughter and mother in law. Well to do family with 4 people earning.

A REGULAR DAYGoes for a walk, and makes tea and breakfast for family. Packs lunch for Husband and children. Once they go indulges in getting the house cleaned. Mother-in-law very religious so attends kirtans and satsangs almost daily till evening. Takes and evening nap, wakes up and does yoga. Meditates half an hour daily and practices Reiki. Sits with family once they are back. Discussions over tea. Plans and prepares for dinner. Early sleeper.

sOCIAL FRONTLives in a big modern constructed house. In the outskirts of the city. Has 2 servants and a helper. Not too many neighbours around. Very limited socializing amongst the neighbours. Not a big social circle, but close to family. Son recently got married, so has a new set of extended family, and likes to keep in touch with family. There has been more lunches/dinners and meetings since then. Daughter engaged and is soon to be married so therefore another new set of family as well. More acquaintances mean more meetings. Wedding preparations are keeping her busy and in touch with people.

PERsONAL FRONTSpiritually inclined. Wasn’t very tech savvy but had to learn when children went abroad to study. Likes to watch TV and listen to music. Primary source of entertainment. Does not drive, but is provided with a car and driver whenever needed. Since stays in the outskirts, not very convenient to keep travelling to the main city markets very often. Certain products are not available in the local markets around so have to make special arrangements to come to the city and do all work at once along with meeting people. Usually with the mind-set of doing everything at once, tends to miss on certain due to less time or unavailability of stock. So shops impulsively and in hurry, since doesn’t know when her next trip to the city would be.

OPPORTUNITIEs

I Mother-in-law very religious I Husband – Executive in XYZ co., travels a lot and requires a lot of

corporate gifting I Spiritually inclined; Does yoga, Meditates; practices Reiki I Big modern house, being a housewife, likes to maintain it well as a

hobby. I Son recently got married, increase in socializing, Daughter soon to be

married, wedding gifts/token gifting I Stays in the outskirts, not very convenient to keep travelling to the main

city markets; Shops impulsively and in hurry

3. Id

eatio

n

| 52

Deepak Chawla 35 Years,Unmarried

PR manager ABC hotel/com/org

Lives in a flat in Gurgaon with parents, younger sister and brother. Brother studies abroad. Father runs an export house, so also travels a lot. Mother is a housewife.

Very erratic working hours and diversified kind of jobs as a PR head. No time for self. A lot of travelling. Non stop communication with all kind of people. Lot of meetings, sourcing gifts and scrutinizing vendors and shops. Job is to take good care of regular clients and build new ones, to maintain good relations with all so that a client remains a client and a contacts becomes a client.

Very tiring and tight job. Requires lot of running around. No holiday or leisure time. To de-stress does meditation for 15 minutes a day on return after bath.

OPPORTUNITIEs

I A lot of travelling- token gifting I Lot of meetings, sourcing gifts and scrutinizing vendors and time poor. I Take good care of regular clients- gifting I Does meditation – peaceful atmosphere

Valerie Brandt 30 years Married

Interior Furnishing Designer on a freelance basis

Married to a German Official, posted in IndiaMarried 2 years ago, husband posted to India a year ago. Have been given accommodation by the German embassy. Has a little German friend circle. Loves travelling. Since husband has a tight job, usually travels alone. Has no family or old friends in India. Husband travels primarily to Germany or elsewhere on official trips.Most of the clients are expats. She likes to maintain friendly relations with clients and shops around with them for their house.

PERsONAL FRONTA very restless person. Needs to be occupied or feels low. Talkative. Makes friends easily. Organizes official and personal dinners at home. As an interior designer, her home comes first for her. Very particular about her own home décor. Keeps in touch with relatives and friends back home through the Internet.

sOCIAL FRONTLikes meeting new people, building contacts and prospective clients. Attends live jazz concerts and expat parties. Since the expat community is small they are closely knit. Goes for fairs and exhibitions. Keeps herself updated regarding her field.

3. Ideation

53 |

45%

30%

15%

10%

HOUSEWIVES

WORKING WOMEN

PR EXECUTIVES

EXPAT DESIGNERS

OPPORTUNITIEs

I Interior Furnishing Designer I Has a little German friend circle I Husband travels primarily to Germany or elsewhere on official trips.;

taking back an INDIAN gift I She likes to maintain friendly relations with everyone specially clients. I Organizes official and personal dinners at home ; and likes to decorate

her house for the occasion. I Her home comes first for her, she keeps adding something new now

and then.

OTHER GENERAL OPPORTUNITIEs

I Spas, aromatherapy centres, meditation and yoga centres are on the sprawl, the product can fit in these spaces well.

I Products like incense holder, t-light & candle holders and aroma diffusers enhance relaxation, which has become a new fad with all the tension in life. People are using yoga, reiki and other spiritual practices to relive tension and de-stress.

I Gifting has become almost mandatory for every occasion. Even for dinners at home, token gifting is expected. Since Indians have started socialising more, there are all kind of social groups one has, and one sets aside a particular budget for gifting of each group and according to the occasion. Birthdays, anniversaries, weddings, housewarming, baby showers to corporate dinners/lunches, official meetings and tours, dinners/lunches/parties at homes are some examples.

I Being an INDIAN product, suitable to give as a souvenir/gift to people abroad.

I Good looking product adds to the character of home decor and for romantic experience.

I The modern Indian/human deals with a lot of stress due to work and other various troubles in life. Under such circumstances one need some reliance on someone or something. At this time God seems to be the safest and most reliable power/option. Hence the religious sentiments in people is growing opposed to the myth of it dying in people. Most Indian households and offices have a PUJA place. A fancier product used for puja will not affect their religious emotions, but might make them feel a little good about using something good to offer to their God.

3. Id

eatio

n

| 54

User Hierarchy

New User

Home User

Gifting

Self

Business User

Corporates

Distributors

Interior Designers

Hotels / Spas

From religious spaces (Mandirs/Churches)

Career

Career seekers in the brand

People wanting to contributeto the brand

Regular visitor/customer

User Hierarchy

I had very little critical feedback at this stage, since most of the time I could only hypothesize and talk to people around me who were convenient to approach. I did talk to people visiting malls, and people involved in the dis-tributorship of Namo. I took the clients word for it, and listened to their opin-ions on their competition and how they wanted to differentiate themselves. Looking at it from more than just two viewpoints, ie, that of the client and designer, would have very useful. The more practical side to this argument was that we were only making a website, and since the client wanted a par-ticular, product-based site, that is what I was going to give them. There was no need for user research or anything heavy-handed like that. There was no time or money to put into those avenues.

The content was divided into three main parts based on the different kinds of users that accessed the site. First off, the types of people in India that accessed the Internet regularly would help typify and target our audience. Second, our users could be divided into those that were interested in buy-ing, decorating and re-furbishing their homes or in items related to that de-partment, and those that were interested in interiors. Thirdly, we would add the bulk orders that would come from hotels, spas, corporates and specific orders that would come to architects and designers. The average and most common hit was that of a home or working user. However, the specific users also become important because of their profession, which implies that would have greater orders.

One of the main goals for the site was to attract the corporates so that Namo would become a known brand for corporate gifting.

Home Use Gifting

Purpose of purchase for a Home User

3. Ideation

55 |

Initial sketches for look and feel, the decision of having vertical or hori-zontal navigation. The idea was to retain the whiteness, but give it a clean futuristic look. I still wanted to vary with options with coloured background, to bring out the spirit of festivities and celebration. Just to get the clarity from the client, I made two initial options, one using red as the concept and the other using lotus,one using horizontal navigation and the other vertical. This exercise was done just to clarify what was that the client would want and what will work.

3f. Initial ConceptsHome page

3. Id

eatio

n

| 56

1st Concept - RED

Since red was a very important graphic element for the brand namo, I tried to build a design with it. I used a horizontal navigation with drop down menus, so that everything is acccesible from the menu bar itself. I tried an option with the logo on the left and one with it on the right. For

quick links, I made an open menu as the footer. The home page contained a good picture of the product in use, so that in the first instance the viewer knows what to expect from the brand. A brief write for Namo to give an introductory description of the brand and product. The red

bands on the side would be the background which would change in size according to screen resolutions and variation in browsers Since they were looking too stark I added white hand sketched lotuses.

3. Ideation

57 |

The first link opens to the product range drop down on the menu. On selecting a range, thumbnails of the products appear. The entire product list also opens up on the right. On clicking a particular product thumb-nail it would pop out into an enlarged image of the same with its details. The menu link and footer links remain live at all times.

Feedback from client I The red bars on the side and menu bar are forming a bounding box. The

design is looking restrictive I Logo should always be on the left. I The product showcase is looking similar to existing website, so is the

menu bar. I Would like to retain red as an important element in the design but just

accents. I The idea of the enlarged image popping up is a good one and should

continue working on it.

3. Id

eatio

n

| 58

Concept 2 : Origami Lotus

Since Namo’s inspiration lies in the lotus, I thought it would be a good idea to have a lotus element in the design as well. I did not want to use a direct representation of the lotus. ‘Namo, is a brand that makes home accessories in stainless steel inspired by nature and geometry.’ Based on this information I started searching for the lotus in other materials apart from metal. I found the origami lotus very appealing since it had a similar form as the lotus form of Namo’s padma range and also symbolised geometry.

I tried a vertical menu here which would open horizontally. The first link opens to the product range side links. On selecting a range, thumb-nails of the products appear. On clicking a particular product thumb-nail it would pop out into an enlarged image of the same with its details.

3. Ideation

59 |

Feedback from Client

This design had a lot of harsh reactions.

I Get rid of the pink. I The thumbnails look similar to existing website. I ORIGAMI HAS VERY STRONG JAPANESE ASSOCIATION I Vertical menu is not very appealing I Logo should be on the left I The clients felt that I was getting too stuck to the literal meaning of Namo

and it’s inspiration which was making it difficult for me to think beyond the box. They told me to start afresh, and filtering information I know and in case I need to have more discussion, or need more information I should go ahead and clear out every doubt I had.

What I thought after my first concept presentation

After this presentation we realised there’s a lot that needed to be dis-cussed. I needed to know the history of Namo and its development as a brand as I was getting stuck just a bit of information I had. I was getting too stuck with the lotus and wasn’t being able to broaden my mind-set. Plus even visually the first 2 designs weren’t working for the designs. The client gave me no limitation initially in terms of colours, interface or interaction and asked me to make options of anything I wish to, irrespective of anything.So I made about 5 varied options, each totally different from each other to chose one direction. In the next section you will find the typical pages of the these options. By the end of this chapter I’d have finalised my direction.

“I was getting too stuck with the lotus and wasn’t being able to broaden my mindset.”

3. Id

eatio

n

| 60

Code Product Name

Padma Range

1 PTB330 Padma Thali Big

2 PTS235 Padma Thali Small

3 PD85 Padma Diya

4 PDB85 Padma Diya Brass

5 PDC85 Padma Diya Copper

6 PDH85 Padma Diya + Handle

7 PDHB85 Padma Diya + Handle Brass

8 PDHC85 Padma Diya + Handle Copper

9 PAH85 Padma Agarbatti Holder SS

10 PAHB Padma Agarbatti Holder Brass

11 PAHC Padma Agarbatti Holder Copper

12 PPDH Phool Diya Hanging (set of 5 pcs)

13 PPDHKPadma Phool Diya Hanging with Hook (Set of 5)

14 PP120 Padma Pancha Plate

15 PT135 Padma Tri Plate

16 PPF350 Padma Photo frame

17 PBS Padma Brahma Small

18 PAG Padma Asan puja ghar

19 PDM4 Padma Wall disc puja ghar 15” Dia

20 PSGS Padma Singhasan

PPH Padma Phool Hook

Vishwa Range

1 VID Vishwa Diya

2 VIAH Vishwa Agarbatti holder

3 VICH1 Vishwa Candle Holder

Vanya Range

1 VDS Vanya Diya / T lite holder Small

2 VAS Vanya Agarbatti Small

3 VDB Vanya Diya / T lite holder Big

4 VAD Vanya arti Diya

5 VTC Vanya Tulip Candle holder

Products List as given by the client

Prior to setting up the first real struc-

ture for the content, I collected a large

amount of information, from lists of

products in the form of excel sheets,

to previous packaging artworks etc..

Several websites selling similar content

were also observed and compared.

Included here are excerpts from the ex-

cel sheets which helped me understand

as to what is the content that I have to

put into the website like. After seeing

these I knew I had to do a lot of content

organisation.

Most importantly, most of the infor-

mation about Namo as a brand was

received verbally and directly from the

client.

It is necessary to include this since it is

an important stage during the proc-

ess of the project, where some clarity

regarding the information to be dissemi-

nated was reached.

3. Ideation

61 |

Sitara Range

1 SD55 Sitara Diya

2 SK55 Sitara Kumkum

3 SAH55 Sitara Agarbatti

4 SL3 Sitara Lilly, (set of 3 pcs)

5 STC Sitara Trio, candle hold

Mandir Misc.

1 UAS Uday Asan

2 UASGM Uday Asan + Ganesh in Marble

3 NWG Nalini Wall Mounted Puja Ghar

4 NAS Nalini Asan Puja Ghar

5 AAS Aditya Asan

Décor Range

1 PCH2 Padma Candle Holder(set of 2 pcs)

2 PBS5 Padma Bail single 5” Candle

3 PBST5 Padma Bail single 5” T light holder

4 PBS6 Padma Bail single 6”

5 PBST6 Padma Bail single 6” T light holder

6 PBS56 Padma Bail Single 5”&6”(set of 2 pcs)

7 PBST56Padma Bail Single 5”&6”(set of 2 pcs)T light holder

8 PBD Padma Bail Double

9 PBT Padma Bail Triple

10 SCT Snowcris Tri

11 SCQ Snowcris Quad

New Designs

1 VA Vanya Aroma Diffuser

2 PAD Padma Aroma Diffuser

3 UAD Uttam Aroma Diffuser

4 CHA Chaman Aroma

5 CA Chaman Agarbatti

6 CM40 Chakra Mandir 40

7 PRD Panch Ratna Diya

8 ANY4 Ananya 4

9 ANY6 Ananya 6

10 ANY8 Ananya 8

11 CKSW Chowki Small White

12 CKSB Chowki Small Black

13 CKBW Chowki Big White

3. Id

eatio

n

| 62

14 CKBB Chowki Big Black

15 MM15 Mor Mandir

16 VSBV Vismaya Bud Vase

17 VSIV Vismaya In Vase

18 VSFV Vismaya Flower Vase

19 VSTB Vismaya T Light Bouquet

Uttam Range

1 UD Uttam Diya

2 UA Uttam Agarbatti Holder

Gift Set

1 PTDAS Padma Thali Diya, Agarbatti Set

2 PDASS Padma Diya, Agarbatti Set

3 PDABS Padma Diya, Agarbatti BrassSet

4 PDACS Padma Diya, Agarbatti CopperSet

5 PPTLS Padma Phool T light (Set of Br & Cop)

6 PTDABS Patti Diya,Agarbati Brass Set

7 PTDACS Patti Diya,Agarbati Copper Set

8 VDAS Vanya Diya, Agarbatti Set

9 VTLS Vanya T Light Holder Set

10 VIDAS Vishwa Diya Agarbatti Set

11 VICHS2 Vishwa candle Holder (Set of 2)

12 SDAKS Sitara Set

13 UDAS Uttam Diya-Agarbati set

14 SPS Sri Paduka

15 SPB Sri Paduka Br

16 PTPS Padma Trio Plate set of 3

17 PPPS Padma Pancha Plate set of 3

CANDLES

1 CAN 6 Ananya Candle Normal - Pack of 6

2 CAN 8 Ananya Candle Normal - Pack of 8

3 ACV 6Ananya Candle Vanilla Fragrance - Pack of 6

4 ACV 8Ananya Candle Vanilla Fragrance - Pack of 8

5 ACJ 6Ananya Candle Jasmine Fragrance - Pack of 6

6 ACJ 8Ananya Candle Jasmine Fragrance - Pack of 8

7 TC1 Taper Candle Single

8 TC2 Taper Candle Pair

3. Ideation

63 |

Diyas Misc. Sets Candle Holders

Padma Diya Set of 2 Sitara Diyas Vishwa candle holder

Padma Diya with handle Sitara Diya + Sitara kumkum bowl Padma candle holder

Padma Phool Diya Sitara Diya + Sitara Agarbatti Holder Snowcris Tri

Padma Phool Diya Hanging Sitara Diya + Sitara Agarbatti Holder +

Sitara Kumkum Bowl

Snowcris Quad

Padma Phool Aarti Diya

Padma Thali Set = Padma Diya with han-

dle + Padma agarbatti holder + Padma

Pancha Prashad plate + Padma Thali Big

Vanya Tulip Candle holder

Vanya Diya small Set of 2 Padma Diyas Padma Bail Candle holder (set of 2)

Vanya Diya big Padma Diya with handle + Padma kum-

kum bowl

Padma Bail Single candle holder

Vanya Aarti Diya Padma Diya with handle + Padma kum-

kum bowl + Padma agarbatti holder

Padma Bail double candle holder

Vishwa Diya Vanya Diya + Vanya Aarti Diya with

handle

Padma Bail triple candle holder

Sitara Diya Vishwa Diya + Vishwa Agarbatti Stand

Sitara Diya Hanging Set of 3 Padma Pancha Prashad Plates

Set of 3 Padma Tri Prashad Plates

Set of 3 Sitara Hanging Diyas

Set of 3 Padma Phool Hanging Diyas

Mandirs & Asans Agarbatti Holders & Prashad Bowls

Thalis

Uday Asan Padma Agarbatti Holder Padma Thali big

Nalini wall mounted Puja Ghar Padma Agarbatti Double Holder Padma Thali small

Nalini Asan Puja Ghar Padma Pancha Prashad Plate Leharen Thali big

Aditya Asan Padma Tri Prashad Plate Leharen Thali small

Padma Bhrahma Asan Padma Kumkum bowl

Padma Wall Mounted Puja Ghar Vishwa Agarbatti Holder

Padma Asan Puja Ghar Sitara kumkum bowl

Padma Disc Wall Mounted Puja Ghar Sitara Agarbatti

Padma Singhasan

3. Id

eatio

n

| 64

3g. explorationsAfter the first presentation and discussions that followed certain things got clearer. After going through their complete product list, I made certain notes of content division. On discussion with the client, they also approved of it.

It made sense to categorise the products range wise and function wise. Namo’s products belong to certain ranges according to their form, E.g. the Padma range is inspired by the lotus, the Vanya range is inspired by the leaf, the Sitara range by the star etc. Each range consists of products like diyas, candle holders, incense holders etc.

So it made sense to group all the similar kind of products according to their function as well. Also a person visiting the website for the first time, say to look for a diya, would not know which range to go to, would he find a diya in padma or vanya or sitara? So a category of Diyas would help him see diyas over all the ranges.

Also on consensus it was decided that a special link to ‘Home’ is not really required since the navigation bar is a constant element. By now, every Internet user is aware that the brand logo would probably be a link to the home page. It was also a de-sign decision to try attempt a 100% size website i.e. full page. Fills the entire space of the browser.

ProductsLOGO

By Range

By Function

Gifts

Available AtAbout Contact

Initial sketches of the following con-

cepts. Since the medium was the com-

puter most of the design and conceptu-

alizing processes happened on screen

using a software.

Consider it a drawback or a technologi-

cal boon in the 21st century, there’s no

turning back from here.

3. Ideation

65 |

Design Route 1

3. Id

eatio

n

| 66

I went ahead with a clean minimalistic look. Keeping the colour scheme lim-ited to white, grey and red. The header as the navigation menu, remained constant. Had 4 essential tabs of Creations, About, Available At and Con-tact. The home page had some moodshots of the products which would keep changing. The creations tab on click gave an option of by product, by range, by function and gifts & sets. The products were showcased as a horizontal scroll. On click product detail with range details would pop up. The product would have multiple shots as a slideshow so as to give more detail.

3. Ideation

67 |

Design Route 2

Keeping the look similar to design route 1; clean and minimalistic with a vertical navigation. I tried the thumbnail grid view for the products here, with all options above. On click the page is replaced by the product details with thumb-nails of different views. Somehow the grid concept wasn’t seeming too appealing as its very common and overdone.

3. Id

eatio

n

| 68

Design Route 3

In an attempt to indianize the design, I added an Indian orange texture background as a frame. Rest of the navigation was the same as the previous option. The idea of us-ing the hanging diya string for the navigation menu came about since this is their hottest selling product. This wasn’t really appreciated as it made the whole page look too busy and messy.

The first link opens to a grid of all the ranges. Sublinks open on the navi-gation menu and sub sublinks come over the grid.

Which leads to a grid of all the products in a range.

Product details page has an enlarged image of the product, with thumbnails of different views.

3. Ideation

69 |

Design Route 4

Trying to go Indian and Festive, I used a bold colour background with a contrasting foreground, then realised it was getting too rigid so gave it a softer look with some lotus scribbles. The home page opened to the logo, below which were the 4 main links. And under which was opened the first product range list. I decided to have them open at the first level itself so as to put it up-front for the viewer. I felt the need for a direct association of the brand with the product visually at the very first look of the site. On click on any link, a slight animation would move the 4 main links and the logo to the left and the secondary menu, of the products or range etc appears on the top. A list of thumbnails in the category along side a window showcasing the product and its de-tail pop up. Multiple im-ages of the product are shown as a slideshow.

3. Id

eatio

n

| 70

Design Route 5

This concept evolved from the keywords, Indian, festive, fun, bright. Using a vibrant background seemed to be get-ting the feel. The home page had a button for the menu and product range up-front as in the previous concept. Apart from the vibrance circles were a graphic element flowing in the design. On click on any link, a slight animation would move the main logo and menu button to the left and the secondary menu, of the products or range etc. appears on the top. A grid of thumbnails in the category along side a window showcasing the product and its detail pop up. Multiple images of the product are shown as a slideshow. The round menu button opened the 4 main links on click.

3. Ideation

71 |

Design Route 6

This concept’s not very far from the previous two, just had a more geometric and futuristic look to it. Personally this concept is very overdone in all possible Graphic Design avenues. But just wanted to try an option. In this everything is up-front right at the first level, which animates and moves away making space for the details to appear. Though the concept was appreciated, it had a very strong relation to Mukul Goyal’s website who can be called a competitor.

3. Id

eatio

n

| 72

Feedback and comments

Design Route 1

This was one of the concepts select-ed to be taken forward. The interface seemed to be working well in every term. Needed to try few more itera-tions with some graphic elements, as it seems too white. Also they wanted a vertical navigation option with the same layout. They appreci-ated the scroll and pop up interface. Instead of the scroll being there for the products they wanted it to be for the collections and function. For the product range they preferred to have thumbnails/tabs.

Design Route 2 & 3

They did want and option with vertical navigation but this was not what they were looking for. The Padma hang-ing diya for the menu made the design look messy. The grid concept wasn’t seeming too appealing either as its very common and overdone. The option with the orange background, though looked Indian, looked very down market. It some how was giving a very Hindu feel as well. There was supposed to be no religious connotation to anything on the site.

Design Route 4

Too jarring and very Diwali and ‘shaadi’ was the instant reaction to the design. With so much happening in the background, the product would lose it’s emphasis. They liked the idea of a slight animation happening, but wor-ried if that might make the user lose interest. Despite putting in all the information, there still seemed to be a lot of empty space, where the background would show and over power the content.

Design Route 5

Initially was found a little busy, but the whole look was very new and fresh. Again the concept of a slight animation was intrigu-ing. Somehow all the elements in the design were not match-ing. I was asked to have a constant language of circles and give it a try. Also was asked to remove the texture from behind. Here the grid thumbnails being in circles did not give usual grid look to it either.

Design route 6

‘MUKUL GOYAL’ - instant reaction. So the design was dropped there and then. Anyways the design wasn’t something out of the box.

3. Ideation

73 |

Further explorations on selected routes

Changes

Tried using the Namo Lotus as a bullet

for the navigation bar. Also used cutouts

instead of full images for the scroll.

Changes

Used a quarter circle and a half circle

(below) behind the logo. Following the

circle, used three dots as bullets.

Feed Back

The Namo lotus is used in the old

website also. Though the cutouts look

nice and clean, again there is too much

white space.

Feed Back

The red behind the logo was looking too

stark. The three dots looked nice irre-

spective of the quarter and semi circles.

Design Route 1

3. Id

eatio

n

| 74

ChangesUsed a full circle behind the logo. Also used cutouts instead of full images for the scroll and had names written verti-cal.

Changes

Used a full circle behind the logo. Used

a simple dot in hierarchy for the naviga-

tion menu, Which shifts according to the

link selected.

Feed BackA red circle is very Japanese. The verti-cal text gave it a very linear look. Still looking too white.

Feed Back

A red circle is very Japanese. The

vertical text gave it a very linear look.

The red dots did seem to deviate a bit

from the whiteness, But more can be

worked.

Some general observations and suggestions I The logo should be in red without anything behind it. I Remove any tagline from the logo. I The scroll is better with full images and also cuts the white space I A little more can be worked on the elements. I Product range should be tabs and not thumbnails

3. Ideation

75 |

Design Route 5

Changes

Removed the texture. Looks much

neater. Added a round frame for the

moodshot on the homepage, so as to

match the elements on the left.

Changes

For the product showcase also a round

frame was given. Unnecessary elements

were removed. The grid was removed

instead cutouts were used in a vertical

scroll menu.

Feed Back

Looks much cleaner. The round frame

for the moodshot matches the circle

element flowing through the design.

Feed Back

Looks much cleaner. The product is

showcased well and no distractions

around. The vertical menu somehow

isn’t too great.

Decision

The decision was made. The direction to be followed was Design Route 1. They wanted to see some options with graphical elements, keeping in mind the feedback, and one option with vertical navigation.

4. Design Visualization

4. D

esign V

isualization

77 |

Design Route 1

This chapter covers all the details of visualization, from the second stage of concept genera- tion and the fi-nal concept presentation to the ele-ments that make up the final design. Logo, type, color, form and the lay-out will be discussed as separate topics.

“Design Route 1” was chosen to be taken forward. “Design route 5“ was also termed interesting. What followed after that presentation was the main chunk of the project, consisting of the final look and feel of the website. The concept had to be drawn out clearly as a series of

screenshots so that we could get a final confirmation and make the beta site in time for the deadline.I have included some concept gen-era- tion that followed the feedback from the presentation. The feedback was varied from person to person but the main point was rejecting the other concepts since they wanted something different. I had under-stood that they expected an original design carried over from what they thought was very clean and modern. All notable visual explorations that lead to the final screenshots are in-cluded.

Complete navigation of Design Route1 (below)Home page has moodshots of the products. Page 2 leads to a scroll of collections.

Each collection has a popup with all the products as tabs. The selected product will

have a slideshow of the enlarged product. Similar will be the functions scroll which

would pop up to the thumbnails of products in the category. The gifts page would

be thumbnails of the products.

KEYWORDS

CLEAN

MINIMAL

FUNCTIONAL

SPACIOUS

MODERN

FUTURISTIC

Opposite page: series of screen shots

of a refined version of design route 1,

without adding any graphical element.

This is the horizontal navigation followed

by the vertical navigation.

4.

Des

ign

Vis

ualiz

atio

n

| 78

On popup, the 1st product in the range opens up. The scroll at the back dims.

4. D

esign V

isualization

79 |

Using buttons instead of thumbnails /images for products. Slide show shows different views of the product, including sug-gested usage Such use of buttons/tabs was exactly what the client was looking for. Navigation was 2-way, one from the scroll and one under the top menu. The selected link was demarkated.

Similar was the ‘by function scroll. On click , a pop up containing all the products in the category would show up as thumbnails with one selected. The selected product was showcased in the slide show as in the previous section.

4.

Des

ign

Vis

ualiz

atio

n

| 80

Vertical Navigation which opens horizontally. I included the product tabs under the product name in the vertical menu, which

would change on change of product or range. Inclusion of ‘previous’ and ‘next’ on the sides of the popup. The graphical element

here was the double lines. But the squares and rounded edges were clashing. I tried variations of adding a background.

4. D

esign V

isualization

81 |

Vertical Navigation which opens horizontally. The ‘function’ category would open into a popup with thumbnails of products in the

category. 2 options were made, one with a grid style, and one with a row of thumbnails. The row option seemed better.

Inferences on first show of vertical navigation

I Remove the red band on the side its too stark. I The previous and next product interface must be included. I The tabs look good and work well. I In the product category, single row with a slider looks cleaner, and the range information can be avoided. Minimal

text. Try avoiding the bounding box though. I The background looks good, but create the pattern with the Namo lotus.

Following are the final set of screen shots for the vertical navigation.

4.

Des

ign

Vis

ualiz

atio

n

| 82

4. D

esign V

isualization

83 |

4.

Des

ign

Vis

ualiz

atio

n

| 84

4. D

esign V

isualization

85 |

After seeing both the options, it was decided to go ahead with the horizontal navigation with certain inclusions.

I The pattern in the background looked good, and broke the white space without distracting the product.

I ‘Previous’ and ‘Next’ to be included when viewing a product in a range, but not in function since the thumbnails are already visible.

I Use only right alignment in everything. I Single row thumbnails for the function categories, with a horizontal slider. I The scrolls were to be automatic scrolling menus which move towards the

left as soon as you reach near the right edge.

I tried lots of variations with graphic elements and short down to two. 1. Using 2 dots like : how the appear infront of NAMO in devanagri “ nama :”2. A simple rectangular bar, gave a geometric and clean look.

Final design and navigation as sketched

out by the client for his understanding.

4.

Des

ign

Vis

ualiz

atio

n

| 86

The dots concept

4. D

esign V

isualization

87 |

4.

Des

ign

Vis

ualiz

atio

n

| 88

4. D

esign V

isualization

89 |

The bar concept

4.

Des

ign

Vis

ualiz

atio

n

| 90

4. D

esign V

isualization

91 |

Final Decision

Finally, the bar concept was decided. Not that the dots were not looking good, but as they did not want any Hindu/religious association it was re-jected. Also circular forms have been used quite a lot till last year. This years trend was minimal and linear. The bar, though a small element was flowing well in all the pages and gave a geometric and a modern look to the design. The pattern in the background, was given a gradient which became totally dim at the top. It rather gave a more textured look than a flat pattern. Still some refinements were suggested.

I The home page should be the accordion flash introduction I If a rollover effect can be incorporated in the scroll, like a genie effect.

When on rollover the selected image enlarges and the rest dim out. The by function scroll to be the same.

I No range description in the detail section. Keep text to bare minimum. I There should be a link to ‘see similar products’ which links to the function

category. I In the function pop up, do not use a bounding box outline, let just the cut

outs be there. No need of any description here. I There still was an issue that the product isn’t large enough. So increase

the product area however possible. I Centre align the copyright band, and also change text. I All text should be right aligned. I Avoid using any images in about section. Enough images have been used

all over the site. Reduce the amount of text that goes in here. I Include a new tab in the menu which would show inspirational usage of

the products, like a combination of products in a setting, giving ideas to people how multiple products can be used together.

4.

Des

ign

Vis

ualiz

atio

n

| 92

Home Page

Creations

Inspirations

About

Available

Contact

By Collection

By Function

Gifts and Sets

New/Specials

Padma

Sitara

Vanya

Vishwa

Uttam

Vismaya

Misc.

Mandirs

AnanyaDiya & t light holders

Devotional

Mandirs and Asans

Display & Serve

Candle Holders

Wellness

Decor

The product

Us

Online

Stores

Link to E-shop Webpage

List of stores

Site StructureSince there was a new addition of the ‘inspiration tab, now we had 5 main links. This map shows the horizontal navigation of all the links.

4. D

esign V

isualization

93 |

Logo, Type and ColoursApart from the logo, I wasn’t given any specific design restrictions initially. Namo does not have a brand manual that I had to refer to before using the logos in my design. Most of the design related comments and suggestions came about during the discussions we had in the course of the project. There were no written guidelines.I did attempt some designs to take the logo in white over a red back-ground, which was highly discouraged. Finally, keeping the logo on a white background was the only option, since it wasn’t really seen on a grey back-ground and the client was sensitive about it.

CMYK : C:0, M: 100, Y: 99, K: 4

Pantone : PANTONE 1797 C

RGB : R: 227, G: 27, B:35

Font

F 1102 Chittaranjan Park, New Delhi 110019 India

All namo printed matter was in Baskerville Italic

Pankaj VermaF 1102 Chittaranjan Park, New Delhi 110019 India Phone +91 11 26277348 / 26275571 / 40548286Mobile 98100 16004 Email namoindia@gmail.com

DEVOTIONAL ACCESSORIES

DEVOTIONAL ACCESSORIES

4.

Des

ign

Vis

ualiz

atio

n

| 94

I tried to convince them to change the colour of the logo a bit for the web, as it was getting too bright for screen. Red can be a very repulsive colour on screen if not used in the right intensity. All my initial exploration had a more deeper Indian red, which was far very different from the red used in the print-ed material. So to get close to it, I convinced them to the closest best colour.

RGB : R: 204, G: 51, B: 51

WEB : # CC3333

CMYK : C: 9, M: 100, Y: 100, K: 2

As far as the web fonts are concerned, they were very adamant on a sans-serif font. I still gave them options to chose from.

The Padma Range‘Padma meaning Lotus, is an important symbol in many religions. Ancient cultures believed that the lotus worships the rising sun every-day by rising from the water at dawn.

The Padma Range‘Padma meaning Lotus, is an important symbol in many religions. Ancient cultures believed that the lotus worships the rising sun every-day by rising from the water at dawn.

The Padma Range‘Padma meaning Lotus, is an important symbol in many religions. Ancient cultures believed that the lotus worships the rising sun everyday by rising from the water at dawn.

The Padma Range‘Padma meaning Lotus, is an important symbol in many religions. Ancient cultures believed that the lotus worships the rising sun everyday by rising from the water at dawn.

The Padma Range‘Padma meaning Lotus, is an important symbol in many religions. Ancient cultures believed that the lotus worships the rising sun everyday by rising from the water at dawn.

The Padma Range‘Padma meaning Lotus, is an important symbol in many religions. Ancient cultures believed that the lotus worships the rising sun every-day by rising from the water at dawn.

The Padma Range‘Padma meaning Lotus, is an important symbol in many religions. Ancient cultures believed that the lotus worships the rising sun every-day by rising from the water at dawn.

Georgia

Arial

Trebuchet MS

Times New Roman

Verdana

Tahoma

Palatino

4. D

esign V

isualization

95 |

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

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

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

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

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

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

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

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

1 2 3 4 5 6 7 8 9 0 ( ! @ # $ % ^ & * _ + = )

After much debate and trials, the typeface chosen for the website was Trebuchet MS. It’s a neat bold type with large counter spaces in 4 weights.The Trebuchet typeface family, like Verdana and Georgia, was created for use on the screen. Designed and engineered in 1996 by Microsoft’s Vincent Connare, it has a strong and unmistakable appearance.

Aa aa Aa aa

Trebuchet MSRegularItalicboldbold Italic

Trebuchet MS is a humanist sans-serif typeface designed by Vincent Connare for the Microsoft Corporation in 1996. It is named after the trebuchet, a medieval catapult. The name was inspired by a puzzle question that Connare heard at Microsoft headquarters: “Can you make a trebuchet that could launch a person from main campus to the new consumer campus about a mile away? Mathematically, is it possible and how?” Connare “thought that would be a great name for a font that launches words across the Internet”

Borrowing elements from both the geometric and humanist classifications of sans serif type - Connare acknowledges the influence of designs as diverse as Gill Sans, Erbar, Frutiger, Akzidenz Grotesk and the US Highway signing system - Trebuchet infuses any page with energy and personality. Its letter forms, loosely based on sans serif typeface designs of the 1920s and 1930s, carry a large x-height and clean lines designed to promote legibility, even at small sizes.

Trebuchet is well-suited to use for extended texts, User Interface scenarios and spreadsheet design, given the font’s narrow letter forms. Trebuchet works brilliantly on the screen and has quickly become a classic choice for Web page design.

4.

Des

ign

Vis

ualiz

atio

n

| 96

Text Differentiation

RGB: R:102 G:102 B:102

Web: #666666

RGB: R:153 G:153 B:153

Web: #666666

RGB: R:180 G:180 B:180

Web: # B4B4B4

RGB: R:204 G:51 B:51

Web: # CC3333

RGB: R:204 G:51 B:51

Web: # CC3333

RGB: R:128 G:128 B:128

Web: 808080

1st layer of navigation, on the menuTrebuchet MS Regular14 pt

2nd layer of navigation, on the menuTrebuchet MS Regular12 ptActive Link - Bold Italic14 pt

3rd layer of navigation, on the menu, on click of 2nd layerTrebuchet MS Regular12 ptActive Link in Red - Bold Italic12 pt

Static text on info pagesTrebuchet MS Italic16 ptHeaders in Red or 1st Level grayBold Italic

4. D

esign V

isualization

97 |

RGB: R:153 G:153 B:153

Web: #666666

RGB: R:204 G:51 B:51

Web: # CC3333

Product name and codeTrebuchet bold italic 13pt

Product DescriptionTrebuchet italic 11pt

Product measurements and mate-rialTrebuchet italic 12pt red

see similar productsTrebuchet italic 12pt

Previous and Next Trebuchet MS italicItalic

Centre product name in RedTrebuchet MS regular 12pt

Final Layout (For now)

The screenshots starting the next page show the final layouts for the website, not taking into account the other half i.e. of the webstore. Some of the images shown here are for dummy use. These will be changed as and when the photo shoot happens.

However I would like to discuss the finality of this design. Since I finished my part of the job with dummy images and writing the content whenever I felt creative enough to be a copywriter, the design was completed without the final content and images. Even as I write this document in the middle of August, the client hasn’t produced the required content and images. They are still working on it and may take at least another 2 weeks. Once the content is finalized, the layout may undergo some minor additions.

However, the main menu, structure and design will not change. This is still the pre-coded design, so once the site is eventually uploaded it should/can be refined depending on the new content that the client will spring.

For the sake of completing an on-time diploma, I concluded the project at this point. The actual project, with the web store with user-logins online shopping will take some more time. I can hope that the next phase will follow the basic layout but cut down on the images. The client seemed intent to keep this clean design, so even if they suddenly jump to another creative agency the original look shouldn’t mutate too much.

I have made a layout for the webstore which I shall share in the next chapter, Wishlist.

4.

Des

ign

Vis

ualiz

atio

n

| 98

Final Layout (with little refinements)

Following are a sequence of screenshots arranged as if the user was actually travelling through the website, from one point to the other, the images scrolling by as the mouse moved over them. (The refined/changed designs are placed alongside with a red border)

Home Page

I made an attempt to use the new design formula of a ‘liquid layout’ for this website. Liquid layout are layouts that are based

on percentages of the current browser window’s size. They flex with the size of the window, even if the current viewer changes

their browser size as they’re viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given

Web browser window or screen resolution. This was one major complication I was worried about.

4. D

esign V

isualization

99 |

1st Click on the menu bar - Creations; By Collection

This was the second complicated feature. The scroll was supposed to have images of different collections of products, and on

rollover the particular image would enlarge and the rest would dim. As soon as one reaches the right the scroll automatically

moves towards the left. This feature I studied is known as Crossing-based interface. Crossing-based interfaces are graphical

user interfaces that use crossing gestures instead of - or in complement to pointing.

4.

Des

ign

Vis

ualiz

atio

n

| 100

Collection 1 Product 1 Slide 1

Collection 1 Product 1 Slide 2

4. D

esign V

isualization

101 |

Collection 2 Product 1 Slide 1

Collection 2 Product 1 Slide 2

4.

Des

ign

Vis

ualiz

atio

n

| 102

Collection 2 Product 2 Slide 1

This cross link would lead my to all the products in the category e.g. Candle holders (next page top)

2nd click under Creations; By Function

This was similar to the collection scroll, using the automating scrolling feature - crossing based interface.

4. D

esign V

isualization

103 |

Function 1 Product 1 Slide 1

Function 1 Product 1 Slide 2

IssuesThe pop up for the function category was too wide. Though using a liquid layout , I had to keep in mind of the minimum resolution. I had to change this popup’s width to the minimum resolution ; 800px. Also the white space seemed too much in this layout.

4.

Des

ign

Vis

ualiz

atio

n

| 104

IssuesAlong with reducing the width, increasing product space and reducing white

space, another demand was to remove the bounding box from the thumbnails.

The image , as here looked incomplete. SO I had to fix the ratio for full images to

3:4

ChangesReduced the width size. Made sure all images are 3:4. Moved the thumbnails up

so that product description comes below. This helped in reducing the width, killing

the white space as well as increasing emphasis on the product. This also made

sure that it would fit in a size as small as 800px

Function 2 Product 1 Slide 1

4. D

esign V

isualization

105 |

3rd click under Creations; Gifts & Sets

Gifts and Sets were combinations of multiple products. So I thought of placing thumbnails of all gift sets, with a vertical scroll,

which on click would give the details as a popup.

4.

Des

ign

Vis

ualiz

atio

n

| 106

IssuesThe idea of putting the gift boxes was initially appreciated but later discouraged,

as most of the box sizes were the same. And also all the products come in similar

packaging. There froe it was decided to use the thumbnails of the products itself,

which would enlarge and give details.

ChangesI put in thumbnails of the products, which would open as in the previous design.

On the left would be a shot of multiple gift boxes, since it hadn’t been shot I have

used this red box.

4. D

esign V

isualization

107 |

ChangesSome change sin the content were made, the content is yet to be finalised. The quoted line remained in red, and the pattern was brought out in red.

3rd Tab on the Menu - About; The product

I decided to divide the About tab into 3 - The product, Us and Collections. For the product page, I used some images of the

products and a line to quote. The images were unapproved, rather a suggestion to bring out the pattern at the back sounded

good.

4.

Des

ign

Vis

ualiz

atio

n

| 108

2nd Click under About; Us

I suggested they have their photograph along with the text for the About Us, which they completely rejected

ChangesRemoved the images, and kept it as a clean static text page

4. D

esign V

isualization

109 |

4th Tab on the Menu - Available at- Retail stores; City 1

A list of cities, which on click show the list of stores in the particular city.

Retail Stores - 2nd City

4.

Des

ign

Vis

ualiz

atio

n

| 110

New Additions

2nd Tab on the Menu - Design InspirationsThis was a section to give the viewer idea of how to use a combination of products. A simple slide show was suggested for this

purpose. Though, the client suggested to add a secondary image, which would be of the inspiration behind the setting.

ChangesIt was still kept as a slide show, but with an added image of the designs inspira-

tion. Like here a number of products are placed on the floor, inspired by floor

creepers.

4. D

esign V

isualization

111 |

I attempted putting the actual tags of the collection information, but then the scope of increasing the collection range would

have created a problem.

3rd Click under About; CollectionsSince the collection information was removed from the product detail pages, there was a need to put it somewhere. It was

put under the About tab. All Namo products come with this information on their tags. So I tried to get that into the website. I

attempted an interface similar to the retail stores, where one clicks on the collection name on the left and the information ap-

pears on the left. This was becoming a little tedious.

4.

Des

ign

Vis

ualiz

atio

n

| 112

ChangesI kept the concept of tags intact, and played around with the layout. Added im-

ages for better association of the collection with the product. Arranged them in a

horizontal slider with a scroll bar at the bottom.

5th Tab on the Menu - ContactTill this time, it was decided not add any sort of forms on the website, as that requires back end data collection. So it was pre-

ferred to keep a static page, giving the email and phone numbers for interested and inquisitive people to refer to.

5. Navigation & Structure

| 114

5. N

avig

atio

n &

Str

uctu

re

The Content

Initially the only source of content in-formation I had was from the previ-ous website. For some reason that wasn’t sufficient enough as the web-site hadn’t been updated since it had been made i.e. 2007. I needed a more updated list of products and information about the brand. Then I was given the Namo presentation, which is like a catalogue sent to prospective customers on demand. This still seemed to be a comprehen-sive set of information, but this infor-mation was not in any particular or-der, neither was it compiled together

anywhere. Later on I was given an excel sheet of all the products which is supplied to the retail stores. This list (in chapter 3) had all the products Namo produces, but were still to be put in order. Very early in the project process, it was decided that the product show-case would be divided into 2 main categories if not more. One would be by their collection and the other by the product type. A lot of discus-sions were made over this as to how to divide the products into the cate-gories, which was an ongoing proc-

ess all throughout. It was my deci-sion to call these ‘By Collection’ and ‘By Function’ under a main head tab ‘Creations’. The third category being if Gifts and Sets and I suggested to include another one for new/special too. So using the collection sheets and information from the slide shows, I created the groups in ‘ The Function category. Creating the final list in the collection range was comparatively easy and simple, but classification into functions was a little compli-cated.

Slides from the Namo presentation.

Every range had a page giving a brief

description about the range. Followed

by all the products in the range. Each

product gave a brief description of the

product and its measurements. Which

is what I also wanted to include in my

content structure, as I wanted to keep

only the basic minimal text.

115 |

5. Navigation &

Structure

Classification By Collection

With the excel sheets I got from the client, I was to re-organize the data according to my use. Sequencing the products range wise first as they were quite scattered.

Initial scribble for classifying the prod-

ucts in their respective ranges.

| 116

5. N

avig

atio

n &

Str

uctu

re

Padma Vanya Vishwa Sitara

Padma Diya Diya B S Diya Diya

Padma Aarti Diya Handle Aarti Diya Agarbatti Lily (3)

Padma Phool Aarti Diya Handle Agarbatti Candle holder Kumkum

Padma Agarbatti Aroma Agarbatti

Padma Hanging Diya Tulip Candle Trio candle

Padma Bail Single

Padma bail Single 5 6 Ananya Uttam Misc

Padma Bail Double

Padma Bail Triple Ananya 4 Uttam Diya Snowcris Tri

Padma Aroma Diffuser Ananya 6 Uttam Agarbatti Snow cris quad

Padma Candle holder Ananya 8 Uttam Aroma Chaman Agarbatti

Panch plate Candles Chaman Aroma

Tri plate Padukas

Thali B S Vismaya Mandirs Chowki white & Black

Brahma Panch Ratna Diya

Asan Bud Vase Uday asan

Wall Mandir Flower Vase Uday asan ganesh

Singhasan In vase Nalini wall

PHOTO FRAME Candelabra Nalini Puja ghar

Aditya Asan

Chakra Mandir

Chowki W/B

Mor Mandir

117 |

5. Navigation &

Structure

Classification By Function

7 main categories of product types were made for this classification. Diyas & T-Light holders, Display & Serve, Devotional, Candle Holders, Wellness/Aroma, Decor and Mandirs

Classifying into categories on the existing

sheet, followed by the final classification

| 118

5. N

avig

atio

n &

Str

uctu

re

Below: Initial scribble for classifying the products in their respective product types

Next Page: Final classification into function categories.

119 |

5. Navigation &

Structure

Diya & T Light Mandirs Display & Serve

Padma Diya Padma Asan puja ghar Padma Thali

Padma Aarti Diya Padma Wall disc Padma Pancha Plate

Padma Phool Aarti DiyaPadma singhasan Padma tri Plate

Padma Diya Hanging Uday Asan Padma Brahma

Vishwa Diya Uday asan with Marble Ganesh idol

Aditya Asan

Vanya Diya Nalini wall mounted Chowki

Vanya Aarti Diya Nalini asan Mor Mandir

Sitara Diya Aditya Asan

Sitara Lily Padma Brahma Incense & Aroma

Padma bail Single Chakra mandir

Padma Bail single 6” Mor mandir Padma Agarbatti

Padma Bail Single 5 & 6” Chowki Vishwa Agarbatti

Vismaya Bud Vase Vanya Agarbatti

Vismaya in vase Devotional Sitara Agarbatti

Vismaya Flower vase Uttam Agarbatti

Vismaya T light bouquet Sri Paduka Padma Aroma

Panch Ratna DiyaPadma Diya Uttam Aroma

Padma Aarti Diya Chaman Agarbatti

Candle Holders Padma Phool Aarti Diya Chaman Aroma

Vanya Aarti Diya Vanya Aroma

Sitara Diya

Padma candle holder Sitara Lily Décor

Sitara Trio Uttam Diya

Vishwa Candle holder Padma Thali Padma Phool Hanging

Vanya Tulip Sitara Kumkum Holder Padma Photo Frame

Snowcris Tri Padma Agarbatti Padma Bail Single 5 6

Snowcris Quad Vishwa Agarbatti Padma Bail Double

Padma Bail Single Vanya Agarbatti Padma bail triple

Padma Bail Single 6” Sitara Agarbatti Chaman Aroma

Padma Bail Single 5” & 6” Chaman Agarbatti Ananya 4 6 8

Padma Bail Double Uttam Agarbatti Vismya bud vase

Padma Bail Triple Panch Ratna Diya Vismaya in vase

Padma Phool Diya Hanging Vismaya vase

Vismaya bouquet

| 120

5. N

avig

atio

n &

Str

uctu

re

Navigation StructureAfter the classification was finalised in both the categories of the collection and function, the final file was handed over to the client for details on measurements. The descriptions for each product were later added by me in consultation with the client. Most of the navigation has been discussed in the previous chapter. Here is a final navigation of the site. rough navigation to final navigation with user testing.

121 |

5. Navigation &

Structure

| 122

5. N

avig

atio

n &

Str

uctu

re

123 |

5. Navigation &

Structure

Namo Site Map

Home Level 1 Level 2 Level 3 Level 3.1 (Cross Link)

Landing

Page

Creations -

CollectionsPadma Range All Products in this collection(20)

Link to similar products in the

category

Introduction to

Namo and

Images

Sitara Range All Products in this collection (5)Link to similar products in the

category

Vishwa Range All Products in this collection (3)Link to similar products in the

category

Vanya Range All Products in this collection (5)Link to similar products in the

category

Uttam Range All Products in this collection (3)Link to similar products in the

category

Vismaya Range All Products in this collection (5)Link to similar products in the

category

Ananya Range All Products in this collection (3)Link to similar products in the

category

Mandirs All Products in this collection (8)Link to similar products in the

category

Misc. All Products in this collection (7)Link to similar products in the

category

By Function Diyas & Tlight

Holders

All products in the category over

various ranges (17)

DevotionalAll products in the category over

various ranges (19)

MandirsAll products in the category over

various ranges (13)

Display &ServeAll products in the category over

various ranges (8)

Candle HoldersAll products in the category over

various ranges (12)

DécorAll products in the category over

various ranges (12)

Aroma & IncenseAll products in the category over

various ranges (10)

Gifts and Sets Thumbnails of all

the gift sets (17)Product detail of each

About- The product

Us

The Collection

Available- Cart

Retail Stores List of cities

OnlineLink to online

shopping

Contact- Phone &

Email

Final NavigationAfter a rough layout I made final navigation map which was followed in the design. In the following pages I have shown page wise navigation and features of the entire website.

| 124

5. N

avig

atio

n &

Str

uctu

re

CONSTANT ELEMENTSNamo logo on the top leftCopyright text centre aligned at the bottom

HOME PAGE

Accordion Flash RotationA brief text about Namo

These links remain constant for all pages following.

Collection scroll (Automatic Scroll)Collection scroll (Automatic Scroll)Product Scroll (Automatic Scroll)Gift Page (Scroll with vertical scroll bar)Inspiration Page (Slideshow)About Product (Static)About Product (static)About Us (static)About Collection (horizontal slider)Cart Page (Static)Page of Cart (Static)Available (stores)Contact (Static)

CONSTANT LINKSCreations

By collectionsBy FunctionGifts and Sets

InspirationsAbout

ProductUsCollection

AvailableCartStores

Contact

125 |

5. Navigation &

Structure

CREATIONS-By collections I Automatic horizontal scroll bar I Image zooms on rollover I Image links to respective collection I Background dims

LINKS

Padma | Sitara | Vanya | Vishwa | Uttam | Vismaya | Ananya | Misc. | Mandirs

| 126

5. N

avig

atio

n &

Str

uctu

re

X COLLECTION

1. White popup layer with grey bands on sides2. Slideshow of product (4:3)3. Slide indicator below slideshow4. Previous and Next product links5. Name between Prev and Next6. Product information7. See similar products link8. Tabs of all products in collection9. Selected one in fill 10. Rollover in outline with name11. Close option

LINKS

Previous/NextSee similarTABSDiyaDiya with handleAgarbattiHanging Diya/W hookBail SingleBail Single PairBail TripleAroma Diffuser

Candle holderPancha PlateTri plateThaliBrahmaAsan Puja GharWall MandirSinghasanShree Wall Mandir

12

345

6

7

89

10

11

127 |

5. Navigation &

Structure

Links to all the collections are live even when a product is open.

Change of collection through text links.

Change of product through tab

Name of product changes(Selected product name)

| 128

5. N

avig

atio

n &

Str

uctu

re

BY FUNCTION

I Automatic horizontal scroll bar I Image zooms on rollover I Image links to respective collection I Background dims

LINKS

Diyas & T Light Holders Devotional | Mandirs | Display & Serve | Candle Holders | Decor | Wellness

129 |

5. Navigation &

Structure

X COLLECTION

1. White popup layer with grey bands on sides2. Slideshow of product (4:3)3. Slide indicator below slideshow4. Product information5. See products in X range.6. Thumbnails of all products in category7. Horizontal Scroll bar 8. Close option

LINKS

Products in same collection(links to particular collection clip)Close

ThumbnailsX candle holderX Bail SingleX Bail Single 6”X Bail Pair 5” & 6”X Bail DoubleX Bail Triple

Y Candle HolderV Candle holder S T Candle HolderS N Quad S N Tri

12

3

4

5

6

7

8

| 130

5. N

avig

atio

n &

Str

uctu

re

GIFTS AND SETS

I Thumbnails of Images, which on click get a pop up with details of products, and all others are removed, only selected image re-mains.

I Pop up- White popup layer with grey lines on sides

I Vertical scroll bar on the left.

LINKS

Would be around 16-18 Sets.Each have a popup with product details.(see below)

131 |

5. Navigation &

Structure

ABOUT-The Product-Us-Collection

• Static pages of text.

| 132

5. N

avig

atio

n &

Str

uctu

re

AVAILABLE-Retail Store

I White popup layer with grey lines on sides I Names of Cities on the left which give list of stores on the right on click.

LinksStatic text appears on click

133 |

5. Navigation &

Structure

Roll-over Vs On-click

For the first attempt at designing the navigation I chose on-click for vari-ous technical reasons and to try it out. In this option, while navigating the site, clicking an object would take you to a stilled frame of that space with the text box giving the information about that particular el-ement. Now that meant that once you enter a product range you have to have detailed options to click on for the product, which would make it look very busy and messy.In the second attempt, the content is visible on roll-over and the detail comes on click. This makes it all much more simpler for the user, but took me a while to figure out how to make the script work like that.

On Click is for the first and second level

navigation , menu.

Roll-Over cum Click is for the tabs inside

the product range so that the emphasis

does not move away from the product

| 134

5. N

avig

atio

n &

Str

uctu

re

Final ContentAfter the final navigation was done, we sat down racking our brains on to the content. Though the sequencing was done, the product details were still missing. Most of the product measurements I could extract from the presentation, and for all those which weren’t there, YES I had to measure them myself. So I completed my data of measurements and wrote most of the descriptions of the products and gave it to the client for approval. After he made a few changes and corrections, I had to figure the cross links. As it is seen in the navigation that every product, when viewed in collections has a link to its relative function category. Like a Padma diya, is being viewed under the Padma Range, it has a link saying see similar products, which should take it to the function category of Diyas & T lights so the person can see diyas of all the ranges and compare. Certain prod-ucts were having overlaps like the Padma diya fell in the category of Diyas & T-lights as well as Devotional. So it was upto my discretion as to which category it should link to. So I made a final excel sheet, with all the data in order, to make the content easier to understand and use.

Product Name + Code

Product Description

Product Size Material: Link to

Padma Range

Padma Diya PD85 PDB PDC

Oil Lamp, can also be used as a T-Light holder.

Size: L 8.5 x B 8.5 x H 3 cm

Material: Stainless Steel Also Available in Brass and Copper

Diya & T-Light Holder

Padma Aarti Diya (Handle) SS PDHS PDHB PDHC

Hand held oil lampSize: L 11.5 x B 8 x H 2.5cm

Material: Stainless Steel Also Available in Brass and Copper

Diya & T-Light Holder

Padma Phool Aarti Diya SS PPADS

Hand held oil lampSize: L 18.5 x B 8 x H 3.7cm

Material: Stainless Steel Also Available in Brass and Copper

Diya & T-Light Holder

Padma Agarbatti Holder SS PAHS PAHB PAHC

Incense HolderSize: L 8.5 x B 8.5 x H 3 cm

Material: Stainless Steel Also Available in Brass and Copper

Incense Holder

Phool Diya Hanging (set of 5pcs) PPDH

Hanging T-light holders/ Oil Lamps. Set of 5, Can be made into a chain.

Size: L 18 x B 12.5 x H 6 cm

Material: Stainless Steel

Decor

Padma Phool Diya Hanging with Bracket (Set of 5) PPDHK

Hanging T-light holders/ Oil Lamps. Set of 5 + a wall bracket, can be made into a chain.

Size: L 18 x B 12.5 x H 6 cm

Material: Stainless Steel

Decor

Padma Bail Single 5” PBS5 PBST5

Candle Holder Variation for T-Light holder also

Size: L 8 x B 8 x H 10.5 cm

Material: Stainless Steel

Candle Holders

Padma Bail single 6” PBS6 PBST6

Candle Holder Variation for T-Light holder also

Size: L 8 x B 8 x H 13 cm

Material: Stainless Steel

Candle Holders

Padma Bail Single 5”&6”(set of 2 pcs) PBS56 PBST56

Candle Holder Variation for T-Light holder also

Size Big: L 8 x B 8 x H 13 cm Small: L 8 x B 8 x H 10.5 cm

Material: Stainless Steel

Candle Holders

Padma Bail Double PBD

Candle Holder Size: L 17 x B 14 x H 17 cm

Material: Stainless Steel

Candle Holders

Padma Bail Triple PBT

Candle Holder Size: L 41.6 x B 11.7 x H 16.7cm

Material: Stainless Steel

Candle Holders

Snapshot of how the product details are to

be shown. So I made the excel sheet with

information in order of use.

135 |

5. Navigation &

Structure

Padma Aroma Dif-fuser PAD

Aroma DiffuserSize: L 8.5 x B 8.5 x H 7.5 cm

Material: Stainless Steel

Incense & Aroma

Padma Candle Hold-ers PCH2

Candle Holder Set of2Size: L 7.5 x B 7.5 x H 3 cm

Material: Stainless Steel

Candle Holders

Padma Panch Plate PP120

Used to make sacred food/flower offerings, as a prasad plate.

Size: L 12 x B 12 x H 2cm

Material: Stainless Steel

Display & Serve

Padma Tri Plate PT35

Used to make sacred food/flower offerings, as a prasad plate.

Size: L 13 x B13 x H 3 cm

Material: Stainless Steel

Display & Serve

Padma Thali PTB330 PTS235

Puja Thali used to make offerings and perform religious rituals. Also can be used to serve and display.

Size Big: L 31.5 x B 32 x H 2.1 cm Small: L 23 x B 23 x H 2 cm

Material: Stainless Steel

Display & Serve

Padma Brahma PBS Seat of GodSize: L 24 x B 24 x H 4 cm

Material: Stainless Steel

Mandirs

Padma Asan Puja Ghar PAG

Altar for God, Stand alone or wall mounted

Size: 29 x B 16 H 23 cm

Material: Stainless Steel

Mandirs

Padma Shree Wall Mandir PSW18 PSW24

Wall mounted altarSize: 29 x B 16 H 23 cm

Material: Stainless Steel

Mandirs

Padma Singhasan PSGS

Seat of GodSize: L 16 x B 12.5 x H 11 cm

Material: Stainless Steel & Brass Also

Mandirs

Padma Photo Frame PPF30

Photo FrameSize: L 32 x B 2.5 x H 32 cm

Material: Stainless Steel

Décor

Wall bracket PPH Wall BracketSize: L 7.5 x B 7.5 x H 16.5 cm

Material: Stainless Steel

Decor

Sitara Range

Sitara Diya SD55Oil Lamp, can also be used as a T-Light holder.

Size: L 6 x B 5.4 x H 4 cm

Material: Stainless Steel

Diya & T-Light Holder

Sitara Lily SL3Oil Lamp, can also be used as a T-Light holder Set of 3.

Size: L 6.2 x B 6.9 x H 6.3 cm

Material: Stainless Steel

Diya & T-Light Holder

Sitara Kumkum Holder SK55

Container for holy pow-der etc.

Size: L 5.8 x B 5.8 x H 5 cm

Material: Stainless Steel

Devotional

Sitara Agarbatti SAH Incense HolderSize: L 5.8 x B 5.8 x H 5.2 cm

Material: Stainless Steel

Incense and Aroma

Sitara Trio Candle holder STC

Triple Candle HolderSize: L 9.5 x B 9.5 x H 4.2 cm

Material: Stainless Steel

Candle Holders

Vanya Range

Vanya Diya (Big Small) VDS, VDB

Oil Lamp, can also be used as a T-Light holder.

Size Big: L13.5 x B 12 x H 4.5 cm Small: L 12 x B 10.5 x H 3.5 cm

Material: Stainless Steel

Diya & T-Light Holder

Vanya Aarti Diya VAD

Hand held oil lamp and T light

Size: L 23 x B 12.5 x H 6.8 cm

Material: Stainless Steel

Diya & T-Light Holder

Vanya Agarbatti VAH Incense HolderSize: L 12 x B 10.5 x H 3.5 cm

Material: Stainless Steel

Incense and Aroma

Vanya Aroma VAD Aroma DiffuserSize: L 12 x B 11 x H 13 cm

Material: Stainless Steel

Incense and Aroma

Vanya Tulip Candle Holder VTCH

Candle holderSize: L 17.5 x B 11.5 x H 21.5 cm

Material: Stainless Steel

Candle Holders

| 136

5. N

avig

atio

n &

Str

uctu

re

Vishwa Range

Vishwa Diya VID Oil LampSize: L 12.5 x B 11 x H 4 cm

Material: Stainless Steel

Diya & T-Light Holder

Vishwa Agarbatti VIAH

Incense HolderSize: L 12.5 x B 11 x H 4 cm

Material: Stainless Steel

Incense and Aroma

Vishwa Candle Holder VCH1

Taper Candle holderSize: L 12.5 x B 11 x H 4 cm

Material: Stainless Steel

Candle Holders

Uttam Range

Uttam Diya UD Oil LampSize: L 12.5 x B 5.5 x H 8 cm

Material: Stainless Steel

Diya & T-Light Holder

Uttam Agarbatti UA Incense HolderSize: L 10 x B 6.5 x H 10.5 cm

Material: Stainless Steel

Incense and Aroma

Uttam Aroma UAD Aroma DiffuserSize: L 11 x B 5.5 x H 7.5 cm

Material: Stainless Steel

Incense and Aroma

Vismaya Range

Vismaya Bud Vase VSBV

Bud Vase with T LightSize: L 11 x B 11.2 x H 19 cm

Material: Stainless Steel

Decor

Vismaya Flower Vase VSFV

Flower Vase with T Lights creeper

Size: L 28.6 x B 32.5 x H 30 cm

Material: Stainless Steel

Decor

Vismaya in Vase VSIV

A vase in fusion of flow-ers and Flame

Size: L 50 x B 41 x H 59 cm

Material: Stainless Steel

Decor

Vismaya Candelabra VSCB

“A bouquet of T LightsSize: L 48 x B 41 x H 57 cm

Material: Stainless Steel

Candle Holders

Ananya Range

Ananya 4 ANY4Candle holder inspired by creepers.

Size: L 21.9 x B 26 x H 2.6 cm

Material: Stainless Steel

Decor

Ananya 6 ANY6Candle holder inspired by creepers.

Size: L 32 x B 31 x H 8 cm

Material: Stainless Steel

Decor

Ananya 8 ANY8Candle holder inspired by creepers.

Size: L 31 x B 30 x H 8 cm

Material: Stainless Steel

Decor

Mandirs

Uday Asan UA AltarSize: L 23.5 x B 11.5 x H 22.7 cm

Material: Stainless Steel

Mandirs

Uday Asan with Marble Ganesh idol UASGM

Altar with Marble idolSize: L 23.5 x B 11.5 x H 22.7 cm

Material: Stainless Steel and Marble

Mandirs

Nalini wall mandir NWG

ShrineSize: L 26.5 x B 14.5 x H 22.5 cm

Material: Stainless Steel

Mandirs

Nalini Asan Puja Ghar NAS

ShrineSize: L 38 x B 20 x H 27 cm

Material: Stainless Steel

Mandirs

Aditya Asan AAS Seat of GodSize: L 33 x B 33 x H 4 cm

Material: Stainless Steel

Mandirs

Chowki W/B CKSW, CKSB, CKBW, CKBB

Shrine, also display base

Size Big: L 41.7 x B 26 x H 6.4 cm Small: L 35.5 x B 24 x H5.1 cm

Material: Marble White/Black +Stain-less Steel

Mandirs

Mor Mandir MM15 ShrineSize: L 40 x B 30 x H 35 cm

Material: Marble White/Black +Stain-less Steel

Mandirs

137 |

5. Navigation &

Structure

Misc.

Snowcris Tri SCT Candle HolderSize: L 13 x B 13 x H 2.5 cm

Material: Stainless Steel

Candle Holders

Snowcris Quad SCQ Candle HolderSize: L 13 x B 13 x H 2.5 cm

Material: Stainless Steel

Candle Holders

Chaman Agarbatti CA

Single Incense HolderSize: L 8 x B 8 x H 3 cm

Material: Stainless Steel

Incense Holder

Chaman Aroma CHA

A Bouquet of flowers as incense stick holders

Size: L 33 x B 24 x H 32 cm

Material: Stainless Steel

Decor

Sri Paduka SPS, SPB

God’s FeetSize: L 10 x B 9.3 x H 2.3 cm

Material: Stainless Steel Available in Brass also

Devotional

Panch Ratna Diya PRD

Material: Stainless Steel

Diya & T-Light Holder

Gift Sets

Padma Thali Diya, Agarbatti Set PTDAS

Size: L 24 x B 24 x H 3 cm

Material: Stainless Steel

Devotional

Padma Diya, Agar-batti Set PDASS

Size Diya : L 8.5 x B 8.5 x H 3 cm Agarbatti : L 8.5 x B 8.5 x H 3 cm

Material: Stainless Steel

Incense and Diya

Padma Diya, Agar-batti BrassSet PDABS

Size Diya : L 8.5 x B 8.5 x H 3 cm Agarbatti : L 8.5 x B 8.5 x H 3 cm

Material: BrassIncense and Diya

Padma Diya, Agar-batti CopperSet PDACS

Size Diya : L 8.5 x B 8.5 x H 3 cm Agarbatti : L 8.5 x B 8.5 x H 3 cm

Material: CopperIncense and Diya

Padma Phool T light (Set of Br & Cop) PPTLS

Size T-light single : L 8 x B 7.5 x H 2.7 cm X 2 pcs

Material: Brass & Copper

T-Light Holder

Patti Diya,Agarbati Brass Set PTDABS

Size Diya : L 10 x B 5.2 x H 2.1 cm Agarbatti : L 10 x B 4.3 x H 2.8 cm

Material: BrassIncense and Diya

Patti Diya,Agarbati Copper Set PTDACS

Size Diya : L 10 x B 5.2 x H 2.1 cm Agarbatti : L 10 x B 4.3 x H 2.8 cm

Material: CopperIncense and Diya

Vanya Diya, Agar-batti Set VDAS

Size Diya : L 12 x B 10.5 x H 3.5 cm Agarbatti : L 12 x B 10.5 x H 3 cm

Material: Stainless Steel

Incense and Diya

Vanya TLght Holder Set VTLS

Size Diya : L 12 x B 10.5 x H 3.5 cm X 2 pcs

Material: Stainless Steel

T-Light Holder

Vishwa Diya Agar-batti Set VIDAS

Size Diya : L 12.5 x B 11 x H 4 cm Agarbatti : L 12.5 x B 11 x H 4 cm

Material: Stainless Steel

Incense and Diya

Vishwa candle Holder (Set of 2) VICHS

Size : L 12.5 x B 11 x H 4 cm X 2 pcs

Material: Stainless Steel

Candle Stand

| 138

5. N

avig

atio

n &

Str

uctu

re

Sitara Set SDAKS

Size Diya : L 6 x B 5.4 x H 4 cm Agarbatti : L 6 x B 5.6 x H 5 cm Kumkum : L 6 x B 5.5 x H 4 cm

Material: Stainless Steel

Incense and Diya

Uttam Diya-Agarbati set UDAS

Size Diya : L 12.5 x B 5.5 x H 8 cm Agarbatti : L 10 x B 5.5 x H 9.5 cm

Material: Stainless Steel

Incense and Diya

Padma Trio Plate set of 3 PTPS

Size : L 13 x B 13 x H 3 cm X 3 pcs

Material: Stainless Steel

Display & Serve

Padma Pancha Plate set of 3 PPPS

Size : L 12 x B 12 x H 2 cm X 3 pcs

Material: Stainless Steel

Display & Serve

Navigation and design more or less went hand in hand, so it cannot be said that the complete design was made and then the navigation was figured. It is rather the other way round, unless you have a flow, you cannot produce your design, as the design completely depends on the interface. The content collection, organizing, sequencing, producing etc. too was an ongoing exer-cise. More stress was laid on the content once the design was complete and was almost ready for implementation. As of today, 31st August, I complete a complete website design with navigation, product based content and flash inputs.

TestingSince the beta was not uploaded by now, i did a very informal kind of testing by giving out the navigation maps to people and seeing their walk throughs along with giving them a dummy presentation of all the snapshots to see their first time reactions to the site, it was nowhere near a proper testing. The atmosphere was relaxed and the users were chosen based solely on con-venience, that is, whoever was around. I have still included some comments and information of the kind of feedback I got from the end users. It is always helpful to get opinions from normal people, ie, non-designers.Most of the feedback was positive, however it can’t even be counted as a proper test since I presented only static shots. The idea was to get a general impression of the site. I got feedback like “something to do with devotion” “futuristic” “new” “geometric” “white” and “neat.” This was encouraging be-cause these were the keywords that I was trying to project. Most of the feed-back was positive, though some input on the search bar was that it should be more prominent. The interactive part of the site was considered ‘easy’ by most people. More critical feedback was “why is the text so small.” However since this was because the pages weren’t viewed in the right size in a browser. though the feedback wasn’t to be accurate it was still considered and an option of changing the text size at the time of execution was open.Following are some flowcharts by a few users, which was quite positive as the navigation is quite straight forward and there was a behavioural pattern being formed.

139 |

5. Navigation &

Structure

| 140

5. N

avig

atio

n &

Str

uctu

re

141 |

5. Navigation &

Structure

| 142

5. N

avig

atio

n &

Str

uctu

re

6. IssuesIn this section I have covered all the conflicts, difficult decisions that happened dur-

ing the course of the project. I will cover the commercial aspects, the design process difficulties and resolutions, the long list of technical difficulties and questions, and finally all the tiny web design decisions that had to be made as part of the project.

6. Is

sues

| 144

It is really sad to say it so blatantly, design is just a business in India today. It isn’t going to heal the world or eradicate poverty. Each individual designer may have their own motives and motivations behind their work. If we do our job well as graphic designers, we can convince the consumer that our prod-uct is the best buy, or we can communicate clearly through an NGO. Both ends of the spectrum have their own indigenous pitfalls.While working at a studio where I had the client present as well, wasn’t really too much of help. My client apart from being the proprietor and producer of Namo was a manager for B & V Designs as well. His mentality was hard core business based. Initially there was trouble explaining to him that the user would not be aware of the terminology and names that he uses several times a day. For the user Namo is something completely alien. Our purpose is to befriend the user and Namo.The project was viewed internally in terms of time taken and money. Since the client was instantly happy with my designs, that was never really dis-cussed. Based on internal support and trust I worked everything out. The scope was worked out by the marketing head, and this became an issue which was never openly discussed. Since the initial scope was smaller than what the project turned out to be, it created serious problems for me. The concept that was readily accepted by the client, was cut down to size to that it would fit the scope. Which wasn’t much.For me this was a completely fresh way of looking at things. I had never re-ally observed design as a business, but an idealistic way of making things look good and work good. I had conveniently ignored this most important factor during my four years of education. Suddenly, the world of design busi-ness seemed harsh. We were given about a few days for concepts, and two weeks for execution for most projects. Since it was my diploma, I was given (luckily and gratefully) two weeks for concepts, and about the same for pre-paring the final concept presentation.I feel that the next time I work in such a tight deadline and bureaucracy, I would be able to handle and control the situation with foresight. I can sud-denly imagine so many things that can go wrong. Earlier, I always thought that the client saying ‘no’ was the main and only problem. For me, if the client said the magic ‘yes’ word then everything was rainbows and sunshine. Now, I understand that a complex, commercial project has a long, long way to go after that fateful ‘wow.’

6a. Commercial Issues

“Earlier, I always thought that the client saying ‘no’ was the main and only problem... Now, I understand that a complex commercial project has a long, long way to go after that fateful ‘wow!’ “

Next Page

This story about speculative designs is a bit exaggerated, but all designers come

across such clients once in a while. We may agree to such a project for many rea-

sons. Maybe even because we are students who don’t know any better. A client who

doesn’t really know what s/he wants is the most common problem I observed while

working on my diploma and other identity projects at that time. In such cases, the

designers can only keep trying to guess, and it creates a frustrating and unprofes-

sional atmosphere.

6. Issues

145 |

6b. Process Issues

The most repetitive problem that I had to face was the gap between available information and my ideas. While brainstorming and ideation, I only had half of the information about Namo, though I didn’t know that at the time. Therefore, I gener-ated creative ideas based on half-hearted information and the views of the client, sponsor and the individual designers. The users were totally ig-nored by most people involved with the project. I did try and bridge this gap. However, lack of accurate and complete information, or assuming that everyone has the complete infor- mation undervalues the importance of crucial, early meetings. These kind of half-briefs are dangerous and lead to rushed decisions and bad design.

What is bad design? In my opinions, they are things are that are firstly, difficult to use. They are also ugly or are focused on themselves rather than the user.

A lack of a set process or even a flexi-process for different sets of projects puts one under complete dependency of the client.

This leads to the next question: Does the client know best? And/Or Does the designer know best?

Where is the middle ground? Is there a middle ground? Is there any flexi-process that one can try to follow or is this my idealistic way of trying to look at the industry today. Is each cli-ent and each project so different that even trying to think of a set process is stupid or just unnecessary... After all we are not scientists so we do not need to have regular methodology. This is an intuitive field after all. (Our origins are within advertising, but we have evolved since then).

What happens then is speculative work. I’m sure that all designers end up churning out spectacular work

one time or the other. A familiar proc-ess of work and re-hash churns out a series of designs, but the clients had different responses to all of them, from cold, to luke warm. An excel-lent example of the entire speculative circus is described in the article by Tom Stephan, written from the point of view of the client. It’s an interesting way of trying to educate businesses to approach designers with a bet-ter attitude. I feel that eventually the designers themselves will have to spread this awareness by refusing to work for such clients and explaining to them how the process works.

The solution to most of the process issues I faced and others seems to be experience. Is experience the only answer? Experience allows a designer to develop some kind of individual approach to design. But nevertheless I feel experience is learning via process.

A Design Analogy By Tom Stephan

I really wanted a tattoo, but I had no idea what I wanted — I just wanted a tattoo. So went to four or five different tattoo studios and said “hi guys, I want a tattoo, and it has to be cool and it has to be something that says “this is me, this is who i am, and after you decide who I am and what I want to tell the world, I will pay you for it and you can tattoo it on my arm. If I don’t like it, I can always have it removed later.”Oddly enough, the tattooists all asked me, “well, how will I know what kind of person you are?” and I said “I dunno ... just give me some designs and I’ll see what I like.” The reputable tattoo studios refused to take me up on this, and I was astonished — here I was, offering them a chance to go wild and let their imaginations take flight, and they weren’t interested. It was the less-than-great tattooists who took me up on the offer, and when the designs came in, none of them were like me. None of them said anything about me...as a matter of fact they looked more like what the tattooist might like on themselves.I was pretty disappointed. Next time, I’ll have to rethink whether I want to put my identity in the hands of strangers. Moral of the story? If you’re willing to commit someone else’s ideas to your business, without a clear concept of what you yourself want or desire, you leave yourself open to the mercy of other people’s caprice and fancy. If you’re running your business, don’t you want the right to get it the way you want it without gambling on something that may cost more to fix than to get right in the first place?

6. Is

sues

| 146

6c. Technical Issues

Since this was my first website project from scratch, I expected to learn a lot about the technicalities involved. However, the technical is-sues got tangled up with human re-sources (HR) very quickly.

First of all, our method of brain-storming. Having a technical person in on all our ideas was very impor-tant, even in the early stages of our project. Taking this a step further, I feel that initial brainstorming should involve as many people as possible, even those not directly involved in the project, technical or otherwise. This creates a healthy, participatory atmosphere and I had a lot of inter-esting discussions with several peo-ple internally to get their opinions on Namo and the ideas we were com-ing up with. Though this feedback is not always instantly useful, its a good, fun way to work.The concept was presented as-suming that Flash would be used to make the site, since a highly interac-tive and lively concept was present-ed. The internal team (designers and technical person) seemed to under-stand this however the team man-ager was ignorant of this, as I un-fortunately discovered later. In fact, he was adamant on an “html” site to the point that no discussions could be allowed. It took at least a week and several arguments to reach a consensus which compromised to-tally and completely on the concept.

Lets look at all the points that we went through. Since I under-quoted so making an extremely interactive site would be too much work and too many hours. The studio couldn’t afford this, as discussed in the com-mercial issues. Due to lack of fore-sight this came up too late and by now the design was approved, ap-preciated and finalised. The client

did not want to get away with the design and asked for a solution.

Secondly, making two sites, one high bandwidth and one low bandwidth, as most sites today do for different connections – would also entail more hours, this was not an option at all. In fact, this was not even discussed, merely rejected as impossible.

Thirdly, most users in India would have a low connection, or we had to care for all the users who don’t have a high bandwidth. The only solution was to make a regular html/css/php site.

Fourth. I had made the design keep-ing in mind that the liquid layout for-mula could be applied and worked. Which was a bit of a problem con-sidering it was an image heavy site. But if that was included the whole design would go waste. Overall, the situation was very frustrating since the concept that had been so read-ily accepted by the client was being diluted and washed out and forced into some other container by the sponsor. The client would not even realize the difference, it was said, but it still made a huge difference to me because I didn’t care if the client didn’t realize. They were untrained, it was our job as designers to realize. We had made a promise.

Five. Making a pure flash site was just too egoistic (though this was discussed as a possibility). We could not ignore all those people with low connection who would wait one long minute for loading. One minute was too long. Or all those people who would not want to download the flash plug in because of a fear of viruses or whatever. Also the main concern was that It’s tough to get an all-Flash website to rank high in

search engines. Search engines have problems indexing images, even text rendered as an image. HTML pages get indexed in search engines like Google while Flash pages do not.

The final decision was an executive order. It was time for me to make my decision. This was my final project, so could I quit it because of the im-perfect way it had turned out; with-out proper importance given to the relevance and user-friendliness of the design, or could I stick and fin-ish it off. I decided to stay as I felt responsible for the project. It was my concept and they were going to go ahead with it anyway, so I had to finish it as best as I could within the confines of what had happened. I couldn’t just walk away, and anyway I’m not the kind of person who gives up so easily.

The compromise was to have a half flash and half code side, though according to the technical person, this would create several problems. It may still take long to down-load, so it wouldn’t solve any-thing. As a designer I could only describe my position as trapped between a rock and a hard place. So i reduced the amount of flash to be used, and limited it to only places where certain features had no other solution. Most of the site could be done in HTML as well.

6. Issues

147 |

6d. Web Design Issues

This section includes rough notes of all the minor design issues that I noted during the course of the project. Since the complete beta site is yet to be up, these are just few notes made during the execution. Relative changes were made side by side in the design.

I Lack of a graphic design guide. I Where does the cross-linking go, left or right? I Scroll bar/changeable height = fixed ht. with scroll-bar I Font issues: Trebuchet vs. Albert, lower bit size fonts like Arial etc, default

fonts are why we used Trebuchet I Lower levels of interactivity: the washed out concept that losses its zing. I Flatness: no 3d look. The entire design looks flat, without layers. Though

there is hierarchy (i hope). Thus an flash based homepage was advised. I Size changes: I made a mistake while designing. Instead of designing the

screen for regular 1024by768, I was designing in high res. This was recti-fied quickly but is still giving some problem even at this stage.

I The difference between the psd files given and the html page. Some things cannot be aligned perfectly like in print. There should be ‘graceful degradation.’

I Colors look different on every monitor. So contrast should be high so that even if colors are wrong, content is legible. There for the lightest grey was darkened.

I Roll over: outline or planes being highlighted. After a brief check, it was decided that the outlines should be highlighted. It sticks to the main look better.

I One page 100% layout left little scope for the enlargement of the image. I Though we managed to use teh liquid layout horizontally there were prob-

lems using it for teh height. Insome screens there was a white space where the pattern was ending.

I The footer was not staying at the base, To make it stay i found a script which was being applied.

Feedback after the semi beta-site was made

I Remove pink glow from flash part. ‘The grey bleakness should remain’. I Reduce font size of cross-links (left) More differentiation is required be-

tween different kinds of text. Designer note: change weights and increase contrast in greys.

I Main menu: use Trebuchet– it would add more character. Designer Note: This would reduce the file size.

I Scroll bar – more minimalistic, make red line instead of arrows I Reduce text block size: I Red copyright band should be thinner and stuck to the base .

7. W

ishl

ist

| 148

7. WishlistIn this section includes activities which were to be a part of the project but could not

be completed in the time frame. Though not completed, at least the seed had been sown. This includes photography and webstore.

7. Wishlist

149 |

7a. Product Photography

The website was a product based website, hence the product had to be showcased well. Being an image heavy website, the images had to be good. The showcase of the product on the current website was sufficiently satisfac-tory. The size of the image was big enough and the suggested use section was appreciated by all. Sadly, this wasn’t there for all the products because of which there was a break in consistency. Frankly and evidently there was a lack of photographs. The product shots were ones shot in 2007 when the website was launched. There was a difference in the quality , colour and look of shots from 2007 and ones which were clicked after that. There was a dire need of a photoshoot. Now that there were a lot of additions in the product line since 2007, there was a need of a new photoshoot, and since there was a new website being made, i felt they should invest in a comprehensive photoshoot. They were not planning to launch a new product anytime soon or within a year. Even if they did not more than 4-5 products would be there. So this was the right time and opportunity to push for a photo shoot and a comprehensive one. I was asked to suggest the kind of photo shoot keeping in mind my design. I was handed over a CD with all images of namo, and most of them were ones which were shot and edited for the previous website. So for my design i made did with these images only, in hope that a photo shoot would take place soon. When i figured i was getting too late for my project, and the photoshoot wasn’t going to happen anytime soon, i started collecting images from the presentations and other files, as they were not compiled anywhere. So for the beta site and for time being, those images are being used till the photo-shoot happens. I decided to at least make a photo shoot script to make it easy for them to shoot even if I’m not there.I looked over a lot of references for the shoot, and figured what could work best for the Namo products. When i showed the presentation, he asked me script down shots for each product, as in my design i have included a slideshow to showcase the product,its views, its use etc. So i made a comprehensive photo shoot guide which i thought can be done. This was irrespective of any monetary and time considerations. After making this list I handed it over to my client to figure the possibilities. He said most of it is possible and he’d like to add certain more to it as well. He is yet to fix up with the photographer though.In the following pages you find the presentation i gave to the client and my sponsor followed by the photoshoot description list.

7. W

ishl

ist

| 150

In Context

In context to space with a prop and lit.

In Setting

In use in In use in an unconventional setting/ special setting

7. Wishlist

151 |

Mood Shots

Combinations and settings of multiple products to bring about a mood.

In Use

In use in the conventional manner with a common element

7. W

ishl

ist

| 152

Hanging diyas in the background, Thalis +Diya in Front.

Cutout

Copper & Brass

All 3 in use in Context

On a thali + a lotus (Prop)

Multiple diyas lit in the dark

Cutout

Copper & Brass

All 3 in use(lit) in Context (Prop)

On a thali in use with setup

Cutout

Copper & Brass

All 3 in use(lit) in Context (Prop)

Single piece cutout with hanging in BG

Hanging next to a wall in context

Shown hanging in front of a window with sky showing

Multiple hanging to make a jaali

Close ups of hook and joints

Cut outs

In context lit

Difference in candle and t light

A mood shot

Cut out

In context lit + prop

Table centre piece

Bed side / side table piece

Candle lit dinner setup

Padma Range

Padma Diya SS B C

Padma Diya Handle SS B C

Padma Agarbatti SS B C

Padma Hanging Diya With/WO hook

Padma Bail Single 5” 6”

Padma Bail Double

7. Wishlist

153 |

Padma Bail Triple

Padma Aroma Diffuser

Padma Candle holder

Padma Panch plate

Padma Tri plate

Padma Thali B S

Cut out

In context lit + prop

Table centre piece

Combination of all bails

Cut out

In context

In use

Corner placement

Moodshot of meditation/yoga in bg

Cut Out

Context +candle + lotus

Multiple in use, ball + pillar candles

Cut Out

In use with Prasad

Multiple (W Prasad, dry fruits, flowers)

With a diya

Cut Out

In use with Prasad

Multiple (W Prasad, dry fruits, flowers)

With a diya

Cut Out

In context few flowers or 1 diya

In Use – typical thali setup/puja or rakhi

Fruits in big and flowers in small

Burfee or sweets

7. W

ishl

ist

| 154

Cut Out

In context few flowers or 1 diya

In Use with figure

Unconventional shot- fruits/deserts etc.

Cut Out

Context with prop

Setup with god figures flowers etc

In use

Cut Out

Context with ref to wall and floor

Setup with god figures flowers etc

In use

Cut Out

Context with prop

Setup with god figures flowers etc

In use

Multiple Vanya diyas big and small lit

Cut Out Big and Small

In context lit + Leaf

Multiple big and small

Cut out

Context lit

In setting

In Use

Cut out

Context

In Use/setup

Padma Brahma

Padma Asan

Wall Disc/Wall Mandir

Singhasan

Vanya

Diya

Aarti Diya

Agarbatti

7. Wishlist

155 |

Cut out

In context

In use

Corner placement

Moodshot of meditation/yoga in bg

Cut out

In context lit + prop

Table centre piece

Bed side / side table piece

Candle lit dinner setup

All 3 close-ups in use

Cut Out

Context + Prop

Setup

Cut Out

Context + Prop

Setup

Cut Out

Context + Prop

Setup

Diyas and lily lit in the dark/semi dark

Cutout

In use in Context

On a thali + a lotus (Prop)

Multiple diyas lit in the dark

Aroma

Tulip Candle

Vishwa

Diya

Agarbatti

Candle holder

Sitara

Diya

7. W

ishl

ist

| 156

Cutout

In use in Context

On a thali + a lotus (Prop)

Multiple diyas lit in the dark

Cut out

Context

In setup on a thali/wo thali

Cut out

Context

In setup on a thali/wo thali

Cut Out

Context in use

Setting

Cut Out

In use

Setting

Combination

Cut Out

In use

Setting

Combination

Cut Out

In use

Setting

Combination

Close up of one burning

Lily (3)

Kumkum

Agarbatti

Trio candle

Ananya

Ananya 4

Ananya 6

Ananya 8

7. Wishlist

157 |

Sets of 6 and 8

Bud Vase in setting or in vase

Cut out

Context with candles

Setting with candles lit

Mood shot

Cut out

Context with candles

Setting with candles lit

Use instructions

Mood shot

Cut out

Context with candles

Setting with candles lit

Mood shot

Cut out

Context with candles

Setting with candles lit

Mood shot

Cut Out

Context + Prop

Setup

Cut Out

Context + Prop

Setup

Candles

Vismaya

Bud Vase

Flower Vase

In vase

Bouquet

Uttam

Uttam Diya

Uttam Agarbatti

7. W

ishl

ist

| 158

Cut out

In context

In use

Corner placement

Moodshot of meditation/yoga in bg

Chowki + Padukas

Cut Out

Context +candle + prop

Multiple in use, ball + pillar candles

Cut Out

Context +candle + lotus

Multiple in use, ball + pillar candles

Cut out

In context with a prop

In use

Cut out

Context with incense

Setting with incense burning

Table piece shot

Mood shot

Cut out

Brass and copper options

Context

Setting

Cut out

Options

Uttam Aroma

Misc

Snowcris Tri

Snow cris quad

Chaman Agarbatti

Chaman Aroma

Padukas

Chowki white & Black

7. Wishlist

159 |

Use –

as base for god/figurines

as display platter for cheese/tarts etc.

Cut Out

In context

In use

In setting

Nalini or mor mandir in setting

Cut Out * may be not

In context table or wall

With setting of god, flowers etc

In use * may be

Cut Out * may be not

In context table or wall

With setting of god, flowers etc

In use * may be

Cut Out * may be not

In context wall mounted

With setting of god, flowers etc

In use * may be

Cut Out * may be not

In context table or wall

With setting of god, flowers etc

In use * may be

Cut Out

In context few flowers or 1 diya

Panch Ratna Diya

Mandir Misc.

Uday asan

Uday asan ganesh

Nalini wall

Nalini Puja ghar

Aditya Asan

7. W

ishl

ist

| 160

In Use with figure

Unconventional shot- fruits/deserts etc.

Cut Out

In context few flowers or 1 diya

In Use with figure

Unconventional shot- fruits/deserts etc.

Flower/Prop

Lotus

Betel Leaf

Lilies

??? Gerbera

Orchids

Mango Leaf???

Rose/Marigold/ glitter/

Marigold/Roses

Mor Mandir

Range

Padma

Vanya

Vismaya

Vishwa

Ananya

Uttam

Sitara

Mandirs

This was my list of photo shot description and the client seemed quite happy with it as i was able to get my ideas across and he understood what I exactly meant. Thought having such a comprehensive shoot would take up a lot of time and money, the client felt the need to do it. Due to some personal and time issues the photo shot could not happen in time, and is scheduled for the end of next month (September). By then our beta-site would also be up, and if certain image requirements are there, they can be met as well.

7. Wishlist

161 |

7b. The WebstoreCompleting the webstore at this point of time was too ambitious a thought. I had all my research done. But full concentration was on finish-ing the main website.

Touch & Feel products while shopping online

One of the key deterrents to online shopping is the concern that users are not able to touch and feel the products. This is a concern espe-cially for apparel items where looks or fit play a significant role in a shop-ping decision. Therefore, it was a re-quirement to mention in our website all the measurements of the product

Although technology plays a critical role in building an eCommerce oper-ation, just focusing on a technology platform without careful planning of other factors is a recipe for failure. I have heard a lot of people say that successful eCommerce companies require a strong technology orien-tation and should therefore, be led by a technology team. Although a technology leadership can certainly help, having a strong technology foundation doesn’t obviate the need for traditional factors that make a retail business successful. Custom-ers don’t buy products in an online store just because they love the technology. At the end of the day, it comes down to having the right mix of products, at the right price, cou-pled with a strong execution and end to end experience that is difficult for other competitors to copy. No doubt that technology can and should play a key role in all above factors. However, one must remember that technology is like a foundation of a house, it is a necessary component, and if poorly designed, it can destroy the house. However, a house re-quires a lot more things than just the foundation for it to be livable.

Blog PostSuresh says:October 17, 2009 at 7:06 pm

Based on my extensive research (online) on eCommerce in India, finally launching series of stores. It’s the right time to start an online business in India. People got money, credit cards and high speed Internet at home. What else do you need? Inter-net usage is booming and next two years every middle class home will have a computer with high speed Internet. The buying power has increased several folds. I was surprised to see Ebay India’s last year statistics that Jewelry is a No 1 selling category in India. 70% of buyers are between 21 and 35. Significant % of them are NRI’s ordering items for their loved one’s in India rather than sending it from their country. One challenge in India would be the Shipping (Courier) companies. No one is up to the mark and not very reliable and responsive. Shipping is most important part in this business. Speedpost by India Post is the best service based on many people’s reviews. If India Post can improve the quality and customer service little bit more, then eCommerce in India will take the retail industry to next level. I tried to reach out many top brand companies to check if they can do dropshipping, but I don’t know they are bit allergic to eCommerce concept. May be the people who are in charge not much aware of what’s going on this area. Three years ago, there was a huge billboard in John F Kennedy Airport British Air-ways terminal, the billboard had India map on it with a message by Nokia saying “One Billion Handsets going to be sold here”. I think now it’s a reality. So no wonder if eCommerce is the next big thing in India in 2 – 5 years from now.

So cheer up guys, start your venture. Let’s not just talk, start with what you have and align it well on the run.

If we look at various aspects of tra-ditional eCommerce, majority of the functions are performed by the cat-egory managers, sourcing manag-ers, merchants, technology and the operations teams. The technology team creates the software platform, category managers and sourcing managers determine the product assortment, and then work with the vendors to actually determine the cost for the products and finalize contracts. The category managers or the vendors upload product con-tent such as descriptions, attributes, images, product copy etc. Although majority of the work in this case is

performed by an internal team, the input for most of the decisions is typically based upon explicit or implicit customer research.

7. W

ishl

ist

| 162

Online Shopping

To be online and to shop online is increasingly getting common. In the years to come a considerable part of the world population gets access to the online possibilities. And they will use them.Being online means that you can buy your jeans, order tickets to an theatre show, make an appointment at the hairdressers or register your new address with the local munici-pality. Many customers – especially the younger ones in the major cities – expect to do much of their shop-ping online.Almost any consumer goods can be sold online. Only obsolete ideas about distribution of goods limit this type of business.New companies as well as old ones ought to consider how they could benefit from online sale. Coopera-tives could sell directly to consum-ers, and retailers could expand their market area. Service providers like beauty salon could offer online booking and education institutions could sell e- learning products and relevant books.

What do you want to sell?To sell goods and services from a webshop is in many ways similar to sales from a shop in a shopping street: I Do you have the possibility to

produce or purchase your prod-uct or service?

I Can you get enough custom-ers who will buy your product or service?

I Do you make enough money by selling your product or service to cover expenses and give yourself a profit?

Without investigating the above ba-sics business questions thoroughly it would be risky business to open a webshop.

Distribution

The biggest difference between sale from a physical shop and a webshop is the way in which the product is distributed. The customer no longer gets to your shop and asks: ‘Could I have a look at that one over there?’ The customer sits behind a compu-ter in a somewhere in your country. Or maybe in another country if you have created your shop in such a way that it appeals for international customers.The direct contact to the ‘no name and no face customers’ around the country or around the world gives the webshop owner an interesting challenge – but also unlimited pos-sibilities.

Old knowledge in new surroundings;Those who grew up in a time when personal contact was a key element in a sales situation should learn to use their ‘old knowledge’ in our new Internet times. If they do they will find some brand new possibilities for re-using there knowledge.

Hence since Namo is a very small venture to make it big online, I pro-posed a module which was more manual than electronic. In India, peo-ple are still apprehensive about using their credit cards online and also the authenticity of websites. So a model where when a person confirms a purchase order, someone backend gives him/her a call or contacts via email to re-confirm the order and personally assure delivery. This as-surance plays a very important role in satisfying the user and increases credibility.

An good idea to start a webshop is only a good idea if you are able to make enough money to live the life you want. When you get an idea for a webshop it will in most instances have to be developed and looked at

from different angles, before it can be a commercially viable idea. If your idea is not commercial viable it is not a good idea to start a business on full time.This does not mean that you can not start a webshop with low income but great pleasure. You just have to make an income somewhere else.

When you sell from a webshop, a large number of the world’s popula-tion have access to your shop. But it is impossible to reach all the two bil-lion people who have the possibility to visit your shop. As a matter of fact it is very difficult to attract customers to your webshop. It is not unusual to get only 5-10 visitors per day in the first month after opening.

One way to move from product sell-ing to product merchandising on a Web site is to convey lifestyle im-ages that incorporate several of your products. Some important aspects about product showcase, which i have included in the main site as well

I Lifestyle images. Use photo-graphs of people using products.

I Expanded product information. Give a detailed product descrip-tion, describe how the product is used, and, when appropri-ate, provide information from the product’s package.

I Multiple photographs. Show the product from several angles, as well as the product being used.

7. Wishlist

163 |

How does a webshop function?

In order to understand how a webshop works technically it can be and idea to visualise it as divided in three areas:

I The shop area I The shopping cart area I The payment area

The shop areaThe shop part is the first you see when you enter a webshop. It is more or less the same what happens when you open a door to a shop situated in a shopping street. It must to be nice and tempting for the customers to look at. If not, the customer will just walk away and go to another and nicer shop. Therefore it is important to create a design, a user platform and a lay out that pleases the customer.The customer must feel welcome in the shop. Beautiful pictures, relevant text and no waiting times when uploading new pages in the webshop is some of the things a customer likes about a webshop.The shop must be so “cleverly” designed that the customer at any given time intuitively knows how to put the product he wants in to the shopping cart. No detours and difficult login.

The shopping cart areaWhen a customer “picks up” a product from your shop, this product has to be registered as a product the customer wishes to buy from you. The han-dling of “picked up products” is done by the shopping cart. Example The shopping cart works this way: When a customer clicks a button in front of a product saying: “BUY THIS”, the product will be registered as put in the shopping cart. If the product costs 10 $ the shopping cart will “remember” this. When the customer picks up another product that costs 15 $ the shop-ping cart will add this new product and add the total price to 25 $.When the customer is in the shopping cart area he has the possibility to click the button: “CONTINUE TO PAYMENT”. If he does, he will be passed on to the payment area.

The payment areaWhen you do your shopping in a super market you walk around in the shop and collect the goods you wish to buy and you put it to in the physical shop-ping cart. In the webshop you have put your goods in to the virtual shop-ping cart. When you have collected the goods you want to buy, you go to the cash register to pay. It is the same way in a webshop. First you collect your goods and then you go and pay. It is in the payment area the payment transactions are organised.Payment with credit card If you want your customers to pay by credit cards you must contact a professional supplier of payment solutions. A payment solution makes your webshop use a “secure line”. On the secure line your customer can enter name, address and credit card number. The amount of the sale will first be transferred to your “credit card company” and within a day or two the amount will be transferred to your account.

The customer must feel wel-come in the shop. Beautiful pictures, relevant text and no waiting times when uploading new pages in the webshop is some of the things a custom-er likes about a webshop.

First you collect your goods and then you go and pay. It is in the payment area the payment transactions are organised.

7. W

ishl

ist

| 164

Namo’s Webstore

As mentioned earlier, Namo wasn’t ready to go big on online retail at the moment. Right now they wanted to expand the brand and reach out globally. The website alone would have done this purpose but there was nothing to venture into a small scale webstore. No inclusion of web payment and adding a touch of personal contact were the foremost things for the Namo website. I formulated a draft of order terms for the webstore which was approved and appreci-ated by the client.

HOW TO ORDER

You can place an order for Namo products , by sending us an e-mail, or by calling us.

Ordering On-lineOur products are classified by collections and function categories. When you order any product, there is an option where

you can specify the quantity required. The order does not confirm at this time. You can review and amend your order as

desired and then confirm your order by clicking confirm order.

You will be asked to fill in some basic information that we will need in order to confirm and deliver your order. Upon our

receipt of your order, someone from our team will contact you to schedule delivery.

All information provided by you will be kept strictly confidential and will not be shared with any external parties what so ever.

Once you have successfully placed an order, a confirmation mail will be sent to the e-mail ID you provide.

Ordering via e-mailYou can place your order by sending an email to sales@namo.in, Mentioning the Product Code, Product name and quantity

required of each product. Remembering to include your name, address, and contact phone number and email it to sales@

namo.in. Upon our receipt of your mail, someone from our team will contact you to schedule delivery.

Ordering Over the PhoneTo order over the phone, please call Anup at +91 98 117 55222.

Prices & AvailabilityAll prices and charges on this site are shown in Indian Rupees (INR), including VAT, but excluding delivery charges. The total

cost of your order will be the price of the products that you order plus the applicable delivery charge. All these will be set out

clearly in your order form before you confirm your order. All goods shall remain our property until payment in full shall have

been received for all amounts of invoice. Prices, offers and products are subject to availability and may change before (but

not after) we accept your order.

Assembly & PackagingThe design assembly may vary depending on the model. Some models come already assembled and others come in sepa-

rate parts with an assembly instruction sheet included in their package. Our packaging is intelligent (takes up little space),

straightforward and environmentally-friendly. Each design comes individually wrapped and contained.

DeliveryUpon confirming your order, someone from our sales team will contact you to schedule delivery. Most orders are delivered

within 48hrs of receipt of confirmed orders.

Delivery charges in Delhi and NCR (Gurgaon, Noida) - Rs. 50

If you do not have a delivery address in Delhi, Gurgaon, or Noida please contact Anup at +91 98 117 55222 or (anup@

namo.in) and he will work with you to arrive at a solution

PaymentPayments are collected upon delivery of your order. We do not ask you to pre-pay for your order or accept online pay-

ment, as we believe that you should receive your order in satisfactory condition before you pay for it. We accept cash and

cheques. Please make out all cheques to NAMO, B & V Design Pvt. Ltd.

7. Wishlist

165 |

Webstore Template

Since the website was already made, the webstore would be an offshoot of the same. I could not have a drastically different layout or design for the webstore and had to obviously continue with the same language. This part will be 100% HTML with some ASP.net if need be. The design is yet to be finalised so is the software. But not varying too far from whats done.

Home PageA slideshow of the newest/hottest products with tabs on top.

7. W

ishl

ist

| 166

Option1 : A list of all products with their prices is shown which on rollover show the

product image and detail. This is assuming the person is redirected from Namo’s

main site. There would be horizontal and vertical navigation.

7. Wishlist

167 |

Option 2 : A grid of all products with their prices is shown which on click show the

product image and detail. When clicked on ORDER/BUY a popup comes on the

same page asking for quantity and shows the total cost. This is saved in the cart.

7. W

ishl

ist

| 168

New Range : Thumbnails of the new range up-front, may be in grid format, but

namo never really releases too many new products at a time.

How to order comes with other links like, Prices and Availability, Assembly and

packaging, Delivery and Payment.

7. Wishlist

169 |

Web

Stor

eO

rder

Exhi

biti

ons

Ord

er T

erm

s

My

Ord

er F

orm

(0)

Conf

irm

Ord

er

Reta

ilCo

ntac

t

CATE

GO

RIES

All

By C

olle

ctio

nBy

Fun

ctio

nG

ifts

& S

ets

NEW

CO

LLEC

TIO

NSn

ow C

ris

Cham

anU

ttam

BEST

SEL

LIN

GPa

dma

Han

ging

Diy

aSr

i Pa

duka

sVi

smay

a in

Vas

e

SPEC

IAL

OFF

ERS

Padm

a |

Sita

ra |

Van

ya |

Vis

hwa

| U

ttam

| V

ism

aya

|Ana

nya|

Mis

c. |

Man

dirs

Padm

a D

iya

Padm

a D

iya

Bras

s

Padm

a D

iya

Copp

er

Padm

a D

iya

wit

h ha

ndle

Padm

a D

iya

wit

h ha

ndle

Bra

ss

Padm

a D

iya

wit

h ha

ndle

Cop

per

Padm

a Ag

arba

tti

Padm

a Ag

arba

tti B

rass

Padm

a Ag

arba

tti C

oppe

r

Padm

a H

angi

ng D

iya

(Set

of

5)

Padm

a H

angi

ng D

iya

wit

h ho

ok (

Set

of 5

+ h

ook)

Padm

a H

angi

ng d

iya

hook

onl

y

Padm

a Ba

il Si

ngle

(T

Ligh

t)

Padm

a Ba

il Si

ngle

(Ca

ndle

Hol

der)

Padm

a Ba

il Pa

ir (

T Li

ght)

Padm

a Ba

il Pa

ir (

Cand

le H

olde

r)

Padm

a Ba

il D

oubl

e (T

Lig

ht)

Padm

a Ba

il D

oubl

e (C

andl

e H

olde

r)

Padm

a Ba

il Tr

iple

(T

Ligh

t)

Padm

a Ba

il Tr

iple

(Ca

ndle

Hol

der)

Padm

a Ar

oma

Dif

fuse

r

Padm

a Ca

ndle

hol

der

(pai

r)

Padm

a Pa

ncha

Pla

te

Padm

a Tr

i pla

te

Padm

a Th

ali B

ig

Padm

a Th

ali S

mal

l

Padm

a Br

ahm

a

Padm

a As

an

Padm

a W

all d

isc

Padm

a Si

ngha

san

Rs.4

25

Rs.

540

Rs.

400

Rs.

350

Rs.

345

Rs.

650

Rs.

675

Rs.

250

Rs.

300

Rs.

400

Rs.

550

Rs.

420

Rs.

425

Rs.

678

Rs.

125

Rs.

120

Rs.

220

Rs.

500

Rs.

340

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

Ord

er

My

Ord

er F

orm

PPD

85

Padm

a Ph

ool D

iya

Rs 4

25

Mat

eria

l

Stai

nles

s St

eel

Qua

ntit

y

4

Ord

er S

ubto

tal*

: R

s. 1

,700

CON

FIRM

ORD

ER M

ORE

Incl

usiv

e of

tax

es.

Del

iver

y ch

arge

s ex

tra

7. W

ishl

ist

| 170

An interesting article I found online

15 Reasons I will not buy from your e-shopPosted by Darpan Munjal On November - 1 - 2009

You can make a safe assumption that the reason I am visiting your online store is because I have an intention to buy something from you. All I need from you is to help me find what I am looking for and then take me from point A (Product Page) to point B (checkout). I am ready to fork over my money if you show me a clear path! So it is up to you to decide how easy or difficult you want my journey to be.

1. Do not force me to register during the checkout process. If I click on check-out, that is usually a safe assumption that I have made a decision to pur-chase. Please get out of my way so you can take my money as quickly as possible before I change my mind. Don’t present me with unnecessary registration steps or other information that would slow me down. If you want to give me an option to register after the checkout is complete, sure I will consider it.

2. Remember that Google is not your target customer – I am. Don’t write your product descriptions or other content containing tons of SEO keywords with a sole purpose to please Google. Sure you need to focus on SEO but the product description has to make sense to customers first. At the end of the day, you might get a good ranking on Google but if consumers don’t understand the content on your site, you will not win.

3. Don’t let me add something to the cart if later you will tell me that it is out of stock. If you already know that something is out of stock, can you please show that up-front on the product page so we don’t waste each other’s time?

4. Do you have categories which do not have any products online? Can you please disable those categories so that I don’t have to click those catego-ries, just to find a “No Products Found” message?

5. Just because you have a lot of promotions and products on your site, you don’t have to show all of them on your homepage!! Please keep the homepage clean and focus only on few key promotional or merchandise messages that truly tell a compelling story. If you have more than 100 links on your homepage, you are trying too hard!

6. It would be nice to know when I will receive an item – not just when you plan to ship it. You know my zip code – you know the delivery times with UPS and FedEx, you know your processing time – so can you please show me a date when I should expect to see the item at my door instead of having me do all guesswork in my head?

7. If I add something to the shopping cart, please show me the cart before showing any other recommendations or offers that I might be interested in. Don’t slow me down by showing 10 recommendations before I get to my cart page. I have a short attention span and if I get overwhelmed with too much unnecessary information, I might just leave.

8. If you take my email address during checkout, please make good use of it! For example, if would be nice of you to follow up few days later to check if the item arrived properly, and if I would be interested in writing a review for the item. I don’t mind writing an honest review – you just have to ask and remind me! Which is a good segue to the next point.

“ Don’t present me with un-necessary registration steps or other information that would slow me down. “

“ ...so can you please show me a date when I should ex-pect to see the item at my door instead of having me do all guesswork in my head? ”

7. Wishlist

171 |

9. If I write a negative review about a product, please don’t go out of way to “moderate” the review to put a positive spin to my content. Please remember that customer reviews are supposed to be “unbiased” and any attempt from your side to hide or suppress the negative reviews is a sure way to lose trust with your loyal customers.

10. Don’t wait until the final step in the checkout to show me the final price including the coupon discounts, taxes and shipping costs. I would like to know that information at the shopping cart page so there are no sur-prises during the final step. If you need my zip code in the shopping cart page to calculate these costs, just ask me and I will be happy to provide that information to you. Which leads me to the next point –

11. If I have told you anything about myself such as my zip code, please try to remember it. Don’t make me re-enter that information at the time of checkout. There is a good probability that I will not change that informa-tion, but just give me an option to change it later if I need to.

12. Please don’t try to hide your contact information just because you want to minimize the number of customer service calls. If you have an 800 number hidden somewhere on the site, please display it prominently. Customers need to know up-front that there is an easy way to contact you if something goes wrong with their order.

13. When I am providing my credit card information, you really don’t have to ask me what type of credit card it is because you can figure it out from my credit card number. Just show me the credit card type for confirma-tion and I will let you know if there is a problem.

14. While you are thinking about that checkout experience, can you also do something about that Captcha! It is nice to know that you are concerned about our security and want to make sure that I am a human. But for the sake of humanity, please don’t make me decipher that 10 characters Captcha image. Just try to keep it simple, if possible.

15. If you display any AdSense ads on your retail store, can you please turn those off? That sends a mixed message to me as a customer. If you are truly an online retailer, your focus should be on selling products, not making a few bucks from customers who accidentally click on those ads

and end up somewhere else.

Some of the above points may seem very obvious but it is amazing to see

even large online retailers who end up building complex checkout processes,

overlooking some of these points just because they have a “complex” busi-

ness. If you think from customer’s perspective, they really don’t care about

complexities in business – they are looking for a simple and intuitive shop-

ping experience.

I think most of us would agree that a clean and intuitive user experience goes

a long way in maintaining healthy conversion rates for an eCommerce busi-

ness. I recently came across a great post that showcases 35 online retailers

who have done an outstanding job of keeping the user experience simple

and fresh. In the past, I have seen a lot of retailers focusing on adding more

and more content to the pages so that they can make use of the very last

pixel of white space on their page. Looking at these designs, perhaps the

focus should be quite opposite – how to remove all the unnecessary content

out of a page and increase the amount of that white space so that the users

are presented with crisp and quality content that truly matters.

“ Please don’t try to hide your contact information just be-cause you want to minimize the number of customer serv-ice calls. ”

8. Discipline and Medium

It is always important to establish the context in which this project took place. Context is a term very easily thrown around nowadays, but this still doesn’t erode its significance. History, influences, discipline, education, institu-tion, country, city, time – all these are important factors in the process of a project. We have already discused about the educational institute. I felt the need to include my learning into the project. Now let’s briefly look at the history and current state of world graphic design today, and then an insight on the

medium- Internet.

173 |

8. Discipline &

Medium

(detail)

8a. Graphic Design Then and Now

Late 19th century: Early beginnings.

Graphic design work came in form of large advertising posters for the cabaret, and on cigarette papers, all in the Art Nouveau style. Mostly, graphic design was found in the form of posters and books. It was closely associated with the British Arts and Crafts Movement’s promotion of ‘art’ printing. Even though such work was often mass-produced it still looked hand-printed.

Early 20th century

The graphic arts started being used to develop comprehensive corporate identities. 1907: Peter Behrens was the first designer to be appointed artistic adviser to AEG, a German manufacturer. Designers were jack-of-all-trades: furniture, lighting, textiles, ceramics, etc. Graphic design was seen as just another field in which artists or architects/designers would work at.First World War: Using graphic design as a tool for propaganda became very significant.

1920: Rise is in the status of adver-tising.

1922: William Addison Dwiggins coined the term “graphic design.”

1927: Raffe’s Graphic Design, pub-lished, is considered to be the first book to use “Graphic Design” in its title

Above: Example of early graphic design such as a poster for the Moulin Rouge by Henri Toulouse.Below: Poster for the play Lorenzaccio starring Sarah Bernhardt, designed by Alphonse Mucha, 1896.

Above: Another famous poster advertis-ing an event, by Henri Toulouse.Below: Poster for the 13th Vienna Secession exhibition, designed by Kolo-man Moser, 1902.

8. D

isci

plin

e &

Med

ium

(det

ail)

| 174

Above: El Lissitzky adopted the reduc-tive geometric style, producing in 1920 his famous poster Beat the Whites with the Red Wedge

Right: Piet Zwart did not adhere to

traditional typography rules, but used

the basic principles of Constructivism

and “De Stijl”

Above: Joost Schmidt Poster for Bau-haus Exhibition in Weimar, July- Sep-tember 1923

Post World War I

After the first war people looked at mass production as a ray of hope, ‘sweeping artistic tradition away with industrial progress’. There was a movement to strip everything down to its purest elemental forms.Influenced by futurism, constructiv-ism, and De Stijl the designers as-sociated with the Bauhaus created a new rational approach to graphic design. Bold geometric forms, lower case lettering, and simplified layouts.In 1915 introduced an abstract, non-objective geometric painting style he named Suprematism. They rejected individual creative expression in favour of “impersonal creativity.” Prior and during WWII the Swiss school built on the Bauhaus development to create the International Graphic Style. Strong reductivist aesthetic, lots of ‘white space’ and ‘objective photography. Form Follows Function.

Post World War II

Post-War 1950’s: Dramatic increase in the use of design as a marketing tool. Modern graphic design became inextricably linked with the consum-ing desires of corporate advertising, at the same time it became separate from its social foundation.Eye catching, expressive and humorous graphic design work for high profile corporate clients such as IBM (Paul Rand) and Knoll International. The Swiss schools influence spread internationally with the popularity of typefaces such as Helvetica and Univers.

1960’s, 70’s and 80’s

Fundamental questioning of Modernism and its ‘de-humanizing aesthetic blandness.’ This was the time of artists such as Warhol, Peter Blake and Peter Hamilton.A large amount of anti-Vietnam posters did not use the Modernist approach and still produced powerful graphic designed messages.Milton Glaser produced work influ-enced by pop art, itself influenced by commercialism. Wolfgang began experimenting with more expressive compositions.

There was a shift in public perception of advertising and interaction with graphic design. Infusion of humour with advertising.

Logo design was on a rise. Elevated products to the forefront of consum-ers’ consciousness; targeted new affluent middle class consumers.

60’s 70’s: Many companies com-missioned new logos - the universal language of corporate capitalism - to compete more effectively in a global market.

70’s: Punk Movement - Brash, rough and ready, anarchic, energy, frustra-tion, contemporary youth culture, mocking the aesthetic refinement of Modernism.

80’s: Meteoric rise of the ‘brand’ which became a globally accepted and understood seal of approval. Levi’s and Nike jump in.

175 |

8. Discipline &

Medium

(detail)

Left and Top: These posters are famous examples of Paul Rand and his expres-sive, humorous graphic design work for high profile clients such as IBM and Knoll International.

Right and below: Milton Glasers work was heavily influenced by commercial-ism. His work is characterized by direct-ness, simplicity and originality.

Above and Below: Fundamental questioning of modernism inspired by Wolfgang. Above :Bonnie McLean made a series of rock and roll posters for the Fillmore.

8. D

isci

plin

e &

Med

ium

(det

ail)

| 176

A whole new area of graphic-design activity mushroomed in the mid-1990s when Internet commerce became a growing sector of the global economy, causing organizations and businesses to scramble to establish Web sites.

1990’s

Post modernism escaped the confines of art schools and was embraced by marketers who hungri-ly chased after the elusive ‘cool’ - the important factor in branding. Eventu-ally, post modernism came to mean a multiplicity of appropriated graphic styles, characterized by visually arresting, layered compositions of frequently indecipherable meaning. Subvertising: jamming of corporate messages with strong direct com-munication in order to lead an anti-globalization revolution. Motivated by interest in sociopolitical reform.Characteristics were mixing of di-verse type size and weights, over-printing, cluttered pages, deliberate ’mistakes’, unpredictable historic references and blurred photographs.

2000’s

Graphic design in the 2000’s is held on to the Digital Revolution, which began in the 1960s.The computer, with its many periph-erals, has changed the way many look at design. Some designers have completely succumbed to this technology and traded in their tech pens and X-acto knives for a Wa-com tablet and a printer. Designs are now easier and quicker to complete. Many variations of a design can be made in seconds as compared to the lengthy times of changing a de-sign in the traditional fashion.

Though design is still not solely contained by the technology of the Digital Revolution. Our designs are still strongly influenced by many periods and individuals from the past. The work of Kauffer and Cassandre as well as other designers in Pictorial Modernism were producing pieces that would still work today. They often abstracted images to near silhouettes and worked largely in two-dimensional planes; much like the majority of design today.

Left and Above: These two anti- ads by the ad busters organization are subver-sive attempts to educate people about the extreme commercialism in the world today.

Left: The rebellious album cover ‘God Save the Queen’ of the Sex Pistols could symbolize the punk movement in the 70’s.

Above: This subvertisement mocks the famous brand, United Colors of Benet-ton, courtesy of Ad busters.

177 |

8. Discipline &

Medium

(detail)

So many movements are still holding a strong place in our designs, like the Bauhaus, Cubism, Constructivism, De Stijl, and the Isotype movement. All of which played a major role in getting current design where it is.

Above and above right: Famous posters from the Bahaus, DeStjil and Construc-tivism etc. era, whose insight can be seen in the modern posters below.

An example of strong Web design is the Herman Miller for the Home Web site, designed by BBK Studio in 1998. Designing a Web site involves the layout of screens of information rather than of pages, but approaches to the use of type, images, and colour are similar to those used for print.

8. D

isci

plin

e &

Med

ium

(det

ail)

| 178

Graphic Design Today

New Pluralism: It is a response to the greater multicultural global soci-ety and at the same time prompted by the strong need from designers to develop their own style and thus stand out in a crowd.In the 21st century, graphic design is ubiquitous; it is a major component of our complex print and electronic infor-mation systems. It permeates contem-porary society, delivering information, product identification, entertainment, and persuasive messages. The re-lentless advance of technology has changed dramatically the way graphic designs are created and distributed to a mass audience. However, the fun-damental role of the graphic designer giving expressive form and clarity of content to communicative messages remains the same.GUI: Graphic user interfaces lead to a whole new fresh medium, and graphic design today is increasingly about movement and play.As a creative designer, I feel no intim-idation with these increasing num-bers. Good design, whether it’s ex-ecuted with a sketchbook and pencil or a Wacom Intuos tablet and pen, begins with a great idea. Technology is meaningless without the talented people who shape it. The Internet has created a wide plat-form for designers to share ideas making collaborations between graphic designers, transference of ideas. Distrust of commercialism: It is now time for practitioners to ques-tion their works ethical relevance. Graphic design has been cynically used as a means to induce people to buy products that they don’t need. There are efforts that can be seen at grass roots levels: e. g. Ad busters.The desire for emotional connec-tions: Increasingly designers are subsidizing self-initiated experimen-tal work that allows them to express their own individuality and personal ideas with revenues from commer-cial work.

“ The technology driven accel-eration has increased the sty-listic obsolescence of graphic design solutions - what ap-pears cutting edge today will appear old hat the next.”

The images shown here are from the portfolio of “nietylko” who I feel is a good example of the new pluralism found in graphic design today. ‘Valp aka Maciej Hajnrich is a freelance illustrator and graphic design maniac based out of Katowice, Poland. His showcase space -Nietylko- is over- loaded with abstract and colorful images..

179 |

8. Discipline &

Medium

(detail)

8b. The Medium - Internet

The Internet has become so ubiquitous it’s hard to imagine life without it. It’s equally hard to imagine a world where “www” isn’t the prefix of many of our online activities. The terms Internet and World Wide Web are often used in everyday speech without much distinction. However, the Internet and the World Wide Web are not one and the same. The Internet is a global data communications system. It is a hardware and software infrastructure that provides connectivity between computers. In contrast, the Web is one of the services communicated via the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs.The Internet is also often simply referred to as the net. In many technical illustrations when the precise location or interrelation of Internet resources is not important, the Internet is often referred as the cloud, and literally depicted as such.

The Web is just one of the ways that information can be disseminated over the Inter-net. The Internet, not the Web, is also used for e-mail, news, instant messaging and FTP. So the Web is just a portion of the Internet, albeit a large por-tion, but the two terms are not synonymous and should not be confused.

8. D

isci

plin

e &

Med

ium

(det

ail)

| 180

The first step in understanding the technical know-how of the web, is the difference between the web and the Internet. Lets take a commonly used example to illustrate this difference. Imagine that the Internet and the web together make up a huge, sprawling city. Every building in the city represents the world wide web, holding the information that you want to retrieve. If you know the address of the building, which floor its on, and the room where the information is, then you can simply get into your car and drive there. Each road is a path to that information. These interconnected roads represent the Internet.Another way to define the web is through a concise definition.

According to Wikipedia, ‘The World Wide Web (or the “Web”) is therefore a system of interlinked, hypertext documents accessed via the Internet. With a Web browser, a user views Web pages that may contain text, images, and other multimedia and navigates between them using hyperlinks.”So lets get technical. Based on the earlier metaphor of a city, we can gather that if you explore the web you find information, whereas if you explore the Internet you will find routers, computers and cables. To understand the system in more detail, we need to look at its parts and how each part works.

“Based on the earlier meta-phor of a city, we can gather that if you explore the web you find information, whereas if you explore the Internet you will find routers, computers and cables.”

World Wide Web Technology is made of the following parts: The Web Browser that is viewing the information The Web Server that holds the information

The Protocol that connects the above two, the client and the server - HTTP

The Language used to compose the Web documents - HTML

The Means to locate the information - the URL

The BrowserThe Browser is a software applica-tion that requests the retrieval of information from the World Wide Web and displays the data on your PC. E.g. Mozilla Firefox, Internet Explorer.

The ServerThe Server is the hardware running a set of software applications. The Server is also the software applica-tion that retrieves the requested data and formats it for display or executes tasks requested by the browser.

The ProtocolThe Protocol is the method used to communicate between the browser and server.

HTTPHTTP stands for HyperText Trans-fer Protocol. HyperText refers to a collection of hyperlink-laden docu-ments. (A hyperlink is a word, phrase, or image that when clicked “sends” users to another document.)Transfer refers to the sending of commands from the browser to the Web server to “read” the requested

The World Wide Web is the only thing I know of whose shortened form takes three times longer to say than its long form. – Douglas Adams, The Independent on Sunday, 1999

How Does the Web Work?

181 |

8. Discipline &

Medium

(detail)

WebServer

Static ContentsHTML

Web Browser

1

1

2

3

2

3

Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource. The web browser then initiates a series of com-munication messages, behind the scenes, in order to fetch and display it.

First, the server-name portion of the URL is resolved into an IP address using the global, distributed Internet database known as the Domain Name System (DNS). This IP address is necessary to contact the Web server. The browser then requests the resource by sending an HTTP request to the Web server at that particular ad-dress. In the case of a typical web page, the HTML text of the page is requested first and parsed immediately by the web browser, which then makes additional requests for images and any other files that complete the page image.

In a simpler manner, first you access one of the browsers, such as Internet explorer. Then enter the address (URL such as www.google.com) of the information you want to retrieve. When you press enter what happens is shown in the diagram below:

The Browser sends the URL via the protocol HTTP to the server (software) such as Oracle HTTP Server, which is on the server (hardware)

The server software application retrieves the data, formats it using HTML and;

Returns the static page back to the browser for your viewing pleasure

Above: The diagram explains the three main steps that allow the user to access information via the web and Internet.

HTTP

8. D

isci

plin

e &

Med

ium

(det

ail)

| 182

Web page. Protocol is an agreed-upon sequence of bits, bytes or characters exchanged between pro-grams for purposes of sending and receiving data.

HTMLHTML stands for HyperText Markup Language. HTML is the language used to build Web sites (pages). HTML uses standard codes, or tags, to determine how a Web page looks when your browser dis-plays it. HTML tags also display the hyperlinks that connect information on the World Wide Web. Example

of tags controlling page presenta-tion: <B> Make me Bold </B> <H1> I am the largest Header </H1> <H6> I am the smallest header</H6> <BODY BGCOLOR=”GREEN”> <FONT COLOR=”RED”> Exam-ple of a tag defining a hyperlink: <a HREF=”http://www.asu/asuweb/ entrance”/< </a>

URLURL stands for Uniform Resource Locator and it is the address of a file and usually consists of four parts: the protocol, server (or domain), path, and file name. For example: http://

www.asu.edu/asuweb/studentaddresses, is an example of an URL. http is the protocol, and www indicates you are going to access the World Wide Web. asu.edu is the server, or domain. asu is the owner of the domain and edu is the owner type designator and indicates that the owner of the information is an Educational institution. Other organization type designators you may have seen include:.com= Commercial, .gov = Government and .org = Organization.Country specific websites have specific domains like .in (India) .au (Australia)

Above: An illustrated view of the world wide web and all the links between different packets of information, giving an idea of the innumerable number of links that are

seen, if he focus on a popular destination such as Wikipedia, the free encyclopedia.

183 |

8. Discipline &

Medium

(detail)

The evolution of Graphic Design and the web

By May 1991 the first web applica-tion was ready for use by scientists at CERN laboratories in Switzerland, Geneva. 16 years have passed since the development of this medium, and a lot has changed since then. Primarily it wasn’t something that everyone could use. In its early stag-es it required a lot of technical ex-pertise and was hardly user-friendly. Despite this, researchers, scientists and academics used the web to share data and quickly learned the new technology. This community started regularly sharing information through the web. As the web grew and the number of people using it also increased, the first graphical browser, called Mosaic was devel-oped by the NCSA (National Centre for Super computing Applications).

So by 1993, the web browser came equipped with the ability to handle images as well. This became the first time the web layout was born, since text and images fell together into ta-bles.By 1994, the first commercial web browser, Netscape Navigator was released. Web traffic also increased further and many commercial ven-tures, entrepreneurs and enthusi-asts became involved. This lead to the first time graphic designers were brought into the field. These early designs were characterized by an ‘over-saturation of images and poor functionality.’ This could be because the layouts created by the design-ers were print-based and with little knowledge about navigation and the web as a medium.

“So by 1993, the web browser came equipped with the abil-ity to handle images as well. This became the first time the web layout was born, since text and images fell together into tables. “

Left: This screenshot of an old Microsoft homepage shows an example of design when graphic browsers were very new, around the year 1994-95.

8. D

isci

plin

e &

Med

ium

(det

ail)

| 184

“Websites were becoming cool and exciting, attracting the attention of the ever increasing number of users online.”

“...we have now entered and are evolving through the usability era...This means taking into account ‘not only technical con-cerns such as download time and usability but also presenta-tion, emotion, and approachability’.”

Soon, the web was filled with in-creasingly newer applications (ap-plets and videos), add-ons to Web browsers for increased functionality (plug-ins) and newer Web Browsers. “Introductory animations created in Macromedia Flash and naviga-tion applets coded in Java (the pro-gramming language) became all the rage.” Websites were becoming cool and exciting, attracting the attention of the ever-increasing number of us-ers online.

According to Luke Wroblewski, a researcher and interface designer, we have now entered and are evolv-ing through the usability era. Today, the aim is not to make the site look ‘cool,’ but to focus on the usability guidelines, so that web-browsing becomes an intuitive experience. This means taking into account ‘not only technical concerns such as download time and usability but also presentation, emotion, and ap-proachability’.

Left Above: The Microsoft website from 1999 is a symbolic example of the kind of commercialized web layouts that were being churned out at the time.

Left Below: A 2009 screenshot of the same site shows how much the designs have changed since then, increasingly focusing on the conven-ience of the user.

185 |

8. Discipline &

Medium

(detail)

Illustrated timeline of the development if the web over the years

This timeline was an exciting exercise for me, because I got to unearth all the mysteries behind the old days of the Internet. Surprisingly, the information available is often contradictory and also extremely detailed. My aunt was the first batch of Masters in Computer Applications, so I had been aware of the Internet much before people my age were. She has helped me for this concise timeline. So with her help I have edited and chosen what should or should not go in based on relevance and interest. This timeline shows the journey of the web-using communities across the world, and how people have changed as it turned into a familiar medium.

1965: E-mail predated the inception of the Internet, and was in fact a crucial tool in creating the Internet. E-mail started in 1965 as a way for multiple users of a time-sharing mainframe computer to communicate.

1974: The term “Internet” was adopted in the first RFC published on the TCP protocol, combining the different networks under one common internetwork protocol. So “an Internet” meant any network using TCP/IP.In those days connections were restricted to universities and the military, therefore strictly non-commercial.

1976: A 21-year old Bill Gates writes ‘An Open Letter to Hobbyists’, a docu-ment in which he condemns Open-source software and software piracy. “Who can afford to do professional work for nothing?”, he wrote, a precursor to the veritable war for market share in the 21st century between his Micro-soft and Linux and Unix based computer solutions.

1980’s: The connections expanded to more educational institutions, and even to a growing number of companies such as Digital Equipment Corpo-ration and Hewlett-Packard, which were participating in research projects or providing services to those who were. Quickly, the Internet spread through the developed countries.

1981: Ian Murphy, who calls himself Captain Zap, was the first hacker to be tried and convicted as a felon. Murphy broke into AT&T’s computers in 1981 and changed the internal clocks that metered billing rates.

1983-84, a forum named mod.ber, was created and managed by Brian E. Redman. Regularly, Redman and a few associates posted summaries of in-teresting postings and threads taking place elsewhere on the net. In this pre-http era this forum was one which had strong similarities to what we would call a blog today.

1988: The Morris worm or Internet worm was one of the first computer worms distributed via the Internet; it is considered the first worm and was certainly the first to gain significant mainstream media attention. It was writ-ten by a student at Cornell University, Robert Tappan Morris, and launched on November 2, 1988 from MIT. The worm was released from MIT to dis-guise the fact that the worm originally came from Cornell.

1990: The first of the search engines was the Archie search engine from McGill University in 1990, followed in 1991 by WAIS and Gopher. All three of those systems predated the invention of the World Wide Web but all contin-ued to index the Web and the rest of the Internet for several years after the Web appeared.

1965:Email is born

1974:Non-commercial Internet

1976: Bill Gates condemns Open Source software

1980’s: Expansion to other institutes

1981: First Convicted Hacker: Zap

1983-84: Pre-http era’s blog-like forum

1988: Morris the Internet worm

1990: Search Engine

8. D

isci

plin

e &

Med

ium

(det

ail)

| 186

May 22, 1990: Microsoft launched Windows 3.0. The new version of Microsoft’s operating system boast-ed such new features as stream-lined user interface graphics and improved protected mode capability for the Intel 386 processor. It sold over 100,000 copies in two weeks.

1990 to August 6th 1991: The Web was created around 1990 by the Englishman Sir Tim Berners-Lee and the Belgian Robert Cailliau working at CERN in Geneva, Switzerland. This date marked the debut of the Web as a publicly available service on the Internet.

1993: the Mosaic web browser in 1993, was the first graphical browser de- veloped by a team at the National Centre for Supercomputing Applications at the University of Illinois at Urbana-Champaign (NCSA-UIUC), led by Marc Andreessen..

May 1990: Microsoft launches Windows 3.0

1993: First Graphic Web Browser

August 1991: Debut of the World Wide Web (WWW)

A screenshot of an old version of Netscape, which was the most widely used web browser in 1994.

187 |

8. Discipline &

Medium

(detail)

1994: Mosaic was eventually su-perseded in 1994 by Andreessen’s Netscape Navigator, which replaced Mosaic as the world’s most popular browser

1994: The first full-text Web search engine was WebCrawler in 1994. Before WebCrawler, only Web page titles were searched.

April 1994, “Jerry’s Guide to the World Wide Web” was renamed “Yahoo!”. Its URL was akebono.stanford.edu/ yahoo.By the end of 1994, the web directory, Yahoo had already received one million hits.

August 1994. The first secure ecommerce transaction is reported to have occurred. The product was the CD “Ten Summoner’s Tales” by Sting.

1994: Netscape Navigator

1995: Jeff Bezos launches Amazon.com, eBay launches

1995: Internet Explorer

1994: First Text-based search engine

1994: Yahoo! Web Directory

1994: First online transaction

Internet Explorer 1 debuted on August 16, 1995. It was a reworked version of Spyglass Mosaic, which Microsoft had licensed, like many other companies initiating browser development, from Spyglass Inc. It came with Microsoft Plus! for Windows 95.

Amazon.com: The company be-gan as an online bookstore. Bezos named the company “Amazon” after the world’s largest river

eBay was founded in Pierre Omid-yar’s San Jose living room back in September 1995. It was from the start meant to be a marketplace for the sale of goods and services for individuals.

1996: Blogging becomes popular

July 1996: Webmail Services

1996: After a slow start, blogging rapidly gained in popularity: the site Xanga, launched in 1996, had only 100 diaries by 1997, but over 20 mil- lion as of December 2005.

July 1996: The original Hotmail ser- vice was founded by Jack Smith and Sabeer Bhatia, and was one of the first webmail services on the Internet. It was commercially launched on July 4, 1996, the American Independence Day, symbolizing “freedom” from ISP-based e-mail and the ability to access your inbox from anywhere in the world.

Left: The logos shown here are more fa-miliar to us as hotmail logos. The various logos here show how it has developed and changed ownership over the years.

8. D

isci

plin

e &

Med

ium

(det

ail)

| 188

1997: google.com

1998: Birth of PayPal

1998: ‘Open Source’ Label officially created

1998: Blog Community

1997: The domain google.com was registered on September 14, 1997, and the company was incorporated as Google Inc. on September 7, 1998 at a friend’s garage in Menlo Park, California.

1998: Open Diary launched in October 1998, soon growing to thousands of online diaries. Open Diary innovated the reader comment, becoming the first blog community where readers could add comments to other writers’ blog entries.

1998: The “open source” label came out of a strategy session held at Palo Alto, California, in reaction to Netscape’s January 1998 announcement of a source code release for Navigator. The group of individuals at the session included Christine Peterson who suggested “open source”, Todd Anderson, Larry Augustin, Jon Hall, Sam Ockman, and Eric S. Raymond. They used the opportunity before the release of Navigator’s source code to free themselves of the ideological and confrontational connotations of the term free software. Netscape licensed and released its code as open source under the name of Mozilla.

Confinity Inc. is best known as the creator of PayPal. It was founded in December 1998 by Max Levchin, Peter Thiel, and Luke Nosek

189 |

8. Discipline &

Medium

(detail)

August 1999: Evan Williams and Meg Hourihan (Pyra Labs) launched blogger.com in August 1999 which was purchased by Google in Febru-ary 2003.

Early 2000: GameSpy Arcade is a shareware multiplayer game server browsing utility as well as a spam oriented marketer. Gamespy arcade allows players to view and connect to available multiplayer games, and chat to other users of the service. It was initially released by GameSpy Industries, a division of IGN Enter-tainment, in early 2000, to replace the aging GameSpy3D program.

2000: Discovering a demo of their song I Disappear on the Napster P2P filesharing network, rock band Metallica filed legal action against Napster over it. This was the first time a major musical act publicly went against allegedly illegal file sharing

Jan 2001: Wikipedia’s English edition was launched on January 15, 2001, as a complement to Nupedia, an expert- written and now defunct encyclopedia. The project is currently operated by the Wikimedia Founda-tion, a non- profit organization cre-ated by Jimmy Wales, who claims to be the sole founder of Wikipedia. This is disputed by Larry Sanger, who also claims to be a founder of Wikipedia.

August 1999: blogger.com

March 10th 2000: Dot Com Bubble Bursts

1999-2000: Friends United

Early 2000: Shareware Multiplayer Server Utility

2000: Alleged illegal file sharing - Napster

Jan 2001: Wikipedia English edition

1999-2000: The website was brain- child of Steve and Julie Pankhurst of Barnet, Hertfordshire in 1999. Friends Reunited was officially launched in July 2000. By the end of the year, it had 3,000 members, and a year later this had increased to 2.5 million.

March 10th 2000: The dot-com bub-ble burst on March 10, 2000, when the technology heavy NASDAQ Composite index peaked at 5048.62 (intra-day peak 5132.52), more than double its value just a year before. By 2001, the bubble’s deflation was running full speed. A majority of the dot-coms had ceased trading, after having burnt through their venture capital, often without ever making a gross profit.

8. D

isci

plin

e &

Med

ium

(det

ail)

| 190

Jan 23,2003Slammer Worm

2001: Google’s Search engine turns popular

2002: Photo Sharing website

Nov 2003: MySpace Service

Jan 2004: Orkut is launched

Feb 2004: Facebook is founded

2004: Innovation in webmail

2001: the Google search engine rose to prominence. Its success was based in part on the concept of link popularity and PageRank.

Apple added a new user interface and the ability to burn CDs, and re-moved its recording feature and skin support, and released it as iTunes in January 2001

2001: Apple Launches iTunes

2002: Flickr is a photo sharing website and web services suite, and an online community platform, which is generally considered an early example of a Web 2.0 application. Flickr was developed by Ludicorp, Canada-based company founded in 2002. It was launched in Feb 2004. The service emerged out of tools originally created for Ludicorp’s Game Neverending, a web-based massively multiplayer online game. Flickr proved a more feasible project and Game Neverending was shelved.

Jan 25th 2003: The SQL slammer worm is a computer worm that caused a denial of service on some Internet hosts and dramatically slowed down general Internet traffic across the world, starting at 05:30 UTC on January 25, 2003. It spread rapidly, infecting most of its 75,000 victims within ten minutes.

2003: The current MySpace service was founded in November 2003 by Tom Anderson (an alumnus of both the University of California, Berkeley and the University of California, Los Angeles), the current president and CEO; Chris DeWolfe (a graduate of University of Southern California’s Marshall School of Business); and a small team of programmers. The corporate history of myspace is under dispute.

Jan 2004: Orkut was launched on January 22, 2004 by the search company Google, the brainchild of Orkut Büyükkökten, a Turkish soft-ware engineer, who developed it as an independent project while work-ing at Google.

Feb 2004: Harvard University, and Phillips Exeter Academy Mark Zuck-erberg founded “The Facebook” in February 2004, with support from Andrew McCollum and Eduardo Saverin. By the end of the month, more than half of the undergraduate population at Harvard were regis-tered on the service.

2004: After a period of technologi-cal stagnation, the webmail industry received a significant boost in 2004 when the Google search engine an- nounced its own mail service, Gmail. Featuring vastly increased storage space, speed and interface flexibility, this new competitor spurred a wave of innovation in webmail.

191 |

8. Discipline &

Medium

(detail)

2005: In October, the 2005 Sony BMG CD copy protection scandal began, where it was discovered that Sony BMG Music Entertainment surreptitiously and possibly illegally distributed copy protection software that forced itself to install on computers playing their audio CDs. As a result, many Windows based computers belonging to consumers were left vulnerable to exploit and hacking.

2005: YouTube is a popular video sharing website where users can upload, view, and share video clips. YouTube was created in mid February 2005 by three former employees of PayPal. Google bought the company by 2006.

2006: Twitter’s origins lie in a “daylong brainstorming session” that was held by board members of the podcasting company Odeo. During the meeting, Jack Dorsey introduced the idea of an individual using an SMS service to communicate with a small group, a concept partially inspired by the SMS group messaging service TXTMob.

...the word “twitter,” and it was just perfect. The definition was “a short burst of inconsequential information,” and “chirps from birds.” And that’s exactly what the product was. —Jack Dorsey

Netscape announces the browser will no longer be developed or supported from February 1, 2008 Google celebrates its 10th birthday

2008 Google’s launches new entry into the web browser sphere - Google Chrome. For six years, Google’s Chief Executive Eric Schmidt was against the idea of building an independent web browser. However, after co-found-ers Sergey Brin and Larry Page hired several Firefox developers and built a demonstration of Chrome, Mr. Schmidt admitted that “It was so good that it essentially forced me to change my mind

It’s been quite a rocket ride for the Internet after a slow ramp up until 1991. While the World Wide Web began as a tool to aid physicists, like many other revolutionary inventions, it actually had its roots in the military in terms of having a ready made conduit on which to be relayed. It’s nice to see that tax dollars spent on defence can actually wind up creating something other than tools to kill humans.

In the following pages we see some graphical timeline of web browsers and web

technology.

2005: Sony BMG copy protection scandal

2006: Twitter arrives

Feb 2008: Netscape dies

Feb 2008: Google Chrome

2005: Video Sharing website

8. D

isci

plin

e &

Med

ium

(det

ail)

| 192

193 |

8. Discipline &

Medium

(detail)

8. D

isci

plin

e &

Med

ium

(det

ail)

| 194

World Internet Web Usage and Growth

Internet usage in the world is steadily increasing. According to JupiterResearch a leading and respected organization involved in marketing and Internet related trend research, ‘There will be 1.5 billion people with Internet access in 2011, with the biggest growth in the online population occurring in Brazil, Russia, India and China.’ In its “Worldwide Online Population Forecast, 2006 to 2011,” JupiterResearch anticipates that a 38 percent increase in the number of people with online access will mean that, by 2011, 22 percent of the Earth’s population will surf the Internet regularly.

At the same time, Internet usage has “matured,” and the growth rate has slowed in the developed countries such as the United States, Canada, Japan and much of Western Europe. The report says that 17 percent of China’s population will have regular Internet access by 2011 and India should hit 7 percent at around the same time. Infrastructure development and increased consumer purchas-ing power are the reasons for these large growth rates, notes JupiterResearch. By 2011, Asians will make up about 42 percent of the world’s population with regular Internet access. Brazil “with its soaring economy,” will experience a 9 percent compound annual growth rate, the fastest in Latin America.

In 2007, certain web properties have the higher values, and there are several studies at to which ones are the top properties in the world. There are two main ways this can be measured. One way is to rank the top ten global properties by average visits per visitor, which gives information as to how regular each visitor is, and how engaged they are with that particular site. The other method is to rank the top ten global properties by counting the number of unique visitors. Both stats have been shown, as of 2007. These charts give an idea of the most popular and most visited sites, and also the most valued sites of the web.

After reading these statistics, we get a commercial view of the world wide web, the growth rates from different countries, and the kinds of sites most people visit, whether from home or from work. However, it is important to read the note on statistics, and why it is important to think beyond them, as a designer.

Property by Unique Visitors

Average visits/visitors

Total Unique Visi-tors

Rank in Top 100

Total Internet Visits 54 739,835 NA

NHN Corp. 33 30,077 47

Tencent Inc. 31 53,175 21

Rising.com.cn 29 22,254 89

Google sites 24 503,033 2

Microsoft Sites 22 507,317 1

Facebook 22 24,782 73

Yahoo sites 21 458,985 3

United-Internet Sites 13 23,853 79

Time Warner Network 13 256,242 4

Fox Interactive Media 12 140,500 8

Top Global Properties by Average Visits per Visitor, February 2007 Note: visitors were 15 years old or older, ac-cessing the Web from home or work.

Source: comScore, 2007

“... by 2011, 22 percent of the Earth’s population will surf the Internet regularly.”

195 |

8. Discipline &

Medium

(detail)

Web PropertyTotal Unique Visitors (000)

Worldwide total 739,835

Microsoft sites 507,317

Google sites 503,033

Yahoo sites 458,985

Time Warner Network 256,242

eBay 248,558

Wikipedia sites 192,176

Amazon sites 143,084

Fox Interactive Media 140,500

CNET Networks 116,394

Apple Computer Inc. 111,877

Ask Network 108,663

Adobe sites 98,748

Lycos Inc. 86,581

Viacom Digital 76,625

New York Times Digital 70,984

Statistics Are Often Misleading

You cannot - as a web developer - rely only on statistics. Sta-tistics can often be misleading. One must always study the method of research and view the numbers from a subjective standpoint. For e.g. Let’s take research on browser stats. A trusted and well grounded stat report states that in June 2007, Internet Explorer 7: 19.7%, IE6: 37.3%, IE5: 1.5%, Firefox: 34.0%, Mozilla:1.4%, Safari:1.3%, and Opera:1.8% However this report is designed specifically to measure month by month changes, thus identifying long and short term trends. Their site, W3Schools is a website for people with an interest for web technologies. These people are more interested in using al-ternative browsers than the average user. The average user tends to use Internet Explorer, since it comes pre-installed with Windows. Most do not seek out other browsers.These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users. Most importantly, although the statistics above are extracted from W3Schools’ log-files, the site is also monitoring other sources around the Internet to ensure the quality of their figures.

“Global averages may not always be relevant to your web site”. Different sites attract different audiences. Some web sites at-tract professional developers using professional hardware, while other sites attract hobbyists using old low spec comput-ers.

Top Global Web Properties by Unique Visi-

tors, February 2007

Note: visitors were 15 years old or older, ac-

cessing the Web from home or work.

Source: comScore, 2007

8. D

isci

plin

e &

Med

ium

(det

ail)

| 196

Trends in Web Marketing: Social networking sites

When it comes to marketing, social networking sites are a new trend. Earlier, marketers were cautious about investing efforts into these types of sites. The study defines a social networking site as “one that allows Internet users the ability to add user-generated content such as: comments, review, feedback, ratings, or their own dedicated pages.” Sites such as MySpace, YouTube, and Amazon.com fit the study’s classification of social networking sites.However, targeting such sites had its advantages, since “Most marketers would far more prefer targeting a very think slice of a highly relevant audience than doing the mass marketer appeal,” says Murray. “Participation on these sites can take a couple different forms,” said Murray. “[Marketers] have to pick the right site, picking the one that most closely matches your online audience. Being very transparent in your communication is very im-portant. Each community has its own rules of engagement; a marketer must abide by those rules.”“Consumers visiting social networking sites generally do so through direct navigation and bookmarks. Second-ary is navigation through Google and Yahoo, or links in e-mail. In addition to optimizing participation on a social networking site to be visible on Google or Yahoo, marketers need to ensure “that their content is of high enough interest, quality, or value that it will serve as ‘link bait’ or ‘bookmark bait.’”“The report, conducted by JupiterResearch, is based on an Ipsos U.S. Online Consumer Panel of 2,223 indi-viduals. The survey consisted of 25 closed-ended questions about behaviors and preferences regarding online holiday shopping, search, ISP and video, online social networking (on behalf of iProspect), and online dating. Data were weighted by AOL usage, online tenure, and connection speed, determinants of online behavior.”

8c. Understanding Web usage in IndiaPC numbers in India

IDC (International Data Corpora-tion) figures show that last year (2005 - 2006) the PC market as a whole grew by 25 per cent in India - 5 million units were sold. Expected growth this year (2007-2008) is to be another twenty per cent. This is ac- cording to the research firm Gartner. Looking at a longer timeline, the technology research firm Forrester has predicted that India will add an-other 157 million PCs by 2015.

In the first quarter of 2007, 20 per cent of PC sales were of lap-tops. Also if you take year on year growth figures in sales of PC’s from April 2006 to March 2007, laptops sales have grown by over 85 per cent.

However, if we com-pare ourselves to the rest of the world, then

our PC penetration is just about 2 percent, the United States has a PC penetration of 73.4 percent, Sweden 56, Brazil 19.6, China 7, Russia 12 and Pakistan 1.3.

Why is the growth rate so high?

The segments that are driving the PC sales in India are Business and the government sector. The house-hold sector is also showing a healthy growth. In fact the household sector is showing better growth than the business segment. The latter may account for about 77 percent of sales (2006- 2007) and households just 23 percent of the total (desk-tops) but household sales of PC’s increased by 12 percent, higher than the 7 percent growth of the business sector. However, while looking at these statistics we must also keep into account the increasing number of laptops that are replacing desktop pc’s for the business sector.

“Looking at a longer timeline, the technology research firm Forrester has predicted that India will add another 157 mil-lion PCs by 2015.”

197 |

8. Discipline &

Medium

(detail)

Another factor which is driving up home PC sales is the widely avail-able and inexpensive broadband. For just Rs 250 ($6.25 USD) to Rs 500 ($12.5 USD) - you can get a broadband connection (with limited downloads). “We have a large il-literate population and that is hold-ing us back. The real growth lies in the semi-urban and rural areas. The urban will keep growing steadily, but for the semi-urban to grow our country needs to take that big leap forward and take technology (com-puterisation, telephony and broad-band Internet) to small towns. And as for the rural, unless we educate our masses, they are going to be left out.”

Who buys home PC’s?

Expectedly, its the higher socio- economic catetgory (SEC A). Sec A is. SEC B has a lower (37 percent) market share, but showed a higher (33 percent) growth. SEC C showed 12 percent growth with 20 percent market share.The home segment is doing well not just because incomes are rising, but also because prices of pc’s are falling. In fact the price differential between a branded PC and an as-sembled one has lessened substan-tially. This is partly due to the govern-ment’s lowering levies and duties.

Internet Access

According to comScore Networks India, China and Russia experienced the highest year-on-year growth rates in terms of Internet users. The Indian Internet population grew at 33 percent, making it the fastest-grow-ing country of Internet users. India had over 21 million users aged over 15 years at the end of January 2007, as against 16 million a year ago.But this excludes traffic from public computers such as Internet cafes. In fact the actual number of active (those who have used the Internet

in the past 30 days) Internet users in India were almost 25 million six months ago according to IAMAI-IMRB survey. These figures take into account those who use public computers. However, even though India is ranked eighth in the world in terms of number of Internet users, the country is not ranked amongst the top 10 countries in terms of aver-age monthly hours online per unique visitor. This is because of two major reasons:1. The widespread use of public

computers here.2. Those who do use computers

at home, mostly use dial up, not broadband.

Mumbai tops in terms of Internet ac- cess, followed by Delhi, Hyderabad Bangalore and Chennai. The number of active users is what really counts

Place of accessing Internet (multiple

accesses).

Rank City

% of Regular Internet Users

Regular Users (in mil-lions)

1 Mumbai & Thane 9.8% 3.44

2 Delhi NCR 8.6% 3.02

3 Hyderabad & Secundrabad 7.4% 2.60

4 Bangalore 7.1% 2.49

5 Chennai 5.6% 1.97

Top 5 cities by contribution to regular Internet user population in IndiaSource: India Online 2008, JuxtConsult

Internet e-shopping

According to Assocham (Associated Chambers of Commerce & Industry of India), the e-commerce figures today (2008-09) are touching Rs. 2800 crore, but are expected to increase by 150 percent by 2010-11 to Rs 5,800 crores. The two metros Delhi and Mumbai are driving this phenomenal growth.Assocham says that books are the hottest selling item on the Internet. In fact most products bought and sold off online are: books, electronic gadgets and railway tickets. However, people are also buying clothes, gifts, computer and peripherals, and a few are buying home tools and products, home appliances, toys, jewelry, beauty products and health and fitness products.Kolkatta prefers to buy music and movies online, while Bangalore loves to buy a wider range of items from books, electronic gadgets, compu-ter peripherals, gifts movies, book-ings...Just about everything. Mum-bai leads in all categories, except jewellery. Delhites seem to prefer buying jewellery online as compared to any other city.

The main reason, amongst many others, that Mumbai and Delhi are leading e-commerce are because of their massive populations. Mumbai’s

8. D

isci

plin

e &

Med

ium

(det

ail)

| 198

population is about 18 million (2006) and Delhi’s 13.7 million (2001), as compared to Kolkatta’s 4.5 million (2001), Bangalore’s 6 million (2005), Patna’s 1.8 million (2001), Jaipur’s 2.3 million (2001) and Warangal’s about .5 million(2001).

Internet advertising

Internet advertising is supposed to grow by 43 percent by 2012. Indian industry is hurtling towards a heady growth rate of 9-10 percent, but the media and entertainment industry is growing at double the pace. And Internet advertising at 43 percent! This is according to the 2007 edition of FICCI PricewaterhouseCooper’s(PWC) annual report on the Indian entertainment and media Industry. As the FICCI news report states: “The turnover of the entertainmentindustry was Rs 43,700 crore ( Rs 1 crore is 232072.4 USD) in the calen-dar year 2008, up from Rs 36,400 crore in 2007 and Rs 31,100 crore in 2006... the industry is expected to touch a turnover of Rs 1 trillion (Rs 100,000 crore) by the year 2015, which would mean a compounded growth rate of 18%...of all the media segments, the growth projection by 2015 for Internet advertising is the highest at 43%.”Today, The Internet advertising industry remains young in India and behaves in a similar way to the West-ern European Internet advertising industry 5-8 years earlier. The sector is dominated by financial services,

% Online Indians Undertaking in 2008

% Online Indians Undertaking in 2007

Increase %

Online window shoppers (who only search online) 57% 33% 24%Online buyers ( who search as well as buy online) 23% 25% -2%Total online shoppers (who either search or buy online)

80% 58% 22%

Online Indians who have bought ‘ever’ on the net (mn)

11.23 mn 10.78 mn +0.45 mn

Online Indians who have bought ‘ever’ on the net (%)

32% 43% -11%

Status of online shopper and buyersSource: India Online 2008, JuxtconsultIT/mobile and recruitment, with con-

sumer package goods and motor-ing accounting for only small shares of the national online advertising market. However Indian consum-ers have experienced web advertis-ing from the start of their use of the web so there is greater acceptance than in some of the Western Euro-pean markets at a similar stage in their growth. The market is nationally driven with extra campaigns coming from global brands, but most of the budget confined to national busi-nesses. However, negative percep-tions about advertising remain and on the whole national media have been sluggish to provide online serv-ices comparable in quality to those in the UK and USA.

59  

59  

45  

45  

40  

38  

37  

37  

36  

34  

Finance:  Banking  and  loans  

Recruitment  

Educa>on  &  Training  

Mobile  Telephony  

Entertainment  

IT:  Computer,Laptop,Peripherals  

Matrimonial  

Personal  Products  

Finance:  investment  &  mutual  funds  

Finance  :  Insurance  

!"#$"%&'()"*+,)-+),"./)-/"/%0"%1/"$#-"

Base: 12.3m active Internet users in 2008 who have clicked on an online ad

Source: IMRB international / IAMAI, ‘Internet in India 2008’`

199 |

8. Discipline &

Medium

(detail)

Overview of Internet Users in India and related statistics

Urban areas of India are home to 30.32 million Internet users according to a report by JuxtConsult. The Internet population rose 28 percent from April 2006 to April of this year. Of the 30.32 million Web users, 25.17 million (83 percent) log on at least monthly, while 5.15 million (17 percent) are occa-sional users who go online less frequently. About 20 million users access the Web daily. Internet penetration stand at 9 percent.

Much of the growth of Internet adoption came from new home-based Internet users. Home usage accounts for 59 percent of Internet use, up 19 percent from the previous year. Place of work including offices, schools, and colleges accounts for 78 percent of Internet use, up 16 percent from last year. Internet cafes, thought to be an access point for those who can’t af-ford a home computer or Web access accounts, remained stagnant with 47 percent of Internet usage, up 1 percent over the previous year. Cyber cafes serve as the only Internet access point for 1.4 percent of the regular Internet-using population. Broadband reaches 77 percent of home Internet in urban India, and 74 percent of office-based Internet users. While broadband adop-tion continues, two out of three Internet users complain of opening Web sites is slow. Difficulty connecting to the Web is the complaint of 35 percent of Internet users.

JuxtConsult conducted a land survey in April of 2007 with a sampling of 10,000 households in 31 cities with populations of 20,000 or larger. The survey reached four major regions across India, and was conducted to es-timate Internet usership and derive weights to make online survey data rep-resentative of the entire online urban population. Data were compared to an online survey conducted in May 2006 with a sample size of over 14,200 respondents.

2007 (M) 2006 (M) Growth (%)Total Urban Internet Users 30.2 23.60 28

Regular Internet Users (At least once a month)

25.17 21.95 15

Occasional Internet Users (less than once a month)

5.15 1.65 212

Use 2008 2009Email 91 87

Information 76 80

Education 49 65

Music/Videos 32 45

Text Chat 46 40

Online Jobsites 37 33

Online Gaming 41 33

Financial Information search 21 24

Booking Railway tickets 21 18

Online news 13 16

Telephony/voice/video chat 13 14

Online Banking 20 12

“While broadband adoption continues, two out of three Internet users complain of opening Web sites is slow. Difficulty connecting to the Web is the complaint of 35 percent of Internet users.”

“JuxtConsult conducted a land survey in April of 2007 with a sampling of 10,000 households in 31 cities with populations of 20,000or larger...”

Urban India Internet Users by TypeSource: JuxtConsult, 2007

Urban India Online Activities by Regu-lar Internet Users (%)

Source: JuxtConsult, 2007

8. D

isci

plin

e &

Med

ium

(det

ail)

| 200

A lot of factors are respon-sible for a users interaction with the computer and the Internet. Building a website without understanding such factors was not seeming like a good idea. In the next sec-tion you will find the application of the research in building personas and user mapping.

I Current Priorities & Aspirations: Most important priorities in life currently,• Current absolute necessities in life, Current hobbies and interests,

Current role models, Parameter that defines ‘status in the society’ for them, Desired professional qualification for self/children (as ap-plicable), Most aspired luxuries of life

I Personal likes & preferences: kind of music listen to, kind of mov-ies like to watch, type of books prefer to read, favourite sports, favourite food, favourite clothing, drinking and smoking habits, Favourite indoor and outdoor entertainment activities, ways to relax /unwind, frequen-cy and type of holidays/vacations, favourite holiday places in India and abroad• Technology orientation: Role of technology in life, role of Internet,

computer, mobile phone and TV in life

I Personal Consumption Lifestyle Orientation• Personal Consumption Lifestyle classification• Level of socialization/social influence (how inclined to interact

with others in spending spare time at home, outside, in party/get- together, in solving a problem, in deciding to buy products/ services)

• Level of consumption Impulse (how inclined to keep abreast with lifestyle trends, buy what’s latest & trendy, frequency of replacing things at home, frequency of shopping, enthusiasm towards shop-ping, whether to consume or save if income increases, whether to consume or save if income declines)

• Buying Orientation: Attributes give preference to when buying, Fac-tors give preference to when deciding place of buying

I Other Personal Consumption Habits & Lifestyle• Whether owns a credit card, and card type owned• Whether uses a mobile phone, Services subscribed to on the most

used connection, Features present on this most used handset

I Online shopping behaviour • Penetration of online shoppers (only search) and buyers (search and

buy), Reasons for not buying online where applicable• Travel products bought and searched in last 1 year, search-to-buy

ratios, frequency of buying, average monthly spends• Non-travel products bought and searched in last 1 year, search-to-

buy ratios, frequency of buying, average monthly spends• Online payment modes used • Motivations of buying online and problems faced while buying online

8d. Personal Psychographics of Internet Users

9. Reference

and ResearchThis chapter documents all the visual and text-based reference that referred to during

the course of this project. Since these images were not directly related to the development of my work, they are included here so that the reader has a

complete and deeper understanding of the kind of material I was referring to, and may have been indirectly influenced by.

Technical references for flash are also included. Encyclopedia and web references on topics that I came across are also added. These are the liquid layout and user inter-face principles that I read through but may not have seriously applied because of the

nature of the project. Still it was part of what I learned ans so it has been documented.

| 202

9. R

efer

ence

& R

esea

rch

Namo Stationery

Pankaj VermaF 1102 Chittaranjan Park, New Delhi 110019 India Phone +91 11 26277348 / 26275571 / 40548286Mobile 98100 16004 Email namoindia@gmail.com

DEVOTIONAL ACCESSORIES

DEVOTIONAL ACCESSORIESF 1102 Chittaranjan Park, New Delhi 110019 India Phone +91 11 26277348 / 26275571 / 40548286Mobile 98102 65515 Email namoindia@gmail.com

DEVOTIONAL ACCESSORIES

Julie Bose VermaF 1102 Chittaranjan Park, New Delhi 110019 India Phone +91 11 26277348 / 26275571 / 40548286Mobile 98102 65515 Email namoindia@gmail.com

DEVOTIONAL ACCESSORIES

‘Padma’, meaning Lotus, is an impor-tant symbol in many religions. Ancient cultures believed that the lotus worships the rising sun everyday by rising from the water at dawn.

Namo’s Padma Range is an ode to the beauty and form o f this m agnificent flower which represents purity and the divine supremacy of nature.

The Padma Range

ww w.namo.in

Namo is an exclusive range of home and d evotional a ccessoriesdesigned for today’s homes.

Our designs reflect the emotions of joy and t ogetherness associated with f estivities and c ustoms t hat have always been a defining part ofIndian homes and lifestyles. Which is why, we believe that a home withNamo i s where celebrations n everend.

Pankaj VermaNamo Design Studio

Letter Head

Visiting Cards

Product Tag + Range Tag

203 |

9. Reference &

Research

F 1102 Chittaranjan Park, New Delhi 110019 IndiaPhone +91 11 26277348/26275571/40548286

Email namoindia@gmail.comNAMO a Brand Owned by B&V Design Pvt. Ltd.

DEVOTIONAL ACCESSORIES

CD Sticker

Packaging Pattern, on boxes and wrapping sheets.

| 204

9. R

efer

ence

& R

esea

rch

Namo Presentation ( as on Jan 2010)Only a few slides

205 |

9. Reference &

Research

| 206

9. R

efer

ence

& R

esea

rch

207 |

9. Reference &

Research

| 208

9. R

efer

ence

& R

esea

rch

209 |

9. Reference &

Research

Similar Products

| 210

9. R

efer

ence

& R

esea

rch

211 |

9. Reference &

Research

Lotus forms in deifferent materials apart from Stainless Steel

| 212

9. R

efer

ence

& R

esea

rch

Competitors and websites with simlar concept/inspiration

213 |

9. Reference &

Research

| 214

9. R

efer

ence

& R

esea

rch

215 |

9. Reference &

Research

| 216

9. R

efer

ence

& R

esea

rch

217 |

9. Reference &

Research

| 218

9. R

efer

ence

& R

esea

rch

219 |

9. Reference &

Research

| 220

9. R

efer

ence

& R

esea

rch

221 |

9. Reference &

Research

| 222

9. R

efer

ence

& R

esea

rch

223 |

9. Reference &

Research

Technical References

Liquid Vs Fixed WidthBy Jennifer Kyrnin, About.com Guide

Web page layout can be done in two different ways:

I Fixed Width Layouts - These are layouts where the width of the entire page is set with a specific numerical value. I Liquid Layouts - These are layouts where the width of the entire page is flexible depending upon how wide the

viewer’s browser is.

The Liquid Grid/ fluid Grid/ Elastic grid/ flexible layout

Liquid layout are layouts that are based on percentages of the current browser window’s size. They flex with the size of the window, even if the current viewer changes their browser size as they’re viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution. They are often preferred by designers who have a lot of information to get across in as little space as possible, as they remain consistent in size and relative page weights regardless of who is viewing the page.

Fixed Layouts

Fixed layouts are layouts that start with a specific size, determined by the Web designer. They remain that width, re-gardless of the size of the browser window viewing the page. Fixed width layouts allow a designer more direct control over how the page will look in most situations. They are often preferred by designers with a print background, as they allow the designer to make minute adjustments to the layout and have them remain consistent across browsers and computers.

What’s At Stake?

The method chosen for your Web site design will have an impact on more than just your design. Depending upon which you choose, you will affect your readers’ ability to scan your text, find what they are looking for or sometimes even use your site. As well, the layout style will affect your efforts at marketing your Web site through branding, real estate availability, and the aesthetics of your site.

Benefits of Layout Methods

Benefits of Fixed Width Layouts

I A fixed width layout allows the designer to build pages that will look identical no matter who is looking at them. I Fixed width elements such as images will not overpower text on smaller monitors, because the width of the entire

page will include those elements. I Scan length will not be impacted on large segments of text, no matter how wide the Web browser is.

Benefits of Liquid Layouts

I A liquid width layout expands and contracts to fill the available space. I All available real estate is used, allowing the designer to display more content on larger monitors, but still remain

viable on smaller displays. I Liquid layouts provide consistency in relative widths, allowing a page to respond more dynamically to customer-

imposed restrictions like larger font sizes.

| 224

9. R

efer

ence

& R

esea

rch

Drawbacks to Layout Methods

Drawbacks to Fixed Width Layouts

I Fixed width layouts can cause horizontal scrolling in smaller browser windows. And most people don’t like to scroll horizontally.

I They can also result in large expanses of whitespace in larger monitors, resulting in a lot of unused space and more scrolling vertically than might otherwise be necessary.

I Fixed width layouts don’t handle customer changes to font sizes very well. For small increases in the font size, they can be okay, but for larger increases, the layout can become compromised.

Drawbacks to Liquid Layouts

I Liquid layouts allow for very little precise control over the width of the various elements of the page. I They can result in columns of text that are either too wide to comfortably scan, or on smaller browsers too small

for the words to show up clearly. I Liquid layouts can have problems when a fixed width element, such as an image, is placed inside a liquid column.

If the column is rendered without enough space for the image, some browsers will increase the column width, disregarding the designer’s instructions, while other browsers will cause overlaps in text and images to achieve the correct percentages.

Resolution

Many sites that have a lot of information they need to convey in as little space as possible would work well with a liquid layout. This allows them to take advantage of all the real estate that larger monitors provide while not shorting smaller displays.

Sites that require precise control over how the pages look in every situation would do well to use a fixed width layout. This provides more assurance that the branding of your Web site is consistent and clear no matter what size monitor it’s viewed on.

225 |

9. Reference &

Research

| 226

9. R

efer

ence

& R

esea

rch

Opposite page and above: This is the same website in different sizes of browsers. The text invariably squeezes its self to fit in but not getting a horizontal scroll bar at the bottom. Whichever resolution/screen /browser is used to open this website, the website will cover the entire 100% browser space without any bands on the side

227 |

9. Reference &

Research

Flash Vs HTML

Flash is a very intriguing technology to add interactivity and flashy graphics to a website. Learning to write good animations and forms in Flash can be difficult and time-consuming, so developers who know Flash are motivated to use it in every situation. But as with all technology, Flash has some drawbacks for many readers and putting up a site in Flash can be a detriment to the site rather than a draw.

If you are planning on putting up a Flash website, you should know both the positive aspects of Flash as well as the drawbacks. This, combined with your knowledge of your customers, should help you to decide if creating a site in Flash or using Flash for certain elements of your site is a good idea.

Current Status

Flash is gaining in popularity both with Web designers and with the public. There are some things on the Web that can only be done effectively with Flash, and some site owners feel that Flash is a very important part of their Web design. But using Flash just because can be risky too, as some customers are immediately put off by a Flash website and while search engines have better support for Flash than they used to, it still can be very difficult to get an all-Flash website to rank high in search engines.

What’s At Stake?

Using or not using Flash on a website can cause major problems for the site. If you are building a website that Flash is well-suited for, then not using Flash could drive away readers. But building a site in Flash simply because you can can affect how your customers interact with your site, whether they find the site in search engines, and how acces-sible and usable your site is.

Flash is a powerful tool, but like every tool in the Web developer’s toolbox, it shouldn’t be used to solve every situ-ation. Some problems are best solved with Flash, and others are not. If you know how to use Flash effectively, you can increase your page views and customers.

Reasons to Use Flash

I Cross-platform compatibility

I Flash is well-supported on something like 95-98% of the Web browsers out there, and if you build a site or ap-plication in Flash, you know that it will be viewed correctly by anyone who has the Flash plugin. It is operating system and browser independent.

I Animations - Flash was originally used primarily as an animation tool, and that is what it is best suited for. It is easy to create animations in Flash, and then easy to view them.

I Video - Video works well in Flash applications because it doesn’t require an OS-dependent plugin like QuickTime or MediaPlayer.

I Games - Games can be fun, and Flash games don’t have the browser support issues of Ajax the bandwidth limita-tions of server-side games written in CGI.

I Vector graphics - Vector graphics can look smoother and more attractive and Flash allows developers to create applications with smooth lines requiring that the customer have a vector-graphic tool installed on their hard drive.

I Adds, well, flash to a site

I Image replacement for special fonts. Web designers who need a special font family in their Web designs can use an image replacement technique called sIFR (or Scalable Inman Flash Replacement) which replaces text in the design with Flash to get specific fonts. Flash applications can perform script actions, collect data, and do most of the same things that server-side scripts can do.

| 228

9. R

efer

ence

& R

esea

rch

Drawbacks to Using Flash

I Bandwidth and Speed Limitations - Unless the designer works very hard to optimize Flash most Flash applications and websites can be very large and slow to download. In many situations, the entire Flash site must be down-loaded before it can be used. And while it is possible to add in graphical countdowns and other features to make the time pass more quickly, many people still won’t wait.

I Usability is impaired - One of the most important buttons on a Web browser is the back button. It is used all the time by most people browsing the Web. But a Flash site typically removes that functionality. When a customer hits the back button after delving deeply into a Flash site, s/he is taken back to the website they were on before they visited your site. Then if they return to your Flash site, they have to renavigate to where they were. Some people might be willing to do their work twice, but most won’t.

I Accessibility is also impaired - Because most Flash sites are based on images, and don’t generally have a lot of alternative text, they can be very difficult or impossible for a screen reader to read.

I Search engines can’t read them either - Search engine spiders are a lot like screen readers, they can’t parse im-ages. Plus, many of them have trouble following links that are not standard HTML links - and most links in Flash are not in HTML - they are in Flash. Because of this, many Flash developers have a very difficult time getting their Flash sites to rank high in search engines. In fact, most Flash sites that do rank well, do so because they have two versions of the site - one Flash and one HTML. And then they have to maintain two copies of the same website.

I Flash requires a plug-in - While a large proportion of Web browsers have the plug-in pre-installed, the fact is that Flash does require a plug-in which some people and companies don’t allow.

I Some people just don’t like Flash pages - Similar to sound and animated graphics, Flash has developed a reputa-tion among some customers as being more of an annoyance than a benefit to a Web page. This is especially true when the Flash serves no purpose other than to decorate a page - such as an animated banner or splash page. While these customers may be less common than those who don’t care, they are often more vocal and more likely to sway opinion away from your site if you use Flash gratuitously.

Resolution

Only the designer and site owner can make that decision. Flash is a wonderful tool for adding games, animation, and video to your Web site, and if those types of features are important, then you should use Flash.Use Flash Where It’s Effective

There are very few sites that benefit from using only Flash. The drawbacks to SEO, accessibility, and customer sat-isfaction make it impossible for me to recommend using Flash for your entire site. In fact, even Google recommends only using Flash in select situations:

Try to use Flash only where it is needed.

Never Use Flash for Navigation

It can be very tempting to create Flash navigation because you can add exciting transitions, rollovers, and vector graphics using Flash. But the navigation is the most important part of your Web page. If your customers can’t use your navigation for any reason, they will simply leave - bandwidth and accessibility issues can both contribute to a Flash navigation structure being unusable.

229 |

9. Reference &

Research

“But I still want to use Flash. How can I do it effectively?”

If you must use Flash, you can embed it on an HTML page, say as a Flash Photo Album, or as a catalog organized into categories, or a slide show. You need to add text or captions below the Flash im-ages. Remember, it’s the text that’s indexed in search engines, not Flash. Also ensure that the images used in Flash are optimized with the lowest compression for quicker loading time.

You could also consider using a Flash header for your web site. This allows you to write text that is indexed in search engines, and also use Flash in a smaller area of the web page so that it downloads faster. Once the Flash animation downloads, the visitor can page through the rest of the site without waiting for the Flash part to download each time.

Flash is effective for visual presentations and would even be ex-pected by visitors on sites relating to gaming, music, photography, events and movies, for instance.

Whether you decide to use Flash or not is up to you. The above pointers will help you make a considered decision that will benefit your business, your visitors and boost your site traffic in the long run.

| 230

9. R

efer

ence

& R

esea

rch

231 |

9. Reference &

Research

| 232

9. R

efer

ence

& R

esea

rch

233 |

9. Reference &

Research

Research - User Interface & It’s Principles

User interface

The user interface is the aggregate of means by which people (the users) interact with a particular machine, device, computer program or other complex tool (the system). The user interface provides means of:

I Input, allowing the users to manipulate a system

I Output, allowing the system to produce the effects of the users’ manipulation.

To work with a system, the users need to be able to control the system and assess the state of the system. For ex-ample, when driving an automobile, the driver uses the steering wheel to control the direction of the vehicle, and the accelerator pedal, brake pedal and gearstick to control the speed of the vehicle. The driver perceives the position of the vehicle by looking through the windscreen and exact speed of the vehicle by reading the speedometer. The user interface of the automobile is on the whole composed of the instruments the driver can use to accomplish the tasks of driving and maintaining the automobile.The term user interface is often used in the context of computer systems and electronic devices. The user interface of a mechanical system, a vehicle or an industrial installation is sometimes referred to as the human-machine interface (HMI). HMI, the terms refer to the ‘layer’ that separates a human that is operating a machine from the machine itself.

Usability

The design of a user interface affects the amount of effort the user must expend to provide input for the system and to interpret the output of the system, and how much effort it takes to learn how to do this. Usability is the degree to which the design of a particular user interface takes into account the human psychology and physiology of the users, and makes the process of using the system effective, efficient and satisfying.Usability is mainly a characteristic of the user interface, but is also associated with the functionalities of the product. It describes how well a product can be used for its intended purpose by its target users with efficiency, effectiveness, and satisfaction, also taking into account the requirements from its context of use. These functionalities or features are not always parts of the user interface (e.g. are you able to reverse with your car or not), yet they are key elements in the usability of a product.

User interfaces in computing

In computer science and human-computer interaction, the user interface (of a computer program) refers to the graphical, textual and auditory information the program presents to the user, and the control sequences (such as keystrokes with the computer keyboard, movements of the computer mouse, and selections with the touchscreen) the user employs to control the program.

Types

Currently (as of 2008) the following types of user interface are the most common:

I Graphical user interfaces (GUI) accept input via devices such as computer keyboard and mouse and provide ar-ticulated graphical output on the computer monitor. There are at least two different principles widely used in GUI design: object-oriented interfaces (OOUI) and application oriented interfaces[verification needed].

I Web-based user interfaces accept input and provide output by generating web pages which are transported via the Internet and viewed by the user using a web browser program. Newer implementations utilize Java, AJAX, Microsoft .NET, or similar technologies to provide realtime control in a separate program, eliminating the need to refresh a traditional HTML based web browser.

| 234

9. R

efer

ence

& R

esea

rch

User interfaces that are common in various fields outside desktop computing:

I Command-line interfaces, where the user provides the input by typing a command string with the computer key-board and the system provides output by printing text on the computer monitor. Used for system adminis tration tasks etc.

I Tactile interfaces supplement or replace other forms of output with haptic feedback methods. Used in com puter-ized simulators etc.

I Touch interfaces are graphical user interfaces using a touchscreen display as a combined input and output device. Used in many types of industrial processes and machines, self-service machines etc.

Other types of user interfaces:

I Attentive user interfaces manage the user attention deciding when to interrupt the user, the kind of warnings, and the level of detail of the messages presented to the user.

I Batch interfaces are non-interactive user interfaces, where the user specifies all the details of the batch job in advance to batch processing, and receives the output when all the processing is done. The computer does not prompt for further input after the processing has started.

I Conversational Interface Agents attempt to personify the computer interface in the form of an animated per son, robot, or other character (such as Microsoft’s Clippy the paperclip), and present interactions in a conversa tional form. Crossing-based interfaces are graphical user interfaces in which the primary task consists in crossing boundaries instead of pointing.

I Gesture interfaces are graphical user interfaces which accept input in a form of hand gestures, or mouse gestures sketched with a computer mouse or a stylus.

I Multi-screen interfaces, employ mulitple displays to provide a more flexible interaction. This is often employed in com- puter game interaction in both the commercial arcades and more recently the handheld markets.

I Noncommand user interfaces, which observe the user to infer his / her needs and intentions, without requiring that he / she formulate explicit commands.

I Reflexive user interfaces where the users control and redefine the entire system via the user interface alone, for instance to change its command verbs. Typically this is only possible with very rich graphic user interfaces.

I Tangible user interfaces, which place a greater emphasis on touch and physical environment or its element.

I Telephone user interfaces, which accept input and provide output by generating telephone voice which are trans-ported via the telephone network and heard by the user using a telephone. The user input is made by pressing telephone keys.

I Text user interfaces are user interfaces which output text, but accept other form of input in addition to or in place of typed command strings.

I Zero-Input interfaces grab inputs from a set of sensors instead of querying the user with input dialogs.

I Zooming user interfaces are graphical user interfaces in which information objects are represented at different lev-els of scale and detail, and where the user can change the scale of the viewed area in order to show more detail.

235 |

9. Reference &

Research

Human action cycle

The human action cycle is a psychological model which describes the steps humans take when they interact with com- puter systems. The model was proposed by Donald A. Norman, a scholar in the discipline of human-computer interac- tion. The model can be used to help evaluate the efficiency of a user interface (UI). Understanding the cycle requires an understanding of the user interface design principles of affordance, feedback, visibility and tolerance.The human action cycle describes how humans may form goals and then develop a series of steps required to achieve that goal, using the computer system. The user then executes the steps, thus the model includes both cognitive activities and physical activities.

The three stages of the human action cycle. The model is divided into three stages of seven steps in total, and is (approximately) as follows:

Goal formation stage:

1. Goal formation.

Execution stage:

2. Translation of goals into a set of (unordered) tasks required to achieve the goal.

3. Sequencing the tasks to create the action sequence.

4. Executing the action sequence.

Evaluation stage

5. Perceiving the results after having executed the action sequence.

6. Interpreting the actual outcomes based on the expected outcomes.

7. Comparing what happened with what the user wished to happen.

Use in evaluation of user interfaces

Typically, an evaluator of the user interface will pose a series of questions for each of the cycle’s steps, an evalu-ation of the answer provides useful information about where the user interface may be inadequate or unsuitable. These questions might be:

Step 1, Forming a goal: Do the users have sufficient domain and task knowledge and sufficient understanding of their work to form goals? Does the UI help the users form these goals?

Step 2, Translating the goal into a task or a set of tasks: Do the users have sufficient domain and task knowledge and sufficient understanding of their work to formulate the tasks? Does the UI help the users formulate these tasks?

Step 3, Planning an action sequence: Do the users have sufficient domain and task knowledge and sufficient understand- ing of their work to formulate the action sequence? Does the UI help the users formulate the action sequence?

Step 4, Executing the action sequence: Can typical users easily learn and use the UI? Do the actions provided by the system match those required by the users? Are the affordance and visibility of the actions good? Do the users have an accurate mental model of the system? Does the system support the development of an accurate mental model?

Step 5, Perceiving what happened: Can the users perceive the system’s state? Does the UI provide the users with suf- ficient feedback about the effects of their actions?

Step 6, Interpreting the outcome according to the users’ expectations: Are the users able to make sense of the feedback? Does the UI provide enough feedback for this interpretation?

Step 7, Evaluating what happened against what was intended: Can the users compare what happened with what they were hoping to achieve?

| 236

9. R

efer

ence

& R

esea

rch

Graphical user interface

A graphical user interface is a type of user interface used for interaction with a computer which employs graphical images, widgets, along with text to represent the information and actions available to a user. The actions are usu-ally performed through direct manipulation of the graphical elements.

Evolution of graphic user interfaces

The GUIs familiar to most people today are the Microsoft Windows, Macintosh, or the X Window System inter-faces. Their applications originated at the Xerox PARC (Palo Alto Research Center) in the late 1970s and was copied by Apple who used it in their first Macintosh computers. Later IBM and Microsoft borrowed many of Apple’s ideas to develop the Common User Access specifications, which formed the basis of the user interface found in Microsoft Windows, IBM OS/2 Presentation Manager, and the Unix Motif toolkit and window manager. These ideas evolved to create the interface found in current versions of the Windows operating system, as well as inspiring new features in Mac OS X and various desktop environments for Unix-like systems. Thus most current graphical user interfaces have largely common idioms.Examples of systems that support GUIs Examples of systems that support GUIs are Microsoft Windows, Mac OS, Mac OS X, Linux, NEXTSTEP, Java applets and the X Window System. The latter is extended with toolkits such as Motif (CDE), Qt (KDE) and GTK+ (GNOME).

GUI design

GUI design is an important adjunct to application programming. Its goal is to enhance the usability of the underly-ing logical design of a stored program. The visible graphical interface features of an application are sometimes referred to as “chrome”. They include graphical elements (widgets) that may be used to interact with the program. Common widgets are: windows, buttons, menus, and scroll bars. Larger widgets, such as windows, usually provide a frame or container for the main presentation content such as a web page, email message or drawing. Smaller ones usually act as a user-input tool.The widgets of a well-designed system are functionally independent from and indirectly linked to program function-ality, so the GUI can be easily customized, allowing the user to select or design a different skin at will. See Model-view-controller for more information. Rare kinds of GUI including PUIs are most notably found in computer games, and advanced GUIs based on virtual reality are now frequently found in research.

Crossing-based interfacesCrossing-based interfaces are graphical user interfaces that use crossing gestures instead of - or in complement to pointing.

Goal-Crossing TasksA pointing task involves moving a cursor inside a graphical object and pressing a button, whereas a goal-crossing task involves moving a cursor beyond a boundary of a targeted graphical object. Goal crossing has been little investigated, despite sometimes being used on today’s interfaces (e.g., mouse-over effects, hierarchical menus navigation, auto-retractable taskbars and hot corners). Still, several advantages of crossing over pointing have been identified:Elongated objects such as hyperlinks are faster to cross than to point. Several objects can be crossed at the same time within the same gesture. Crossing allows triggering actions when buttons are not available (e.g., while an object is being dragged). Crossing-based widgets can be designed to be more compact than pointing-based ones. This may be useful for small display devices. Goal crossing is particularly natural on stylus-based devices. On these devices, crossing an object back and forth is easier than double-clicking. Crossing can be a good alternative for users who have difficulties with clicking or double-clicking. There are several other ways of triggering actions in user interfaces, either graphic (gestures) and non-graphic (keyboard shortcuts, speech commands).

237 |

9. Reference &

ResearchSource List Web

Researchhttp://www.wikipedia.com

http://www.about.com

http://www.webdevelopersnotes.com

http://www.smashingmagazine.com

http://www.useit.com

http://cooper.com

http://informationdeisgn.org

http://www.ideo.com

Inspirations/Exampleshttp://www.smashingmagazine.com

http://vandelaydesign.com/

http://www.qesign.com/

http://www.designflavr.com/

http://www.hongkiat.com/

http://inspiredology.com

http://www.wix.com/

http://siteinspire.net/

http://www.norarosetravis.com/

http://www.nest-living.com/

http://vandelaydesign.com

http://www.abercrombie.com/

http://www.houseind.com/#

http://designcode.es

http://ninewest.com

http://louisvuitton.com

http://www.tileanddesigns.com/

http://www.everythingbutwater.com

http://www.lifeandhome.co.uk/

Resourceshttp://www.ffiles.com

http://www.wideworldofwebdesign.com/

http://www.allwebdesignresources.com

http://fluid.newgoldleaf.com/

http://www.shipyard.com.au/

http://www.entheosweb.com/

http://www.29digital.net/grid/

http://webdesignledger.com/

Statisticshttp://www.internetworldstats.com

http://juxtconsult.com

http://comscore.com

Books Referred

Effective Sales Catalogue DesignPIE Books

741.6

P613E

Don’t Make Me ThinkSteve Krug

Californi New Riders Copyright © 2000

006.7 KRU 47617

The Language of New MediaLev Manovish

006.7

MAN 37561

Visual Design for the Modern WebPenny McIntire © 2008

Web Design in a Nutshell, eMatter Edition Copyright © 2000 O’Reilly & Associates, Inc.

Site-seeing: A visual approach to web usability Wroblewski, Luke Hungrey Minds New York

Usability For The Web -Designing Websites That Work

Tom Brinck, Darren Gergle and Scott D.

Wood Morgan Kaufmann Publishers © 2002

Diploma Documents Referred

Aditi KulkarniCharanya KumarLisa LeeMridu MehtaHetanshi Kothari

Looking Back

Looking back at the project, I feel better communication between all par-ties involved could have improved matters greatly. Also, designing a website without all the content, guessing most of the time and writing copy added to the issues. Overall, I felt that for the first website project I had ever worked on, it was the best effort.

I learned a lot of technical and practical design tips, making me realize that the only way you can really get better is by practise and discussion in that order. Experience seems to be the only valuable answer. This project turned me into a more mature designer. Suddenly, I can see that the client saying “woww” isn’t the last hurdle, but the first. I think it’s called a paradigm shift.

As for an in-house project like this you constantly have to maintain a birds eye view and try not to get enmeshed within the workings of the company. A lot of time went into sourcing the content and images. I had to go through Namo archives for each product as it was important to have attractive and meaningful images.Also The data was not compiled and organized at any one place, so a lot of hunting and shunting was required. While joining the loose ends during documentation, one obviously feels I could have approached the project from a different point of view. It was the nature of the project which had aroused curiosity and led me to take this project. If it wasn’t for the path that I chose for the Project I wouldn’t have learnt what I did while taking on a different route.

True that this project did scare me midway. As I had become quite unsure as to which direction it would take. But with Pankaj and Julie’s guidance I man-aged to pull myself out of that phase. I am grateful to everyone in B & V to have given me full freedom and support during this project.

A lot of work is still left for www.namo.in to reach it’s full potential. I learnt a lot about my own potential, my flaws and my strengths while embarking on this path. I know there are a lot of things that quite doesn’t fit in yet but in the future am confident that all the pieces will fall into its place at the right time.