Diploma Project Document by Abhishu Roy

Diploma Project 1280 X 786 Px An Interaction Design Project For A Web Application.

Student Name : Abhishu Roy (UG0901) Program : Under Graduate Diploma Program

Guide : J.Menon

2009 - 2013 Communication Design

D.J.Academy Of Design, Coimbatore

Diploma Project | 2009-2013 | Abhishu Roy

D J ACADEMY OF DESIGN Approval The following document is duly examined and approved by the designated jury as credible work on the chosen subject, carried out and presented in a manner and at a level that is appropriate for acceptance as diploma project qualification of this Institute. This approval however does not necessarily endorse any statements, comments or conclusions drawn in by the author in the document. This is a partial fulfillment for the award of the Undergraduate / Postgraduate level Diploma in Industrial / Communication Design. This Project/Thesis study of 26 weeks duration in the curriculam has been completed in …….. weeks.

Title of the Project

: …………..………………………………………………… ……………………………………………………………..

Student’s Name & Signature

: ……..……………………………………………………....

Guide’s Name & Signature

: ……………………………………………………………. ………………..……………………………………………

………………………………. … Internal Jury Name & Signature

…...……….……………………… External Jury Name & Signature

Place : Coimbatore Date : ……..………….

…..................……………………. Dean / Jury Chairman Name & Signature

Coimbatore – Pollachi Highway, Othakkalmandapam (P.O.), Coimbatore – 641 032. India Phone : 0422 – 3094300, 3094444, Fax : 0422 – 3094310, Website : www.djad.in, E-mail : office@djad.in

Diploma Project | 2009-2013 | Abhishu Roy

Content

http // Introduction “Client”

Pg // 001

http // Introduction “Project”

Pg // 002

http // History Of Internet

Pg // 004

http // History Of Interaction Design

Pg // 015

http // Crash Assignment Team Grid

Pg // 022

http // Trend Mapping

Pg // 051

http // Maim Project OneOrbit

Pg // 065

http // Feedback And Review

Pg // 135

http // Reference

Pg //

http // Acknowledgements

Pg //

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

“INFOLOGITECH SYSTEMS” Comprehensive Solutions for next generation challenges.... Infologitech’s complete LBS( location based service) solutions leverage proven technological innovations and platforms that have been deployed around the world in the toughest of environments. Powering world class business solutions, Infologitech products and services are built around applications for business eff iciency and to help businesses grow, using the latest systems and processes. As a reliable location based service provider, Infologitech ventures to deliver end to end LBS solutions including white label applications, mapping and content. Infologitech envisions substantial success in providing social location solutions for location enabled devices, like handsets,laptops, Smartphone’s, Notebooks, Desktops and portable navigation devices which have become everyday tools for a growing segment of consumers and enterprises. Over the past several years, remarkable advances in LBS have raised consumer and enterprise awareness and has tremendously increased the demand. Infologitech endeavours to serve this rapidly growing market which is forecasted to expand exponentially in the next five years.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Introduction

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

â&#x20AC;&#x153;Moving Beyond Posters And Toastersâ&#x20AC;? This was the tag line for the International Conference of Interaction Design 2011. This was the time when I was being introduced to interaction design. After two years in a design college then i was in my 3rd year of college, trying to find out a niche area for myself, when I was introduced to INTERACTION DESIGN in 2011. Soon I realized interaction design is one such sector in which i would like to work in future. The question that arises next in mind is why!! Well I was very impressed by the design process and thinking, wherever I look, I could apply this. First time in my 20 odd years of life, I was able to contextualize an education system quite effectively on whatever I do and see. I am born in a time when everything on the face of this planet is moving into a different world called the internet and was also impacting my day to day life. My instinct said it will be great to be a part of a revolutionary change. So I started my hitchhiking to understand Interaction design and learn as much as possible reading books, blogs and taking few courses that were part of my academics,in collage. My internship at IDIOM Bangalore gave me a glimpse of its potential. My diploma project is about creating an user interface and branding for a web based application for school management, housing society management and clinic management; each of this web based application has to major two features operations management and communication management with the consumers. It is based on a common interface for the users/customers to access services from multiple entities. The interface is being built in such a way that we can add additional businesses to the portal on an ongoing basis. Abhishu Roy UG0901

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

History Of The Internet.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

1989

