Picture This © data visualisation platform by And Then

1
Interactive Information Design By Santhoshram E N Guided by Mr. C. Mohan Communication Design IV Year D J Academy of Design 2013
PictureThis!

7
ACKNOWLEDGEMENT
CONCLUSION
REFERENCE
FINAL DESIGN
CONCEPT EXPLORATION
IDEATION
REDEFINED BRIEF
RESEARCH
INITIAL BRIEF
SYNOPSIS

9
THIS IS A DOCUMENTATION of the work process that I had gone through, as
a part of my final year project in D J Academy of Design. The require-
ments of the graduation project was that it should be challenging and
complex enough in terms of quality and comprehensiveness, that it
compels the use of all the learning that has taken place throughout
the years.
I got to achieve this goal through an opportunity presented to me by
And Then Digital Arts Private Limited. I was called in to And Then to
take forward an idea that had been formulated by the studio. The
idea was to create an online platform to give the general audience a
shot in creating their own infographics. The idea impressed me and
I got started on it. During my four month working period, I had gone
through intensive research, research analysis, product logic explora-
tion to final execution of the website. The present stage of the product
is in beta stage, in the sense its still in its preliminary stages and will
be going through iterations and other exploration.
Apart from working on my own project, I also got the exposure to
work on a few internal projects of the studio as well. These works
include promotional ad print posters, digital event posters, concept
videos, campaign conceptualization, brochure design and its produc-
tion, and brand identity and website ideation. The variety of projects
and the work experience that I gained during my four months at And
Then has helped me to open up to anew perspectives at the same
time gain impressive amount of practical knowledge about the design
profession.

11
To create a module that graphically communicates
statistical information in an interactive platform to a
target audience ranging from students to professionals.
In short, a data visualizing platform.

12
RESEARCH
INITIAL BRIEF
COMPREHENSION

13
THE INITIAL UNDERSTANDING of the brief post discussion was to create a digital
platform that aids users to convert statistical material into visually rich
information graphics.
The digital platform will be a website, experienced best through a per-
sonal computer. The users will have a personal account in which they can
convert their statistical research data into information graphics by using
an intuitive user friendly interface. The interface will contain the necessary
elements required to create a graphically appealing presentation.
There are two groups of audience for this product. One being high school
and college students who are frequently required to present their academ-
ic work for evaluation. The other being young professionals who gener-
ally create many excel sheets, bar graphs and pie charts for their client
presentations.

15
THE NEED FOR SPEED in communication. In these contemporary times speed
has become an obsession, but the contexts are changing. For instance,
the need for faster means of transportation is carried on to faster means
of communication. Well, I am talking about the Information Age.
The Information Age has fast pushed aside an economy that depended
on industrialization to take its place through information computerization.
This age which gave rise of the digital industry has created a knowledge
based society surrounded by a high-tech global economy. Their collabo-
rated efforts of have tremendously increased social interaction through
social media networks, which not only helps in sharing information but
also increasing it simultaneously.
With this rapid growth of information and products for communication,
there is an escalating need for a solution to connect them more effective-
ly. This requires information design which involves efficient information
processing by the data consumer.

17
FROM WHERE INFORMATION stands today, its growth appears to be unidirec-
tional and getting more acute by the second, meaning there is no control-
ling the data traffic but rather ease its flow to the end user. Hence the
most sensible thing is to aid the consumer in grasping the essence of the
data spontaneously, at the same time also help in retention of the data,
thus increasing productivity.
According to the brief, the product is a platform that helps, its users create
graphically strong visual communication materials. To get to understand
this, I started of with doing a parallel product auditing. During this phase,
there were four existing products for presentation,that were researched
and analyzed upon.
- Infogr.am
- Pictochart
- Visual.ly
- Prezi
These were the few online websites which were audited. These are pres-
ently the only sites which cater to the need of simplifying information.
Visual.ly is the more renowned of them all. It works in the basis of client-
designer networking through the visual.ly representatives, and this is how
it works. The client uses his visual.ly account to enter his data in three
steps, starting of with the name of the infographic, details of its content.
Then, moves on to choosing a layout and style from a set of existing
categories. This information is sourced about on the visual.ly designers
community and then one of them reverts to the client, who then discuss
his cost and gets to work.

19
Infogr.am and Pictochart, on the other hand, have a built in user interface
to help their users make their own infographics. This is done simple by
creating presets, while giving the user the user the liberty to fiddle around
with the colour and layout (though infogr.am does not do the former).
Here again the user goes to three steps, where they choose their pre-
ferred layout from the preset list of them. Then move on to their built in
user interface, majorly working by the logic of drag and drop. Here again
the user gets to choose from a list of presets.
Through my analysis of the three, my understanding is as follows.
- Contain basic options to upload statistical data, maps, photos, videos
and textual content
- Working of the interface is based on drag and drop, and entering values
- Also helps in creating interactive infographics, but restricted to simple
level of hover to level
- Not much of exploration on geographical maps
- They all contain and revolve around similar catch phrase like making
information beautiful.
Even though evolved out of an old school of thought (presentation slides),
with the simple addition of zooming, Prezi has managed to capture the
attention of viewers of its presentation.

20
HISTORY OF DATA
REPRESENTATION
RESEARCH

21
IN PRESENT DAY CONTEXT, presentation has become a way of life for many.
That why the phrase ‘Presentation is everything.’ Does not matter if its a
team meeting or client presentation or industrial conference. A good pres-
entation only equals to a job well done.
Preparing a solid presentation can take inordinate amount of time and
energy. In spite of that, in many cases graphics that tell a story plays a piv-
otal role in said presentations.
Enter infographics, an effective communication medium, which has been
in existence for quite a long time, and had recently started to dominate the
online landscape. You seemingly cant go a few hours without one popping
up on the web. Yet, these visuals are popular for a reason. They are easy
on the eye, easy to scan and when done right tend to tell a powerful story.
So, what is this infographics? Information graphics also know as info-
graphics graphic rich visual representation of information, intended to
communicate complex information, be it textual or numerical, clearly,
quickly and effectively.

22
PAST
Pre Digital Age
7500 BCE
Nascent Digital Age
1980
Recent History
1857
TIMELINE
HISTORY OF DATA
REPRESENTATION

23
Information Age
2000s
Big Data
2013+
FUTURE

24
HISTORY OF DATA
REPRESENTATION
RESEARCH

25
Information representation in
Pre Digital Age
The terminology, might be relatively new
but the concept has been in existence from
as early as 7500BCE. They existed on map
made in Çatalhöyük, Turkey on which re-
cords of cattle and stock were maintained.

26
This understanding of graphical represen-
tation got much developed in 1857, when
English nurse Florence Nightingale used
information graphics, persuading, Queen
Vitoria to improve medical conditions in the
military, principally the Coxcomb chart, a
combination of stacked bar and pie charts,
depicting the number and causes of death
during each month of the Crimean War.
In 1861, Charles Joseph Minard released
an informational graphic on the subject on
Napoleon’s Disastrous March on Moscow.
The graphics creator, captured four differ-
ent changing variables that contributed to
Napoleon’s downfall: the army’s direction as
the travelled, the location the troops passed
through, the size of the army as the troops
died from hunger, wounds and the freezing
temperature they experienced.
Recent History

27
Late 1980s saw the birth of a new period in
human history, the information Age, which
is also know as the New Media Age. By now
the Information Age had fast pushed aside
an economy that depended on industrializa-
tion to take its place through information
computerization. This age which gave rise
of the digital industry has created a knowl-
edge based society surrounded by a high-
tech global economy. Their collaborated
efforts have tremendously increased social
interaction through social media networks,
which not only helps in sharing information
but also increasing it simultaneously.
Nascent Digital Age

28
With the flourishing Information Age along
side new media technologies, gave people
the opportunity, not only to access these
datas but also explore its visual capabilities.
This led to a more simple and minimalistic
data representation approach called Info-
Graphics.
the new Millennium

29
With the influence of the digital age tech-
nologies, the data generation of the world
digital population is exploding like a nu-
clear bomb. Its expanding at such a rate
that we create 2.5 quintillion bytes of data
every day. Thats two and a half million 1TB
externals a day. This data explosion is so
much that 90% of the data in the world has
been created in the last two years alone.
This data comes from everywhere: sensors
used to gather climate information, posts
to social media sites, digital pictures and
videos, purchase transaction records, and
cell phone GPS signals to name a few. This
kind of data is called Big Data.
IBM was the one to bring Big data to light
to solve the problem of large enterprises
to solve their big data challenges. IBM Big
Data proposes to solve the situation of
information explosion using Intelligent ana-
lytics for data comprehension for enabling
efficiency.
the Future

30
INITIAL BRIEF
TYPES OF
INFOGRAPHICS

31
Now with the understanding of that there is a large quantity as well as vari-
ety in information, and infographics proves a possibility to decode complex
data into interesting, concise and digestible format, there was a need to
understand ways to converge them. For this, I had to understand the differ-
ent kind of categories infographics can be placed in. Here are a few.

32
Otherwise a lengthy piece of writing is
converted into a simplified visual article for
easy glance through and comprehensibility.
A simple ‘yes’ or ‘no’ flowchart can easily
drive the viewer to the desired answer be-
ing searched for.
Visualized Article
Flow Chart

33
When the data is a chronology of events,
a timeline presentation simply runs one
through from A to Z or look at the interme-
diates in ease.
This kind of infographics generally contains
explanatory content and visuals detailing
on the know-how of the tasks which can
frequently be referred to.
The Timeline
Instructive Infographics

34
Contrast improves clarity. A simple compari-
son between two opposing topics of the same
family brings out a better understanding.
Numerical values are better
grasped when converted
into visuals.
Versus Infographics
Numeric Infographics

35
Creative use of photography mixed with
graphic design can aide simple and com-
plete understanding of the topic at hand.
This helps understand complex
content containing a mixture of
numbers and contents. It tends
to give a macro view of the
complete topic and micro view
of the details.
Photo Infographics
Data Visuvalization

36
INFOGRAPHICS
VISUAL
Graphics Colour coding
Reference icons
KNOWLEDGE
FactsDeductions
CONTENTTime frames
Statistics References

37
They say,‘A picture is worth a thousand words’. But the question is how do you
make the picture. Here is a deduction of the basics elements and understand-
ing an infographic
Visual: Colour Coding / Graphics / Reference Icons
Contents: Time Frames / Statistics / Reference
Knowledge: Facts / Deductions
Infographics can be broadly divided into two aspects
A One-Level Deep Infographic is a simple infographic barely skimming and
brushing through the 3 core parts. It has a visual which is usually common
throughout the design. It has some content to compliment the visual. It imparts
knowledge based on the visuals and content.The one-level design may incor-
porate one or two subparts from visuals and content but the representation is
very basic.
A Two-Level Deep Infographic is a more advanced infographic. It encom-
passes the 3 core parts of the design but delves in deeper. Within the realm
of Visuals, the infographic has the thematic defining graphics of the design. In
addition it has reference icons to condense and compact a lot of data visually.
Color coding becomes a necessity in this type of infographics because visually
separating content through color becomes key in relaying information.
Within the realm of Content, the two-level infographic not only presents factual
data, but also makes references and calls on statistics very regularly. There
may be additional snippets of data as notes. With the increase in the amount
of data as the design goes two-level deep, it becomes very essential to use all
the graphical resources available to you as icons, image holders, shape group-
ings, color and time frame integration.
RESEARCH
BREAKING-DOWN
INFOGRAPHICS

38
8-17 year olds
21%
30%23%
18-25 year olds
27%
21-40 year olds
27%
21-40 year olds
7%

39
USER STUDY
With the understanding of the target audience mentioned in the brief, I
started my user research with the aim of estimating the possible scope
for the product. For this, I got to getting the Internet - User correlation in
the world and to maintain a specific content of comparison, I kept India as
my base.
Out of the whole world population, 34% are Internet users, out of which
2% accounts for Indian Internet population, as of 2012. Out of this 2%,
school going kids in the age group of 8-17 years account for 21%, college
students [18-25] 27%, working men [21-40] 27% and working women [21-
40] 7% respectively, as of 2011.
In this specific population, 30% have Internet access in their office and
23% at their home.
RESEARCH

40
81%
73%
69%
31%
16%
16%
16%

41
USER INFORMATION
CONSUMPTION
As of 2012, 40% of 23.6 Mn Mobile internet users from the top 35 cities in
India are spend dedicated time in information search, among others
Most popularly Consumed Information
Social Networking 81%
Entertainment 73%
Games 69%
Business 31%
Utility 19%
Reading 16%
Lifestyle 16%
Health 16%
RESEARCH

42
83%
30%
Information retention
Short term memory
Working memory
Long term memory
10%75%