Introduction of the world wide web by Tim Berners-Lee of CERN (European Laboratory for Particle Physics),first website ever (http:// info.cern.ch/hypertext/WWW/TheProject.html) was launched.

1991

Internet was opened to commercial use

1993

Mosaic is developed by Marc Andreeson at the National Centre for Supercomputing Applications (NCSA). It becomes the dominant navigating system for the World Wide Web

1994

Initial commerce sites are established and mass marketing campaigns are launched via email, introducing the term â&#x20AC;&#x153;spammingâ&#x20AC;? to the Internet vocabulary.Marc Andreessen and Jim Clark start Netscape Communications. They introduce the Navigator browser.

1995

The history of internet in India started with launch of internet services by VSNL on 15 August 1995, the 48th anniversary of Indian independence. They were able to add about 10,000 internet users within 6 months

1996

Approximately 45 million people are using the Internet.

1998

Google opens its first office, in California.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

1989 Worlds first website developed at CERN.

1991 Worlds firest commercial website.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

1993 Launch of MOSAIC dominant navigating system for the World Wide Web

1994 Introduction the First Navigator browser.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

1995 The history of internet in India started

45000000 Million

People are using the Internet. Worldwide

1996 .

1998 Google opens its first office, in California.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

1998 till now Since then possibly everything on the face of the earth has been tried on the internet either by selling it renting it or biding on it. Since then till 2002 there was a boom in the internet use every one wanted to have a web presence, every business small and large wanted to make their own website to make their presence felt, but as the penetration of the internet increased world wide the wants of the user started growing higher every few months this was the time when static/ non interactive Web Pages were growing out of fashion and e-commerce was already at its highest peak. Slowly now people were getting inclined towards using internet as a social tool which resulted in increasing numbers of bloggers social networking sites like friendsters ,Aol ,hi5 etc increasing the scope of the use of internet. This is more or less the B to C face of internet which has been ever evolving very rapidly every since. the use the internet for business or B to B sector is where the actual development took place ever since its inception, initially it started in the form of e-commerce in 1970 which was nothing but transferring of funds via internet, context of which after the opening of the internet for commercial use got completely transformed into buying and selling of any commodity over the internet. Amazon dot com was the pioneer in this closely followed by ebay who found a newer way of generating money in the form of bidding were people could possibly sell anything. Eventually many such creative ventures started and was followed them was the allied business like online security certification agencies like versign, it was formed to certify the security of a e-commerce site something like an ISO. Also many payment gateways etc came up banks got a new means of revenue generation.

“Every one wanted to have web presence, business small and large wanted to make their own website to make their presence felt.”

“B to B sector is where the actual development took place ever since its inception”

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

2013 TODAY,people are stressed out of so much web noise every man every brand every firm every initiative tries to yell out to you whenever you are online. What people want or are interested in these days is your website offering something more than just a portfolio. People love website where they can do something rather than just sit and read what you have to say for Eg : the rajnikanth website for desi martini .com by ” BC Webwise, Mumbai ”,the site is basically a site which talks of various facts and figures about rajnikant content wise but what makes it special is its ability to work without internet , here they played around a punch line stating the site running on “rajni power” so internet is not needed , in lines of endless no of rajnikath jokes flooding the internet off late. Supported with an amazingly peppy music and over whelming use of florescent colour and other graphical elements is a complete experience in itself involving all major senses of touch, feel and sound. Well that was an example from a site which was not a task intensive, apart from using the web for just putting up some information in a creative package it is also used for complex computation and data management etc. Like in a HRMS(human resource management system), CRM(Customer relationship management system),PMS (People management systems) product and many other task specific products like the IRCTC reservation system etc Such a system are either dealing wide range of functionality with less granular details as output or very specific functionality with a granular details as output. Eg irctc. com and cleartrip.com both are of same nature but IRCTC has lot more features but less detailed output while clear trip has lesser features but more output (show data).

“People love website where they can do something, rather than just sit and read “

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

All About Rajni Website made bt BC Webwise,Mumbai

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

IRCTC site has a wide range of functionality with less granular details as output

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

cleartrip.com and IRCTC both are of similar but IRCTC has lot more features but less detailed output while clear trip has lesser features but more granular output.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

History Of Interaction Design, Evolution Of User Interface Design.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

“

I felt that there was an opportunity to create a new design discipline, dedicated to creating imaginative and attractive solutions in a virtual world, where one could design behaviors, animations, and sounds as well as shapes. This would be the equivalent of industrial design but in software rather than three-dimensional objects. Like industrial design, the discipline would start from the needs and desires of the people who use a product or service, and strive to create designs that would give aesthetic pleasure as well as lasting satisfaction and enjoyment. I gave my first conference presentation on the subject in 1984, and at that time I described it as “Soft-face”, thinking of a combination between software and userinterface design we went on thinking of possible names until I eventually settled on “interaction design” with the help of Bill Verplank. Moggridge, 2007

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Well,before computers, there was no “interaction design.” but most of the qualities we seek in a good interaction or ui have been valued through the ages, in different forms. like for instance a products, let us consider “ lota” , it is useful, usable desirable, affordable for the right people, appropriately complex, styled transparent in function and use ,appropriately adaptable, extensible and malleable .overall, having “good fit” with people, context, activity, result. keeping this in mind lets look at the following time line which is built on this idea.to give an idea of the history of interaction design and the evolution user interface.

Operate a machine

“The qualities we seek in a good interaction or UI have been valued through the ages, in different forms.”

Long Long Ago

(Since human invented tools)

Use software

1979

Perform a task

1984

Experience

1990

Connect

2000

(1979 VisiCalc)

(1984 apple PC, invention of the term interaction design by Bill Moggridge and Bill Verplank eg: MS Office)

(1990, fuelled by the availability of the internet for commercial use eg: Mosaic)

(2000 the machines are slowly going more and more to the background, we are designing for what happens between people through the machines)

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Operate a machine Ever Since human invented tools.

Use software (1979 VisiCalc)

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Perform a task 1984 apple PC, invention of the term interaction design by Bill

Moggridge and Bill Verplank eg: MS Office

Experience (1990, fuelled by the availability of the internet for commercial use eg: Mosaic)

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Connect (2000 the machines are slowly going more and more to the background, we are designing for what happens between people through the machines)

Over the Years now we can see how the perception and understanding of interaction design has changed initially it was simply just the way hold or use a product later it became how we control a products through switches and levers etc, then designers were never in the picture. In the later year with the development of the computer and introduction of the display, slowly interaction design started to immerge as a interdisciplinary subject and designers started to play a vital role in the discipline,involving other subjects like human factors, ergonomics and user psychology etc

â&#x20AC;&#x153;The perception and understanding of interaction design has changed â&#x20AC;&#x153;

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Crash Assignment. Re-design teamgrid.in and its logo design

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Team Grid TeamGrid is a comprehensive People Management Application platform from Infologitech Systems (P) Ltd. The core offering is a cloud based platform that delivers People Management Solutions (PMS) shamelessly over Mobile, Smart Phones, Tabs and Systems. TeamGrid leverages latest cloud and mobile technologies to offer such seamless solutions.

Features Field Resource Management Solution Sales and Field Employee attendance and workflow management solution Sales Force incentives management Geo-Fencing and customer service management Judgement enabling / Decision making â&#x20AC;&#x201C; Reports Human Resource Database management Human Resource Information Management Recruiting Solutions Performance Solutions Payroll integration solutions

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Design Brief Redesign the Logo and the Website keeping in mind the core values like value for money, accessibility and easy to use. The new design has to be such that it does not make the current user feel it is a something completely new as it is a product which is already in market and has a large user base.

Designers statement Since the product has been launched very recently and has just started to catch up in the market, it will be wise to continue with the existing wire framing for the website and work towards making it aesthetically stronger, as far as usability is associated it is less challenging as it is a static login page. For the logo refinement of the existing concept is advisable .

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Existing design

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

End Users

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Wire Framing 1 Pg1 Seamless people management system

HOME

ABOUT US

DEMO

Comprehensive People Management

Application platform

Feature

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo metus vel odio vehicula dapibus. Sed venenatis, libero ac imperdiet convallis, magna lorem facilisis est, quis commodo purus ipsum vitae elit.Integer enim nibh, facilisis a blandit a,cursus in lectus. Donec interdum velit nec diam porta nec dignissim nulla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus

sit amet, consectetur adipiscing elit. Phasellus commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

FOOTER

Lorem ipsum dolor

commodo metus vel odio vehicula

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Wire Framing 1.2 Pg2 Seamless people management system

HOME

ABOUT US

DEMO

ABOUT US Lorem ipsum dolor

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

FOOTER

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Wire Framing 1 Pg3 Seamless people management system

HOME

FORM

FOOTER

ABOUT US

DEMO

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Wire Framing 2 Seamless people management system

HOME

ABOUT US

DEMO

Comprehensive People Management

Application platform

Feature

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

ABOUT US

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus sit amet, consectetur adipiscing elit. Phasellus Diploma Project | 2009-2013 | Abhishu Roy | UG0901 commodo metus vel odio vehicula commodo metus vel odio vehicula dapibus. Sed venenatis, libero ac imperdiet convallis, magna lorem facilisis est, quis commodo purus ipsum vitae elit.Integer enim nibh, facilisis a blandit a,cursus in lectus. Donec interdum velit nec diam porta nec dignissim nulla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

Wire Framing 2 ABOUT US

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

FORM

Submit

Reset

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Wire Framing Final SOCIAL NETWORK TABS

Seamless people management system

LORUM IPSUM

HOME

LORUM IPSUM

ABOUT US

DEMO

LORUM IPSUM

USP

DOWNLODE BROCHURE

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

ABOUT US

ABOUT US Diploma Project | 2009-2013 | Abhishu Roy | UG0901 Lorem ipsum dolor

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

Wire Framing Final dapibus. Sed venenatis, libero ac imperdiet

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

FORM

FOOTER

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Logo Explorations

TEAM

GRID Concept: Away Yet Connected

Concept: Technology That Connects People

TEAMGRID Concept: Connected People/ User

Concept: Technology That Connects People

TEAM

GRID Concept: Connected People/ User

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Logo

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Stationary Design

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Letter Head Dimension

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Envelop dimension Back

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Envelop dimension Front

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Visiting card

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

CD Mailer

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

CD Mailer Dimension

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Merchandise

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Trend Mapping Indian internet user trend UI Design Trend

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Trend Mapping Indian internet user trend

Internet in India has crossed the tipping point of 100 Mn users in 2011. Even though 69% of Indian population resides in the rural areas1, most of the internet users in India hail from the urban parts of the country. This presents a huge opportunity for growth in internet usage. According to the latest IMRB survey, there are 38 Mn users in Rural India who have accessed internet which is 4.6% of the rural population at least once in their lives, although an encouraging growth, the penetration is still very low considering the huge population of 833 Mn. Of these Internet users, there are 31 Mn users who have accessed the internet at least once in the past one month. The mobile revolution has been an accelerator for bringing the rural user online. As of June 2012, there are 3.6 Mn Mobile Internet users. This has grown 7.2 times in the past 2 years.

137,000,000

Internet users

â&#x20AC;&#x153;There are 38 Million users in Rural India who have accessed internet which is 4.6% of the rural populationâ&#x20AC;?

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

India’s Internet Population Is

Third Largest In The World, After China And USA

THE NUMBER OF INTERNET USERS IN INDIA IS GROWING BY MORE THAN

1,500,000 EVERY MONTH

India Adds a NEW Internet user every 2 sec 53

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

There are 100.3 Million Internet Non-Users. There are various reasons behind not using the internet services. The reasons can be based on the following factors: - - - -

Lack of Knowledge of Internet Lack of Means (or infrastructure) Beliefs (the Opinions held by the non-users) Lack of Awareness of internet is a major reason for non-usage.

Many feel that they need to learn to use the PC before they can start using internet. Majority of the non-users can not access internet because they do not have an Internet connection or a PC at home. Improper Electricity supply is also a main reason people are unable to access internet. Lack of awareness and belief that there is no need for the Internet are some of the main reasons for not accessing Internet. Thus the Rural population needs to be educated and made aware of the benefits they can reap from using Internet. But, one of the biggest reasons people are unable to access Internet is Lack of Infrastructure. Thus, to truly drive the Internet usage in rural areas, more initiative must be taken to improve the infrastructure. For the Rural Claimed Internet user, Internet is mainly a source of entertainment and communication and a huge majority of the users have used it primarily for entertainment. Although the awareness of online services and e-commerce is high, we do not see much usage primarily because of lack of knowledge. Although, many of the users have stated that they would like to use online services and e-commerce in the future. Thus, even though there is awareness, there is a pressing need to educate and inform the user of the benefits of the internet services to drive growth in internet usage.

“Lack of awareness and belief that there is no need for the Internet are some of the main reasons for not accessing Internet.”

“Internet is mainly a source of entertainment and communication huge majority of the users have used it primarily for entertainment.”

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Users mostly like to access Music, Videos and Photos for entertainment. E-mail are mainly used for communication. Users use the Online Services for Educational purposes and Online Job sites. Users are aware that they can book tickets online but usage is not that high for this purpose. They have instead purchased mobile downloads viz. Ringtones, applications online although these users would want to book tickets online in the future. Since mobile downloads are relatively easy to purchase than tickets, ease of transacting online is an important factor for the rural internet users. By making the user interface more user friendly for the rural user and educating them on the usage of online shopping portals, more evolved online shoppers will emerge from Rural India. Same goes for online banking and payment of utility bills: Awareness is high, but usage is low. And the intention to use these services in the future is high. This means that the users are aware and willing to use these, but due to limitations regarding infrastructure / knowledge, they have not been able to. Users are also aware that there are services catering to the specific rural requirements viz. Information search related to address, phone numbers etc, latest farming techniques, weather forecasts, information on agricultural

â&#x20AC;&#x153;Making the user interface more user friendly for the user and educating them â&#x20AC;?

NOTE - This data is based on the research conducted by Internet and Mobile Association of India (IAMAI) in 2012 and By We Are Social ,Singapore.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Trend Mapping UI Design Trend

User interface is a branch in design which deals with how a user interacts with a products. We interact with product every now and then typing on your computer, washing your clothes in the washing machine It is essentially a multi disciplinary subject and need lot of aspects to be taken care of like ergonomics, user psychology etc along with visual design, if we look back into times it was initially came under the engineering design department, then most of or products were controlled by livers and switches. Then with the development of technology analog controls became obsolete and digital controls and touch screens started to take over which required different set of understanding that was the true dawn of the modern day interaction design, what developed only for product has very vast applications these days ranging from space design to advertising. There are two important factor on any interaction design user experience goal and usability for e.g. Your friend has come to your home you both plan to go to a mall, while you were about to leave you were listening to a specific song on your phone. You get in your car to leave and your cars audio system detects the song playing in your phone and starts streaming it via bluetooth in your car audio. â&#x20AC;&#x153;Car audio detecting and playing your songâ&#x20AC;? is the user experience and since u need not do all this manually it happened automatically is usability feature. This two feature working together is interaction design, since this is an interdisciplinary subject there are grey areas as well. Following is some of the usability trends which i tried to incorporate into my designs for the website.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Minimalism After years of bells ,whistles, user interface design is going back to basics ,at least according to some big Names, including Google and Microsoft to name a few. Glossy icons are replaced by simpler one-color versions or text-based buttons, rich gradients with simple solid color combinations.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Skeuomorphism Skeuomorphic user interface design is mostly popularized by Apple, Basically, the design approach is imitating the look and functionality of traditional and familiar objects to make the interface more intuitive. For example, using wooden bookshelf with book covers to represent digital content or the catapult used to lunch the angry birds are good examples of skeuomorphism.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Laser focus Laser focused user interface puts visual focus on a single, obvious task to do once a user opens the web application, instead of providing several equally important options. The key benefit of this approach is simplicity â&#x20AC;&#x201C; users instantly know what the application is about and what the suggested action is.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Context sensitive navigation Context sensitive navigation came with the rise of dynamic user interfaces and is a great way to de clutter your design. Basically, you need to ask yourself a simple question: which navigation elements should be on screen all the time and what can be shown only in certain situations (actions)?

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Collapsed content Another great way to de clutter your user interface design is to hide non-essential options and widgets under one link which will expand and collapse on a userâ&#x20AC;&#x2122;s request.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Content chunking Content chunking is a technique of presenting a large amount of content in smaller visual chunks, so itâ&#x20AC;&#x2122;s easier for people to read and mentally digest. For example, splitting this article into several sections with headings and accompanying pictures makes it a lot easier to read compared to long monotonous stream of text.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Long pages Once frowned upon by both clients and designers, long pages which require a lot of scrolling are now all over the web. One explanation is that users are so accustomed to vertical scrolling (assisted by mouse wheel) that itâ&#x20AC;&#x2122;s actually worse to split the content on separate pages ,it requires more effort from users to find it and reach it.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Main Project Logo Design OneOrbit UI Design OneOrbit For School

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Synopsis Introduction The project intends to create a user interface and interaction/usability for various CRM and HRMS products of infologotech, Hyderabad and its subsidiary Mytri,Tech Solution, giving me a rare opportunity to work closely in association with various other teams which results in creating a great user interface like the marketing team and the tech team.

Motivation The CRM and HRMS products are one of those products which play a very important role in efficient working of a business, such product is generally a multiple user based. So a good GUI gives a great edge. Successful use of the system greatly depends on the different type of people using it and how well they are able to use the system to give greater productivity. Objective and scope of work : -Creating a user interface for a CRM product called OneOrbit for schools. -Creating A logo For One Orbit. - Research and creating the scope of wrk for a new application OneOrbit Clinic targeted to Doctors for the development of the product, UI and Interaction later.

Conclusion Since all the said products has to deal with people of various type with different levels of analytical and logical reasoning etc it gives a major challenge to the interaction designer so that the interface is made as fluid as possible and also increasing the overall productivity from the business and increasing customer relationship.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Client

Mytri Tech Solutions is a software product development company based out of Hyderabad. A subsidiary of Infologitech Systems, Mytri Tech Solutions specializes in bringing Web and Mobile Web technologies to best use by Consumer and Enterprise businesses.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

OneOrbit One orbit is a web based solution for school management, housing society management and clinic management; each of this web based application has to major feature operations management and communication management with the consumers. It is based on a common interface for the users/customers to access services from multiple entities. The interface is being built in such a way that we can add additional businesses to the portal on an ongoing basis. The primary idea being that the consumer continues to use single interface to reach to multiple entities. Each of the additional business will use the common core of ‘Customer communication management’ and only the needed ‘Operations management’ functionality specific to that business will be built. Over the years the portal will develop into a place where customers will receive services from multiple entities with a uniform experience as per their preferences

Features -Individual buckets for messages (not email), bills, surveys, calendar, coupons/offers from all entities

-Family set up at customer end to manage proxy set up, calendar synchronization etc

-Multiple tabs to reach services provided by each entity. -The platform will provide deep SMS integration and mobile access. -We want to add bill pay functionality to the customer in the near future.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Design Brief Create a user interface based on the basic idea of creating a web based application for schools, based around a common interface for the users to access services from various entities. Interface has to be designed in such a way that new business can add, additional to the existing businesses to the portal on an ongoing basis. The primary idea being that the consumer continues to use single interface to reach to multiple entities. The logo design has to be such that it invokes feeling like approachable , user-friendly and inexpensive and graphically represent something that intigrate diffrent enteties into one platform.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

The Research Since it was a product on which the founder has been working on for past few years so initially a lot of information around the products like sister product user etc was in place. To get a better understanding did my own research on the various communication conducted in between a school and parents and vice versa, most of it was ethnographical approach and was through verbal communication with parents. but similar research was being conducted by the founders before so was feed upon those by the founders later. The major research was in the aspect of UI design trends and what kind of features of interactivity can be included into the design depending upon the core programing structure being used for the application and also internet user trend because it gave me an insight about the inhibitions in the Indian users mind about using the internet, which i have included in the section before. Not much of research was needed in this case as operations management and customer relationship management is a well tried and tested IT product and quite popular. Some other areas i took under consideration. - User profiling (mood board) - Google analytics report (keywords , demography etc) on some CRM and HRMS Products - Understanding the psychology of user of the targeted segment. - Understanding Indian web users - Studying similar products, though an extensive is difficult as these are not open source

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

End Users

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Similar Products This kind of product is developed by almost all the major IT firms, targeting different task like Human Recourse Management(HRMS) Customer Relationship Managements (CRM) Enterprise Resource Management (ERP) to name a few . These products vary to one another depending the target group and features and also the amount of granular information it takes care of or gives as output. Major common feature among all of this product is customizing as this are very user centric and depends on the client business which is one of the factor what makes such product mostly expensive. The results of using such products are very positive so more and more business are tending towards it. To name a few major It company who are into such products are Tally , Oracle , TCS, Microsoft etc there products are highly expensive and they target businesses that has huge no of employee user base etc. Honeycomb, IT@school-ERP, Guruseva, Ceon e-Campus are few product which targets similar user group as OneOrbit For school but the functionality of those are very different and this are the closes i cold identify as sister products of OneOrbit. Following pages includes screen shots of the landing pages of the sister products, the task pages canot be acessed without valied login. i have put down my comments along the screen shots.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Guruseva.in

- There are three navigation path two of them have same function and hierarchy missing. - Too many animating icons which diverts attention of the user from the primary information. - There is no uniformity in the design and the information architecture is cluttered

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Ceon.in

-The branding is missing, which is vital for getting users trust. - The site seems to be pointing out only one fact up front, that it is avail for Rs 30 a month per student - There are navigation links on top on left and on right which creates confusion more because it dose not have an hierarchy. - It lacks uniformity in the design.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

IT@School-ERP

-The information architecture is in place along with proper hierarchy - The header is cluttered and has too much information . - It lacks uniformity in the design. - The visual used looks very out of context as its a very much India based product targeting Indian clientele

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Orell Honeycomb

-This is one of the well design and thought after website in this category. - The only draw back i feel is it looks very templatised specially in the layout.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Process Front end development and back end development are the two terms specific to interaction design for web and IT. The front end development usually involves the data architect, manager, UI designer, UI developers and the sales team who together using various qualitative and quantitative techniques they give a form to a product. The process i followed was 1st Stage - Brainstorm with Data Architect, Managers of sales and project, UI Developer the outcome of this was in the form of wireframes.

2nd Stage - Based on the wireframes i did the visual design, keeping in mind the structural programing language being used for the project in this case it was jquary so the functionality was chosen around it , this is not a constrain, just a sensible way of cost cutting as the codes for such functionality are readily available only needs tweaking to customize it. 3rd Stage - in this stage the design i created was converted into CSS by a UI developer which is essentially creating a set of codes which in a way forms templates for different design elements, this CSS conversion is usually taken care by the designer as that helps in maintaining the consistency in the design which i dint knew and iam trying to learn it now. Post this three stages there is usual a review meeting to check if all the functions are included and are feasible post this the designs are taken for back end development which gives the function to the product this is one of the most time taking part of the process. Once this is stage is done the next stage is testing phase where every feature and all functions are looked at and are tweaked to its optimum level. Beyond this its beta launch post which we get user feedback and newer features and functionality are added as revenue starts coming in based on the same CSS so the design remains consistent. 77

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Process Since i was novice to the technology end of the interaction design for web based application, i used the jquery UI design forum to look for possible functional behavior. The forum has all the possible behavior possible with jquery with examples so it made the workflow easier but using this guidelines also required a good amount of sensibility and understanding to know which kind of behavior might work best all different cases.

This constrain that i had some time made me depressed but talking to people who were into interaction design some time now helped, me to overcome this as they mentioned this sort of forum are like primers used by kids once we practice more an more with learn what functionality is possible with what sort of structural program.

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Color scheme Commitment Spontaneous Progressive

Reliable Professional Economical

Friendly Economical Flexible

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Color scheme Reliable Professional Economical

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Brainstorm Sessions

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Task Map

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe landing Social Network Branding

ID Psssword

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

App 1

App 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

More .........

App 3 More .........

Lorem ipsum dolor sit amet, consectetur adipiscing elit. More .........

About Us

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum, mi vitae blandit semper, orci orci eleifend neque, id ullamcorper leo dolor a nisi.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum, mi vitae blandit semper, orci orci eleifend neque, id ullamcorper leo dolor a nisi.

Name

92, Telcom Nagar, Gachibowli, Hyderabad-500032 Website: www.infolgitech.in, Email: info@infologitech.in

Email Phone no Comment

SUBMIT

FOOTER

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Landing Social Network Branding

ID Psssword Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

More .........

App 1

App 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

More .........

App 3 More .........

Lorem ipsum dolor sit amet, consectetur adipiscing elit. More .........

About Us

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum, mi vitae blandit semper, orci orci eleifend neque, id ullamcorper leo dolor a nisi.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum, mi vitae blandit semper, orci orci eleifend neque, id ullamcorper leo dolor a nisi.

Name

92, Telcom Nagar, Gachibowli, Hyderabad-500032 Website: www.infolgitech.in, Email: info@infologitech.in

Email Phone no Comment

SUBMIT

FOOTER

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Landing Product details Page Social Network Branding

- Downlode Brochure - Get Quotation

More .........

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. More .........

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. More .........

Lorem ipsum

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Landing

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Landing Unclicked | Clicked | Hover States

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Landing Product Details Page

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Mock-up

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Buckets Social Network

Branding

BUCKETS

CONNECTIONS

No Grants Given

Grants Wife Daughter Son Uncle

Wife Daughter Son Uncle

Edit Grant List Name

Mobile No

Relationship Give Grants

FOOTER

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Buckets User can shuffle between buckets and connection here

User can add new relations from here, to be shown in the grant list

After user logs in his name appears here, personal info can be edited here

User can extend his grants to the relations here

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Buckets Unclicked | Clicked | Hover States

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Mock-up Buckets

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Buckets > Message

Social Network

Branding

BUCKETS

CONNECTIONS

Recived Messages Date&Time 18th April 2013 17:14

Sender

Subject

Abhishu Roy

Its The Time To Disco

Comment

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

FOOTER

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Buckets > Message The header doubles as search bar for the individual columns for that particular field

The comment feed were user can see and reply to the thread as and when required

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Mock-up Buckets > Message

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Buckets > Reports

Social Network

Branding

BUCKETS

CONNECTIONS

Reports Recived Sender

Title

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

Date Time

FOOTER

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Buckets > Reports

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Buckets > Survey

Social Network

Branding

BUCKETS

CONNECTIONS

Serveys Recived Start Time

End Time

18th April 2013 17:14 18th May 2013 17:14

Surveyor Abhishu Roy

Staus No

Title Its The Time To Disco

Servey Form

Submit 18th April 2013 17:14 18th May 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14 18th May 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14 18th May 2013 17:14

Abhishu Roy

Its The Time To Disco

FOOTER

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Buckets > Survey

100

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Connections

Social Network

Branding

BUCKETS

Extend Privelage

CONNECTIONS

No Privelage Given Wife Daughter Son Uncle

No Privelage Given

Wife Daughter Son Uncle

No Privelage Given

Creat Connections Name

Bussiness Type

City

Bussiness ID

Find Connection

FOOTER

101

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Connections

102

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Connection > School

Social Network

Branding

BUCKETS

OneOrbit Rainbow Public School

CONNECTIONS

Branding

FOOTER

103

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Connection > School This shows the school name who is using this product, the parent has logged in for

104

This shows wards name for whom parents has logged and shuffle if 2 kids in same school

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Mock-up Connection > School

105

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Connection > School > Write to School

Social Network

Branding

BUCKETS

CONNECTIONS

Ram Singh | Section

Write to school Subject

Topic

Comment Here.....

Ask A Question.

Comment

Date&Time

Sender

Subject

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

FOOTER

106

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Connection > School > Write to School

107

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Connection > School > Assignments

Social Network

Branding

BUCKETS

OneOrbit Rainbow Public School

CONNECTIONS

Assingments Date&Time 18th April 2013 17:14

Ram Singh | Section

Sender

Subject

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

18th April 2013 17:14

Abhishu Roy

Its The Time To Disco

FOOTER

108

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Connection > School > Assignments

109

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Connection > School > Know Your Teachers

Social Network

Branding

BUCKETS

OneOrbit Rainbow Public School

CONNECTIONS

Know Your Teacher Name

Abhishu Roy

Ram Singh | Section

Subject Subject - Biology Profile -10th pass -50 % Avg -15 yrs experience

Profile Subject - Biology Profile -10th pass -50 % Avg -15 yrs experience

Abhishu Roy

Biology

10th Pass

Abhishu Roy

Biology

10th Pass

Abhishu Roy

Biology

10th Pass

Abhishu Roy

Biology

10th Pass

Abhishu Roy

Biology

10th Pass

Abhishu Roy

Biology

10th Pass

Abhishu Roy

Biology

10th Pass

FOOTER

110

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Connection > School > Know Your Teachers

111

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Wireframe Dash Board Connection > School > Know Your Teachers

Social Network

Branding

BUCKETS

OneOrbit Rainbow Public School

CONNECTIONS

Bus Route

Info Graphic

FOOTER

112

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Design Dash Board Connection > School > Know Your Teachers

113

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Logo Initial Explorations

OneOrbit Do It Al l Oneorbit Do It All

Oneorbit

OneOrbit Do It All 114

Do It All

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Logo Initial Explorations

Do It All

All

115

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Final Logo

116

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Mono Color

117

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Logo Spacing

100 x

36 x

30 x

312 x 30 x 14 x

30 x

Note : X is equal to one unit.

118

30 x

11 x

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Fair Usage Plans

119

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Fair Usage Plans

120

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Brand Typeface Amaranth Regular Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Amaranth Itelic

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Amaranth Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

121

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Print Ad

While your kid is at the school we talk for them, with you and the school.

For Schools

We take care of the....

Messages

Reports

Assingments

Calender

Write to school

Know Your Teacher

Bus Route

OneOrbit | 92, Telcom Nagar, Gachibowli, Hyderabad-500032 | www.oneorbit.com

122

Shop

Notice

Gallary

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Flyer For Schools

While your kid is at the school we talk for them, with you and the school.

We take care of the....

Messages

Reports

Assingments

Calender

Write to school

Know Your Teacher

Bus Route

Shop

Notice

Gallary

OneOrbit | 92, Telcom Nagar, Gachibowli, Hyderabad-500032 | www.oneorbit.com

123

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Stationary

124

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Dimension Letter Head T

p 210 g mm

15 mm

j D

L m

60 mm

16 mm

14 mm

q 6 mm

f p

l g

g l l

To o ,Lorem iipsum sum

l f ll

ll g

Sub ect - Lorem ipsum dolor sit amet, consectetuer adipiscin Subject adipiscing elit elit.

176 mm

g j

ear ,Lorem iipsum sum Dear

lg l f g

ll l

Lorem adipiscing orem iipsum sum dolor sit amet, consectetuer adi iscin elit. Aenean commodo ula eeget et dolor. Aenean l g liligula massa. natoque magnis assa. Cum sociis nato ue penatibus et ma nis dis parturient montes, nascetur ridiculus mus. Donec l l l quam l l felis, elis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec ede frin illa vel, aliquet nec, vulputate eeget, et, arcu. In enim rhoncus ut, imperdiet a, fringilla tempus. Donec vitae sapienpede ut justo, libero venenatis faucibus. Nullam quisjusto, ante. Etiam sit amet orci eget venenatis vitae, justo. usto. Nullam dictum felis elis eu pede mollis pretium. Inte er tincidunt. Cras dapibus. Integer f f semper g nisi. Aenean vu g eu, g Vivamus vulputate tellus. ivamus eelementum ementum putate eeleifend eifend te us. Aenean leo eo ligula, i u a, porttitor consequat vitae, eeleifend ei end ac, enim. A Aliquam iquam lorem orem ante, dapibus in, viverra quis, feugiat eu iat a, te tellus. us. q g g Phasellus hase us viverra nu nulla a ut metus varius laoreet. aoreet. Quisque uisque rutrum. Aenean imperdiet. Etiam u ultricies tricies nisi

R g p

ve au vel augue. ue. Curabitur u ullamcorper amcorper u ultricies tricies nisi. Nam eeget et dui. Etiam rhoncus. Maecenas tempus, te tellus us adipiscing sem neque sed ipsum. Nam eeget et condimentum rhoncus, sem quam semper libero, ibero, sit amet adipiscin quam nunc, b blandit andit ve vel,, luctus uctus pu pulvinar, vinar, hendrerit id, lorem. orem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus aucibus tincidunt. Duis leo. Sed fringilla rin illa mauris sit amet nibh. Donec sodales sa sagittis ittis ma magna. na. Sed consequat, conse uat, leo eeget et bibendum sodales, au augue ue velit cursus nunc.

s p 297 mm

Regards e ard iipsum sum iipsum sum

16 mm 9 mm

238 mm

OneOrbit | 92, Telcom Nagar, Gachibowli, Hyderabad-500032 | www.oneorbit.com

125

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Dimension Envelop Inside 106 mm 9 mm 14 mm 49 mm 34 mm 89 mm 106 mm

214 mm

126

214 mm

183 mm

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Dimension Envelop Outside 106 mm 9 mm 14 mm 49 mm 34 mm 89 mm 106 mm

214 mm

OneOrbit | 92, Telcom Nagar, Gachibowli, Hyderabad-500032 | www.oneorbit.com

214 mm

183 mm

127

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Dimension Visiting Card

89.5mm

50.8 mm 45mm

11mm

2mm

50.8 mm

10 mm

128

89.5mm

2mm

85.5mm

Paan Singh Tomar

92, Telcom Nagar, Gachibowli, Hyderabad-500032 Head Security www.oneorbit.com

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Dimension CD Mailer

122 mm

80 mm

122 mm

19 mm

7 mm

OneOrbit | 92, Telcom Nagar, Gachibowli, Hyderabad-500032 | www.oneorbit.com

129

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Dimension CD Print

36 mm 9 mm

92, Telcom Nagar, Gachibowli, Hyderabad-500032 www.oneorbit.com

118 mm

130

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Icons Home page

Icons School Dashboard

131

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

132

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Feedback And Review

133

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

134

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

135

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

135

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

References

136

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Websites - www.Awwwards.Com - www.Jqueryui.Com - www.99Designs.Com/Designer-Blog - www.Behance.Net - www.Interaction-Design.Org - www.Marcrettig.Com

Presentations - Marc Rettig Presentation Carnegie Mellon University on 2 April 2004. - We Are Social,Singapore, social digital mobile India November 2012 - Richard Buchanan: Keynote at Interaction Design Association summit 26 Feb 2011

Journals

137

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

138

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Acknowledgments

139

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

Murli Madhav Durbha Director Mytri techsolutions

Ravi Yadavalli

Director at Infologitech Systems

Prof J.Menon Project Guide

Prof S.Balaram

Dean, D.J.Academy Of Design

Nagesh Susarla

Sr Interaction Designer,Symantec

Priyankar Gupta

Visiting Faculty DJAD

Chetan Sayal

Alumni, designer at design dimensions, New Delhi

My Parents

for supporting me through out

Special Mentions All my friends Anindita Chirag Krutika Priyanka

Tech Support

Adobe Creative Suite Microsoft Office Dell XPS BeamFiber

140

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

141

Diploma Project | 2009-2013 | Abhishu Roy | UG0901

142