43
USER INFORMATION
PROCESSING
When distributing the senses when all of them are active, 83% of the brain
activity involves sight. Sensory learning in comparison of all senses, Sight
takes up 75%
Considering Information Retention, 30% accounts for seeing compared to
10% by reading. This is better justified by the simple understanding of the
types of memory, namely short term memory, long term memory and working
memory.
Short-term memory is the capacity of the mind to store a small amount of
information for a short period of time, say 5-9 seconds. In contrast, long-term
memory can seemingly store unlimited amounts of information. Whereas the
working memory of the mind is distinguished by its ability to temporarily store
information while structuring, processing and manipulating the same, for a
limited period of time.
For example, when you move around a new building, the direction you turn
is stored in your short term memory. The need to process that information
to reverse your path to get back out comes from the working memory. Here
the working memory attempts to process and manipulate the information
attained during the short term memory. Whereas remembering to know every
path, hallway and loo corresponds to long-term memory. Apart from this,
most of the research done on short-term memory has made use of textual
data during the study.
All the above information put together one can conclude that visual data is
easier to comprehend compared to textual data. Few of the major sources of
textual data are newspapers, online articles, magazines, books and textbooks.
RESEARCH

45
HUMAN MIND AND
NUMBERS
In these exponential times, numerical values have become quite a task to
comprehend (forget remembering!). Single and double digit numbers are
quantities that we come across quite frequently in our everyday life. Even
larger number like triple, quadruple numbers or even five digit numbers
are quite imaginable and quantifiable. For instance, 60,000 is a number
that can quite easily be related to, by visualizing a cricket stadium.
However, with the introduction of the information age, the number like
Quintillion(1018
) and Sextillion(1021
), which we generally tend to relate to
while counting the number of stars has now become our everyday numer-
als. In other words, the numbers we used to relate to astronomy have now
begun to be related to economy.
The present day situation of the consumers being bombarded with ex-
traordinary number of digits has lost its plot. This is because, after a point
the number of digits all look the same: Large. The only sensible way of
communicating such exponential digitals is by correlating them to every-
day event/object. For instance, it takes 2403 liters of water to make one
hamburger, which is the same amount consumed by a average person to
take a bath everyday for a month. Such representation of numerical fig-
ures ensures immediate comprehension by the end user which is carried
out through the medium of infographics.
RESEARCH

47
USER’S VISION
Since the product to be made, is to mainly increase the comprehensive
capability and aesthetic clarity, I intended to get to know the ill effects of
poor vision. In the process I got a basic understanding of colour vision
deficiency.
Colour blindness is the inability to distinguish the differences between
certain colors. This condition results from an absence of color-sensitive
pigment in the cone cells of the retina, the nerve layer at the back of the
eye. A person with colour blindness has trouble seeing red, green, blue,
or mixtures of these colors. The most common type is red-green colour
blindness, where red and green are seen as the same color.
Parallel products like adobe softwares, which use gray scale in their inter-
face, help in emphasising the work being generated using the software.
Their icons are made legible for colour blind persons through shapes,
letter forms, tones, etc. After this understanding I decided to keep the in-
teraction of the website completely in gray scale, except for the generated
infographic output.
RESEARCH

49
UNDERSTANDING THE USER
OF THE PRODUCT
When we think of any context, there are three elements that come into
play: Space, Form and Time. Albeit, when talking about communication,
there is a fourth element that comes in, which is the user. When correlat-
ing the user to these elements, it is essential to understand the user’s
needs and expectations on two levels. One is the information and other is
the platform.
Understanding the information consumer
When presenting an information to a consumer, it is necessary to commu-
nication the three dimensions of the story.
Understanding the platform user
When accessing the platform, the product has to suffice two basic needs
of the user: Rational and Emotional. The rational need of the user is to
simply make the end user understand the story in one glance and refer to
it whenever necessary. The emotional need is to present a visually appeal-
ing data set which gives the end-user an ‘eureka!’ moment.
Decoding the information designers process
With the basic comprehension of the concept of space, form and time, the
information designer would generally break the information at hand into
three parts: Where, When and What.
Using these three parameters, a logic can be created for the automation
of an information design system.
RESEARCH

50
AAKASH 2
ONE LAPTOP
PER CHILD

51
MARKET STUDY
Everyone in the world has information to share, which they tend to share
textually or orally. By doing so, they may or may not be successful in getting
across to their end user. Usually they don’t. This is where the visual repre-
sentation by story telling comes in.
Yet, there is another issue, where not all information generators know how
to create an aesthetically pleasing and communicative infographic. Thats
where the designers come in. Still, there are only a handful of them com-
pared to the population of the world who can do this job. It would be im-
practical to expect them to single handedly convert all the textual data into
visuals for the global consumption, considering the amount of data being
produced in the current world. This would only turn out to be a frustrating
tedious job.
It is here that a product of such nature can be best made use of. People with
information at hand can use this product to convert their data into informa-
tive infographics story teller. At the same time, it does not mean that peo-
ple in information design profession would lose their position in the world.
Instead, the work generated by them would rather have a higher value, just
like the difference between mass produced products and hand made goods.
Other technological developments propelling the market in India:
The introduction of the scheme called One Laptop Per Child (OLPC Scheme]
seems positive. This scheme intends the supply all the children of India with
a tablet worth $100. Also the release of Aakash 2, a tablet worth only $20 for
the students of India after government subsidy, is aimed to reach its 220 Mil-
lion students.Also the Indian government is in the process of connecting 600
universities and 1,200 colleges with broadband by 2014.
RESEARCH

53
ENVIRONMENT
The product has the flexibility to work on a personal computer as well as a
digital tablet, for which the environmental conditions had to be considered.
The two outputs from the product is going to be light and sound. The display
of the screen was not to be affected by bad lighting conditions, for instance
sunlight on the screen. The audio of the product should not be over shadowed
in a noisy environment. This is espically in the digital tablet These were the
two basic aspects kept in mind while designing the website.
RESEARCH

55
RESEARCH
ANALYSIS OF
RESEARCH
During these exponential times, information generation seems to be faster than
information consumption. By the time one has gathered information, processed it
and inferences the essence, the statistics have changed drastically. Though keep-
ing in pace with this data explosion is essential, the primary focus is on under-
standing and interpreting the information at hand more effectually also keeping in
mind its retention and time efficiency. This requires an alternative from the classi-
cal representation i.e. adjacent placement of textual and visual information.
So, is infographics the right solution?
Even though visual representation of information has proved to be effective, the
progress has stagnated with the information designers. Whereas the essence of
making an infographic is quite simple and comprehendible by common audience.
Hence this should rather be taken forward to reach out as an aid for people who
constantly encounter and get bombarded with extraordinary amounts of informa-
tion in the day-to-day life – Students and Professionals.
Slow apprehension of the content at hand could leads to negative remarks, follow-
ing relevant consequences. Whereas spontaneous data consumption by one and
data presentation to another will only result in increasing productivity between one
and another. With infographics combined with improvised communication systems,
there is a possibility for ease of interaction between students and teachers, and
professionals and clients or customers, there would be a smoother flow of infor-
mation traffic and time to dedicate time for personal interest.
Scope of Project:
After a calculation, considering the Internet population and its accessibility, the
potential target audience for this project would come up to a rough estimate of
60% of the current Indian Internet users which is approximately 82 Million. These
statistics subject to change with further development in Internet technologies.

57
To create a module that graphically generates statis-
tical information in an interactive platform to a target
audience ranging from students to professionals.
Defining Target Audience:
Students and professionals falling under the age
group of 15-40
Defining the context: [Beta Stage of the website]
Restricted to India and its geography
Platforms:
Digital tablets and personal computers

59
Through the understanding of the project brief I
proceeded into ideating the user experience and
user interface of the website

60
Step 1Step 1
INTERACTION
MODE
UI INTERACTION
Info story on
Mouse Hover over icon
Info story on
India Finger Tapped on the icon
Choose
Info story on
States
Choose
Constant
Context
[Where]
Info story on
States
Finger Tapped on the icon
[Where]
Info story on
Districts
Info story on
Districts
Finger Tapped on the icon
Info Story
[What]
Info story
Topic/s of
Comparison
[What] Comparison
Finger Hold finger down
I initally started off by putting down the complete pro-
cess the user would be going through in the website
on an excel sheet. I also added the relevent interaction
that would take place when interacted on a tablet or
through a mouse cursor.
Page 01

61
REACTION UI DECISION INTERACTION REACTION
India’s political map’s borders
Choice between India
Mainland and India
Click on the option
India’s political map’s borders
gets highlighted
Mainland and India
whole Tap on the option
The state borders gets highlighted
with a stroke weight less than that
of the India Map
Choose state: Either
choose directly from
the Map or choose from
Click on the state and
click the tick to
conform
Chosen Map sits on side
of as the page slides
sidewards to reveal the
2nd decision maker inThe state borders gets
highlighted with a stroke weight
less than that of the India Map
choose directly from
the Map or choose from
the state list
Tap on the state and
tap on the tick to
conform
sidewards to reveal the
2nd decision maker in
Step 1. [The map is
displayed in the side, so
that user can see his
The District borders gets
less than that of the State border
Choose district: Choose
the state and then
choose district from the
Click on the state and
click on the district or
click from list
that user can see his
choice and change it later
on during Step 1]
The District borders gets
less than that of the State border
choose district from the
district list or from map
directly
Tap on the state and
tap on the district or
from list
Highlight/ Details on the topic
Choose from icons/ list
of topics
Click to choose The chosen topic sits on
side as the page slides to
section 3
Details on the topic
of topics
Tap to choose
section 3

62
Step 2Step 2
Info Space
[When]
Info story Time
based
Comparison
Mouse Hover over timeline
[When] Comparison
Finger Hold and move seek
Data Entry
Mouse Click the chosen map
Choose / Enter
Elements
Data Entry
Finger Tap the chosen map
Select Icons/
Mouse
Click the icon option in the
Hovering data entry box
Select Icons/
import Images
Finger
Tap the icon option in the
Hovering data entry box
Graphic
Alteration
Alter colour/
graphics /
Mouse Select by clicking/tapping
the Graphic tab on the
hovering data entry tool
Graphic
Alteration
graphics /
typeface Finger
the Graphic tab on the
hovering data entry tool
box
Page 02

63
Displays year above the horizontal
timeline. The months and days of
the year appear vertically/
perpendicular to the year.
Choose the period the
story is based in from a
timeline. Can choose
multiple points on the
click to choose Chosen time period
display on the side. The 3
decisions made become
constant.Move the seek over the timeline to
choose year.
multiple points on the
timeline. Tap to choose
decisions made become
constant.
The major places are highlighted
along with a complete list on the
side, which also contains a search
Select the necessary
locations. Once chosen
enter data by clicking
on the location pointed
in the map and enter
Click on data entry
point - this makes the
data hovering box
available to input data
- Enter Data
Instant preview of all the
chosen locations with the
enter details like
statistical numbers,
side, which also contains a search
filter.
on the location pointed
in the map and enter
data through the
hovering data entry
box.
Tap on data entry
point - this makes the
data hovering box
available to input data
- Enter Data
enter details like
statistical numbers,
location name, small
write up.
The data entry box displays a
select bunch of pictograms
appropriate to the content. [This is
Select the point of data
entry and input icon/
Click on data entry
point
Instant preview of all
appropriate to the content. [This is
filter through the keywords
present in the data entered earlier]
entry and input icon/
image through the
hovering tool box
Tap on data entry
point
Instant preview of all
actions
Displays bunch of choices filtered
through the content present
Choose the element on
the art board to be
altered and tweak in the
Click on data entry
point
The graphic related to the
chosen element is
highlighted and an instant
Displays bunch of choices filtered
through the content present
the art board to be
altered and tweak in the
hovering tool box
Tap on data entry
point
chosen element is
highlighted and an instant
preview is displayed

64
Step 3
Mouse
Output Details Print/ Digital
Mouse
Click/ Tap the print/ digital
option to reveal 3 options -Output Details Print/ Digital
Finger
option to reveal 3 options -
Small/ Medium/ Large
Finger
Small/ Medium/ Large
Credits Name / Photo Mouse/ Finger Click/ Tap to enter name
Output
Output of
generated
infographics
Click or tap output to
display output details
Page 03

65
The options details like
dimensions are displayed when
Choose from the
options from small,
Click
hovered over them
options from small,
medium, large Tap
The options details like
Choose from the
options from small,
Click A preview of the
generated info graphicsdimensions are displayed when
held
options from small,
medium, large Tap
A preview of the
generated info graphics
is ready in the requested
size along with the
is ready in the requested
size along with the
credits
Enters name in the typeface used
in the infographics or user can
upload his signature to be along
with the same
Choose to use profile
picture from user
account or take/ upload
a new photo
Click/Tap to use
existing/ upload/ take
a new photo
credits
Enters Output page which
contains the finished Infographics
with the options of output
Choose to submit in the
infographic community/
post in social
networking sites /
Export for personal use
Prompts dialogue box
to enter a gist about
the infographics before
submitting/ posting
Submit/ Post/ Export
Once the basic sketch of the website was done, I got
an idea of what will the rough number of steps and fea-
tures in the site and how the user might interact with it.

66
After the creation of the logic for the sight, I moved on
to improvising and simplifying the flow through brain
storming and ideating.

67
For this, I created a chart containg the logic of the site, and
started adding, and subtracting steps, rethinking the inter-
action, and giving more options for the various interactions

69
Through the understanding of my research and the theory of Constant
Context, I was able to narrow down the key parameters an infograph-
ics is based on.
Context 1: ‘Where’
For the beta stage of the project, I restricted the where of the infor-
mation to India and its geography as a constant context. My intension
behind limiting to such a topic was due to lack of informational graph-
ics on the same.
Context 2: ‘When’
The when of the information made a variable, to be entered by the
user. At the same time, the when of the project was categorized into
Uni-dimensional time and Multi-Dimensional time. Uni-dimensional
being an event taken place within a specific point of time, whereas
Multi-dimensional is an event spanning over a period of time.
Context 3: ‘What’
The what of the information was also made a variable, in such a way
that this information is entered within the above two parameters.

71
The constant context theory
By Mr. Vikram Sood
Information is the relation between dynamic val-
ues, presented to construct a context through
establishing co-relation. Context can have dimen-
sions of space and time, and for an automated
visual information system its essential to lock
either space or time. This ‘constant context’ ap-
proach simplifies the visual narrative, and enhanc-
es adoption by the non-design community.

72
CONCEPT
EXPLORATION
WIREFRAME
SKETCHES

78
Sketch 1
Sketch 4 Sketch 5
Sketch 2

79
1
Choose infographic output: For the initial concept, I had the
idea of making an interface which would aid the user in, creat-
ing an infographic in all three domains, such as, Static, Inter-
active and Motion.
2
Choose method of execution: When one of the above op-
tions chosen, the user gets to choose where to automate the
generation of graphics or work on it with a ‘Design It Yourself’
interface.
3
Choose story flow: To narrow down the search to the specific
graphics language appropriate for the user, he/she has to
first choose the desired story flow of the information at hand.
By story flow, I mean to if the information is a linear narration or a
comparison or, timeline based, etc.
4
Choose layout: To further narrow down the search, the user
has to choose a visual display style from a set of possible
layouts predefined by the program.
5
Choose location: To choose the location, the user has the
option to either choose directly from the India map or enter
the name of the same.
6
Choose location: In accordance with the last choice, the map
is displayed on the right, with the maginified version of the
chosen location on the left.Sketch 6
Sketch 3

80
Sketch 1
Sketch 4 Sketch 5
Sketch 2

81
Sketch 6
Sketch 3
1
Data entry: Using the criteria defined by the user, the related
infographic templete appears along side a hovering data entry
interface. This interface helps in displaying an simultaneous
preview of the changes
2
Publish or export: Once the Information is feeded into the
infographic, the user will have a variety options to share his/
her work on their socail networking sites along with the option
of downloadin the same to their device.
3
Choose location: The thought moved on to a concept where
initial selection of the location, helps define the context for the
following steps in the website. The map displayed contains
three layers: country, state and district.
4
Choose location (Country): By the act of hovering or select-
ing the reveals the country map, as the partions swipe accros
the screen to the right hand side, where the state and district
options are present.
5
Choose location (State): The essence of the interaction
remains the same, with the selection of the state layer, along
side the list of the states in the country which are partioned in
the map as well.
6
Choose location (District): Again the selection of the district
map remains the same, with the list of districts. This option
slides out from the side of the screen.

82
Sketch 1
Sketch 4 Sketch 5
Sketch 2

83
Sketch 6
Sketch 3
1
Layout variation: I changed the orientation to know how the
user experience of the interface would be. Comparitively this
has more of a mysterious attribute compared to the earlier
welcoming curtain opener.
2
Layout variation: Selection through the visual representation
of a pictogram depicting country, state and district.
3
Layout variation: Here, I intended to loose the map, and
instead try using direct selection of the region under the spe-
cific boundries
4
Layout variation: Exploring the usability, where a vertical list
is replaced by a horizontal one to see if the left to right read-
ing would improve usability of the product. It make logical
sense to keep it vertical, so that the user can easily narrow down to
the his/her search by following the aphebatical order in the vertical
list.
5
Choose layout: A list of topics to choose from. A bunch of
topics which will help in narrowing down to the appropriate
graphical closeness to the infographic to be generated.
6
Enter data: An excel sheet to input the users data, else up-
load an excel sheet made by the user.

86
Sketch 1
Sketch 4 Sketch 5
Sketch 2

87
Sketch 6
Sketch 3
1
Choose type of output: Taking forward one of the concepts
from the wireframe explorations, I decided to drop the option
for creating infographic video to reduce the complexity of the
website for Beta stage. Hence, here the user has to decide be-
tween creating a static or an interactive infographic.
2
Choose flow of information: Here the user will be deciding
how his/her information in the infographic is going to be de-
picted. As compared to the earlier concept, I have combined
two decision maker into one (Information flow and Layout). This is
done because the type information presentation will determine the
sort of content it holds. Hence the chose here would be betweeen
linear, concentric, parallel, etc.
3
Advanced option: When the advanced option is selected in
the last step, it helps the user in determining the size as well
as the help the data base narrow down on the template to be
used for the final output.
4
Custom option: The custom option in the last step helps the
user to define their own dimensions of the layout.
5
Interaction space: Using the relevent user choice, a related
graphic image is presented to an interaction space. The user
interface is as spacious as possible, so that the infographic to
be worked on will have maximum space to interact. The icon in the
bottom left corner acts as the cental interaction key.
6
List of options: When the icon is clicked once, a small list of
options pop up. This list consists of options for graphic icons
like pictograms, images, typefaces, interaction elements,etc.

88
Sketch 1
Sketch 4 Sketch 5
Sketch 2

89
Sketch 6
Sketch 3
1
List of sub-options: Under the selected topic from the last
step, the user gets a set of elements that he/she can use
in the generated infographic. As the interface is created to
work on a tablet as well as a personal computer, the icons are big
enough to be dragged and dropped from the interface into the
infographic. A click back on the icons button displays the main list
again, to choose a different topic.
2
Content edit: With all the elements from the last step placed
into the infograph, the contents of the infographic can be en-
tered and edited using a hovering input interface, which gives
a simultaneous preview of the entered content. This interface can
be minimized to to get an visually unhindered preview. In the same
interface the user has the oprtions to publish or export the created
infograph.
3
Account access: The user can access his/her account by
hovering over or clicking the logo. This menu contains op-
tions like home page, account acces, logout and your library
of work.
4
Navigation options: There is an interactive arrow which pops
up a small interface containing options to navigate around in
the infographic template.
5
Auto hide option: I had the option to auto hide the navigation
panel to present a clean space for the creation of the info-
graph.
6
Alternative option: To keep it easily accessible on a tablet I
made an option constantly available on the main screen.

92
Sketch 1
Sketch 4 Sketch 5
Sketch 2

93
Sketch 6
Sketch 3
1
Choose context: The is the initial page of the interaction of the
website. Here the use has the option to choose either India/
State/District.
2
Chosen context - National: When the user chooses the nation-
al map, the line divide speeds of to the side. with the proceed
button available to move on to the next step.
3
Chosen context - State: When the user chooses the state op-
tion, the interaction opens up with the national option on the
left and the district on the right. At the same time, a list of the
all the states appear on the right. It is also possible for the user to
choose the desired state directly form the map.
4
Chosen context - District through state: When the user choos-
es the district option, he/she is asked to choose a state, so
as to choose the desired district.
5
Chosen context - District: Here the interaction remains the
similar to the interaction during selection of state.
6
Choose content topic: With the context of where the informa-
tion is going to take place is determined, the user will have
to choose the topic of content in hand. During this, on the top
right corner, the chosen location is displayed beside the logo, just
in case the user decides to change it, during the course of making
the infograph.

94
Sketch 1
Sketch 4 Sketch 5
Sketch 2

95
1
Visual variation: As a graphic variation I explored the visual
capability of presenting the set of topics in a tessellating pat-
tern. The chosen topic is displayed in the top left corner of the
web interface.
2
Data entry: The content to be graphically converted is entered
through an excel sheet, which contains basic interaction and
editing capabilities. The navigation arrows help move about
the length and breadth of the excel sheet.
3
Content edit: Here, the requested infograph is created using
the parameters specified by the user. Once generated, minor
editing and exporting can be made in this page. under the
content edit page, the data to be edited, is selectyed by simply clik-
ing on the same. This in turn appears in the content edit dialog box.
In this the percentage, content and pictograms can be easily edited
with an spontaneous preview.
4
Graphic edit: Under this option the user has the option to edit
, the typeface and colour especially. There are very limited
choices within these parameters just to keep the interaction
simple and reduce the possibilities of a wrong mix and match. The
intension of the site is that whatever infographic is outputed from
the site should potray a rich visual aethetic.
5
Graphic edit (colour): To individually change the colours of
the infographic, an additional option was added. The change a
specific element of the infographic, one simply has to choose
the element, which appears next to the limited colour range op-
tions, which hold the selected part of the infographic.
6
Credits: The user has the options to enter his/her name and
photo and proceed to final output of the infograph.
Sketch 6
Sketch 3

96
Sketch 1
Sketch 4 Sketch 5
Sketch 2

97
1
Output: There are basically two options, Publish and export.
The user is free to use any one or both the options,
2
Publish: Under publish, one would find, major social network-
ing sites.
3
Publish (Post): Any of the options give you an option give the
infograph a space to describe it before posting/publishing.
4
Conformation: A tick mark conforms that the information has
posted
5
Export: Under this there are baic two options, Small and
Large. The small is majorly for digital and large is majorly for
print.
6
Conformation: A tick mark conforms that the information has
been exported.
Sketch 6
Sketch 3

99
VISUAL LANGUAGE
EXPLORATION

107
VISUAL LANGUAGE
ICONS/PICTOGRAMS/MAP

110
MAP
India States
For the creation of the website, there was a
necessity to vectorize the maps of India, Its
states, and its districts.

112
DESIGN
LOGIC
CONCEPT
EXPLORATION

113
User Experience logistics:
Efficiency+Optimized+Automated
User Interface logistics:
Intuitive+Responsive+Empathy

115
VISUAL IDENTITY FOR THE WEBSITE

116
PRODUCT NAME OPTIONS
Name fo the product was not a necessity.
But , so as to make the product sound
complete I thought of list of options for the
name of the website/product.
- Steps
- Squares
- Rhombus
- Graphic Communication
- Commgraph
- Gracom
- Map Communcation
- Macomm
- Statistics
- seeing is believing
- see.believe
- see to believe
- believing in seeing
- No doubts
- convince
- Nothing more, nothing less
- no more, no less
- eye, vision, sight, visible,
- Visual Aid, Show and Tell,
show to tell
- Picture This, capture this
- Picturesque
- Quintessential
- Iconography
- Photogenic - Pictogenic - ico-
nogenic
- OK - as it is said when one
understands something
- Got it!
- Pictomap
- Imagine this - Image This -
Imag in me - imageinme
- Show this
- Know this
- See this
- C / Cee / I see / IC / Eyec /
EyeSee
- Pictography - Means writing
pictures - Infography
- Shape me
- Picturize
- Oh! / hmmm! / OK!
- Got it!
- PIcture telling!
- kahani/ katha/ kathai/
- data picture
- Picture convertor

117
CHOSEN OPTIONS
CHOSEN:
PICTOGENIC PICTURE THIS! PICTURESQUE
PictureThis!
Option 1: Option 2: Option 3:

118
Option 1 Option 2 Option 3
IDENTITY OPTIONS
The identity for the website was not a part
of the brief. It was purely done though
self initiation. Hence it has a tendency to
change through iteration.

121
FINAL IDENTITY
This identity was arrived by deriving the
core elements of the website. The rhombus
signifies an abstraction of India, as the gen-
esis of the product is in India. The shape
was inspired from the golden quadilaterals
of India. The three strips represent the logic
of the website. As in any given problem to
be solved has three parts to it: The prob-
lem, the process and the solution. Hence
the gradation of colour is to represnet the
filterated solution. The block around, is to
add solidity and also to compliment the
name of the site which is ‘Picture This!”

123
WEBSITE WITH VISUAL LANGUAGE

125
The overall layout is majorly divided into
two halves:
Data Input
Preview

127
Logo - Acts as access to account details
once logged in
Login - For old users
Sign up - For new users
Introduction video - When interacted with
the play button, the play symbol engulfs
the screen to start the introduction video,
explaining the complete know-how of the
website. When signing up, the introduction
video is programmed to play first before
proceeding into further steps.
Close - To exit the intro video
UI - When interacted with, the ‘+’ sign
rotates cock-wise for with high speed and
comes to a halt in slow motion.

129
Logo - Acts as access to account details
once logged in
Login - For old users
Sign up - For new users
Introduction video - When interacted with
the play button, the play symbol engulfs
the screen to start the introduction video,
explaining the complete know-how of the
website. When signing up, the introduction
video is programmed to play first before
proceeding into further steps.
Close - To exit the intro video
UI - When interacted with, the ‘+’ sign
rotates cock-wise for with high speed and
comes to a halt in slow motion.

131
The tick mark is used to confirm entry
Username and password registered by the
user is required to login. When accessed,
‘username’/’password’ is replaced with
a blinking cursor to indicate entry. The
visual language is maintained in a way that
rounded rectangles suggest data selection,
while rectangular strips suggest data entry.

133
The user can choose to register either by
Entering details as mentioned here or,
Connect using their Facebook or twitter
account. This options are limited for the
preliminary stage

135
Under the ‘My Visual Identity’ menu, the
user has the choice to either take a photo
using his/her webcam, or upload a photo
from their device, or choose one from the
set of visual graphics.

137
Under the choice of Take One, the user can
take a photo using his/her webcam.
The photo that is taken will be instantly
placed within the logo frame. This is to
signify the users personal account, when
logged in.

139
Under the choice of Upload One, the user
can upload his/her photo from their device
Here again, the photo that is taken will be
instantly placed within the logo frame. This
is to signify the users personal account,
when logged in.

141
Under the choice of Choose One, the user
can can choose from the library of graphic
options. This option was given as some us-
ers prefer not to use their photo.
Here again, the chosen graphic gets dis-
played instantly in the logo frame. This is to
signify the users personal account, when
logged in.

143
This is first page one lands on, once logged
into the site.
One can select the region from these, else
directly choose from the map
The three partitions on the map contain
India /states/ districts which also be used
for selecting by the user.

145
Interaction:
When curser hovers over the India/State/
District strip the interaction reveals the cor-
responding boundary map

147
The search bar helps filter the specific
searches
When the state map is chosen, the com-
plete list of 28 states appear in the input
column. Four sets of 7 states are displayed
at a time, with arrows to navigate up and
down. Can also be swiped for Digital tab-
lets.
One can choose multiple states.
When a state is chosen the ‘+’ sign turn to
form a ‘x’ This is incase the user chose to
deselect any state
The selected states simulaneously get
highlighted on the map.
Click next to proceed.

149
When district is chosen in the first step,
there is a prompt to choose state, then
proceed to choose the districts.

151
Once the state is chosen, the chosen state
zooms into preview. Rest of the interaction
remains the same as in the state selection
page.
The districts can also be selected directly
from the map.

153
Once the ‘Where’ is selected, ie the map;
then the what as in the topic has to be
selected.
For the Beta stage of the project there are
majorly 5 topics:
Economy
Industry
Politics
Nature
Culture

155
When the number of topics increase; a
search bar and navigation keys will be
added in the later stage of the product.

157
After What, when is to be chosen.
Time here is separated into two param-
eters: Uni-dimensional and Multi-Dimen-
sional.

159
In Uni dimensional: the time is defined as a
single constant, under which contexts get
defined.
Here is an example.

161
In Multi dimensional the duration of the
course of event is stretched over a period
of time.
Here is an example.

163
Once time is selected, the according data is
to be entered. On the left of the excel sheet,
the chosen regions will be automatically
displayed in alphebetical order.
There is also an option to upload the users
excel sheet, except the parameters should
be entered in the same as the x and y axis
entries

165
The icon on the top right is used as for easy
navigation around the excel sheet. It works
just like a joystick. This can either be used
with the mouse on a PC or with a finger on
a digital tablet.
The extra space has been given in the bot-
tom of the excel sheet so that the virtual
keyboard of the digital tablets does not
hinder users from entering data towards the
ends of the excel sheet

167
Once the data is entered, the user is
prompted to choose what type of layout
would be apt for the users purpose
The two choices being one where the
regions are laid out separately next to each
other
The other is clusters together as in the
Indian map

169
After this the data is generated by the pro-
cess of Object Recognition, where the data
is placed on apt presets of infographics
After the generation the users are free to
tweak the infographic’s content or graphics
They later can add their name and other
details also
Or skip directly to the output to export their
infographic

171
When the user selects the content edit, the
earlier excel sheet with his/her data comes
up. Here the user can make changes, after
which the infographics will be generated
again. Due to this reason, the earlier con-
cept of simultaneous preview is not pos-
sible.

173
When the user selects the Graphic Edit op-
tion, the user can edit, the overall typeface,
colour and pictograms
Typeface: The display of the typeface is
shown as Typeface 01, since the user does
know many typeface by name. The idea was
that the typeface name shouldnt not cre-
ate a bias on the users choice, but rather
choose by the visual appeal of the type. The
type’s number is also shown as that would
also help the user choose the type by num-
ber display.
Colour: The colours are displayed in sets of
five, so the visual intergrity of the infograph-
ic remains intact.
Pictograms: A set of five variations of picto-
grams are accessible by the user.

175
Advanced option was created for users who
intend on changing the colours individually.
Due to complexity of coding the concept
was dropped for the Beta Stage.
Option 1
Here is the first option, where an alternate
preview of the objects being chosen are
displayed on the top right of the page. With
the aim to give instant preview, the IG is
displayed in black with the selected objects
in white. The colour of the selected objects
can be changed using the colour wheel.
Also an option of undo and redo is given to
check the difference constantly.

177
Option 2
The option of show outline/ hide outline
helps in selecting the colours and preview-
ing them

179
Here the user will be able to enter their
additional information that has to be on the
infograph such as name, annotations and
sources

181
There is a world limit meter which counts
down as the users types in.
The scroll bars is visible only after the con-
tents exceed the given space.
The entered data is displayed in the bottom
of the infographics instantly

183
Options to put it up on social networking
sites, etc and/or export to their device

187
Visual language of the data entered in for
the social networking sites.

189
Embed in blog
To embed data in blog the user can copy
Url from the site

191
E-mail
With their account id already registered,
they can directly send mails to their desired
ones

193
Export is split into to categories. One for
Web applications like behance or for mobile
applications like tablets, laptop, desktop
,etc. The other being print in standard paper
size
In this version the standard output fits A3.
As the user can fit to page when printing in
their desired size

User account
This option is accessed by clicking on the
logo
195

My Account
Change account details
Delete Account
Option to delete if necessary
197

199
When the delete account is accessed by the
user, the rest of the options on top go grey.

201
If the My Account option is accesed directly
then the delete option disappears; because
if the account is directly accesed the user,
thta means he has no intension to delete
their account.
Interaction prompts and messages.

Process followed during the change of
password.
203

The option to change the visual identity if
the user intends to.
205

Infographics created by the user is stored
in their library.
These options are displayed when the
cursor hovers over the the block or when
selected.
207

When the view option is selected in earlier
page the selected block presents itself in
full screen
The navigation arrows help in moving
through rest of the infographics the user
has created
Else if the user chooses to, delete one this
would be the interaction that comes up
209

211
To give a better understanding of the website, I cre-
ated a simple task and the process of how the task
takes place in the website. The given information
was about the quantity of milk sold in various states,
such as Gujarat, Madhya Pradesh, Maharastra and
tamil Nadu. The following pages explain how this in-
fomation is converted into an infographics using the
website.
211

212
STEP 1:
After logging in the user enters the homepage.
In the homepage the user chooses State for the specific task at hand.

STEP 1:
He/she enters the following page with the states in alphabetical order.
213

214
STEP 1:
The user first chooses Gujarat.

STEP 1:
Then moves down and chooses Madhya Pradesh.
215

216
STEP 1:
Followed by Maharastra.

STEP 1:
And finally Tamil Nadu.
217

218
STEP 2:
After selecting the states, the user chooses the necessary topic.
Here it being Industry.

STEP 3:
Then he/she chooses the context of time.
Here it being Multi-dimensional.
219

220
STEP 3:
The relevent data is entered accordingly.

STEP 1:
And the equivalent Infographics is displayed.
221

222
In case the infographics is for only one state the information is
displaed in this format

After the output is generated the user can fiddle around with the typeface, colour
or/and pictograms before taking an personal output. The user also adds their de-
tails in the bottom by accessing the Credits option.
223

225
User testing was done with a bunch of people rang-
ing from MBAs students to design students. Since
there execution of the website into a working model
would take about 3 to 4 months, I decided to test
the product by making the site on power point. I had
used hyperlinks to connect the pages and gave the
users a specific task to execute, while I observed. At
times I had to guide them due to the lack of an intro-
duction video at present.
225

226
User name: Arun S
Education: MBA 2nd
year
Human Resource
User name: Kalyan E K
Education: MBA 2nd
year
Finance
User name: Saumitra
Deshmukh
Education: Design 1st
year
UG Foundation
Had confusion in sign up page.
Struggled to find out how to
take a photo since the copy
was not comprehendible.
Had trouble in the beginning of
the site. Had to guide him and
explain.
Had trouble the first time
around. But was very efficient
on the second run.
- Upload one and take one
sound the same
- Likes the ball tracking option
- Requested to let him know
when the webite is up and run-
ning as he was eager to see
the actual and make use of it.
- Words used in the copy were
a little complex. Preferred a lit-
tle less jargons.
- Felt the interaction was very
simple
- Says the logo could have
been smaller as it appear to be
quite disturbing.
USER’S EXPERIENCEUSER DETAILS FEEDBACK
226

227
User name: Sreya Padmasola
Education: Design 2nd
year
Industrial Design
User name: Aswini Hiremath
Education: Design 2nd
year
Industrial Design
User name: Arjun Madaya
Education: Design 3rd
year
Industrial Design
Had to constantly explain how
the site works.
Had to constantly explain how
the site works.
Felt there was no problem in
navigation. Says the introduc-
tion video will help tremen-
dously. Feels he would not
need more than a minute by
himself to figure of the web-
site.
Felt in the real site, she would
not have a problem as there
will be an introduction video.
But otherwise she says the
interaction was quite under-
standable after her first run.
Felt the need for the introduc-
tion video to avoid confusion.
Says he might like it if there
was customizability to change
the colour of the website.
227

228
User name: Rishab Doshi
Education: Design 3rd
year
Industrial Design
User name: Vishnu Vijithatma
Education: Design 4th
year
Industrial Design
User name: Juhi Vishnani
Education: Design 4th
year
Comm. Design
User name: Suruti Vengatesh
Education: Design 4+1th
year
Comm. Design
Instantly got the hang of the
website.
Needed quite a bit of clarity in
the beginning. But eventually
got the hang of it.
Was pretty impressed with the
animations. Had a lack of clar-
ity in the beginning but got the
hang of it later on.
Had questions in the begin-
ning, but caught up fast later
on.
-Needs more clarity that the
logo should be clicked to enter
the user’s account
- Not clear about the export for
print option
Did not know which was the
home page. Say a back arrow
would be better a tick icon in
the accounts page.
Liked the Graphic edit page
a lot. Says the intro video will
help in geting a better under-
standing of the site.
Had trouble selecting time. Felt
the information bar was also a
button
228

229
From the overall understanding of the user test-
ing, there was a few common feedbacks. One
of them was that the website should not give a
problem in navigation one the user goes through
the introduction video, which runs a a complete
tutorial within a minute. The other thing that I
noticed was the a few users had a problem in
selcting the tick icon in the sign up page. But
once they got to know that it was the conforma-
tion button, they had no problem in any other
page. Many had troulble in selecting the time.
They could not understand the complex copy.
But once the example pops down, they got a fair
idea of what they are to select.
MY ANALYSIS OF THE USER TESTING
229

231
During the start of the project, I was quite clueless of what the end
result of the project would be. Yet, I delved into the project with a con-
fidence that my work process will churn the best out of the brief.
Initially, I started out with a few tentative idea of the final design.
Later, I got lost into research, collecting extensive statistical data on
the current world internet population, India’s contribution in its num-
bers; cartography, types of maps, reasoning its lack of visual appeal;
various kinds of infographics, its evolution, current design language,
deducing the common process of making one; user’s visual literacy,
their visual perception; their difficulties in grasping numbers and so
on. Eventually, I managed to streamline my findings and thoughts to
understand the world scenario of information obesity, what is driving
this need and how to cater to it.
Ultimately, I was able to derive the core essence of the final product
and execute the same.
The final design I have formulated is just the beginning of a larger
picture, which will definitely be going through a lot more iteration and
exploration through user testing.
231

233
I would first like to thank my dear sister, Vishnu Priya for her constant
support through this period, without ehich this might have been pos-
sible. Mr. C. Mohan for his constant guidance throughtout the project.
I would like to thank Mr. Vikram Sood for believing in me and giving
me this opportunity to do this project. I would have to definitely thank
my office boy, Mitesh, without whose food I would not have been able
to survive in Mumbai. My friends and colleagues Sreekumar, Prajakta
in And Then for for all their care. Also Ujjwwal, Corrina. And ofcourse
Mr. Nitin, my friend and colleague who was always available to lend an
helping hand during the project. I would also like to thank Akhil Mistry
and his family, Nikhil Dayanand, Shiva Nalleperumal, Bharat Perla,
Vishnu Vijithatma, and Arjun Vishwa, For their constant support and
guidance. Last bust not the least I have to thank my mon and dad for
being supportive and all the other members of the DJAD family.
233

234
D J ACADEMY OF DESIGN 2013

Picture This © data visualisation platform by And Then

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

Similar to Picture This © data visualisation platform by And Then

Similar to Picture This © data visualisation platform by And Then (20)

More from vikram sood

More from vikram sood (20)

Recently uploaded

Recently uploaded (20)

Picture This © data visualisation platform by And Then