Design Portfolio

My View:
“When you take technology and mix it with art, you

Interacti
always come up with something innovative.”

gy
ate
Us

ity

Str
er E

on Desig

Usabil

n
sig
xpe

n
Ph

ig
De

D
User Inte

rie

es
ot

UC

D
n
og
rfac

nce

X
ra

U
e

ph

I.
n

U
o

y
v ati
o

De s
nn

i gn
I

ign
s
deas

e
tI
Produc

a n d D
Pro
d
dev uct

o n
elop
User Interface Design

i
men

t
Pai t

a
PGDPD - National Institute of Design ntin
gs

ci
un
An
im
m ati
Visual communication and Design Com on

Er
go
BFA - College of Fine Arts Vi su al

nom
ics
Mobile :09381812461
eMail :spratap_raj9@yahoo.com S.Prathap Raj
Consider the Users
prathap_r@nid.edu
finenidian@gmail.com
User Interface Design
Diploma Project at IITM( Indian Institute of Technology)
About the Project:
This GIS project is done under the guid-
ance of the leading
Prof.Ashok Jhunjhunwala,
Electrical Engineering Dept, IIT Madras

The goal is be to suggest methods and tech-

nologies for enhancement of local capaci-
ties for eventual micro watershed manage-
ment and planning.

At IITM had given me the responsibility to

redesign the whole Product of UI with user An existing UI Design
friendly - web based GIS application Design Methodology

I had redesign the whole product with user 1.Gathering Information

-Requirement study 2.Analysis
friendly, and proposed different way of -Understanding user and tasks -Task analysis
-Define use cases
data visualization . -Understanding user environ-
-Define task scenario
ment
The important of this success of this UI -Develop story board
design which can be interact by all stage
of age groups. This product basically for
watershed management people who have 4.Detailed design
3.Conceptual Design
minimum education level. High fidelity prototype
Hi,Vysakhi Sign Out In Progress Help
Do you want know
What is happening now?

Low fidelity prototypes

Click here what is New?

Distance Tools Navigate Measure Line Measure Polygon Measure Circle

Search this Place Map Satellite Hybrid

Basic Layer

Over Layer
-Prototype for screen design Interac-
-Define views and operations
District Hospital

tion components and help system

Village Church Cuddalore

Resources Fire service

Kancheepuram
Query Map

Responsibilities
Elangadu Agaram

based on usage patterns, type of

Upload Watershed

-Visual design of graphical screens and

Search Petrol bunk Thiruvallur

Police Station Airport

object and view content Feedback & Iteration views

Usability study of existing assets -Alternate for organization of -UI specification documents and inter-
functionality and navigation active demos using Flash or HTML for
Flows and Navigation Maps communicating design details
paradigms
User Scenarios
Persona
Site Maps and Content analysis 5.Develop
Wireframes -Develop visual resources like icon, 6.Usability Testing
splash screens, installation graphic -Real Users
Prototypes etc. -Real Scenarios
Written specifications -followed standard develop for:
Graphic mockups -Desktop application
-Web based user interface
Information architecture, -Accessibility compliance
Visual designs,
Usability testing
 Hi,Vysakhi Sign Out In Progress Help Hi,Vysakhi Sign Out In Progress Help
Do you want know Do you want know
What is happening now? What is happening now?
Click here what is New? Click here what is New?

Distance Tools Navigate Measure Line Measure Polygon Measure Circle

Search this Place Map Satellite Hybrid Distance Tools Navigate Measure Line Measure Polygon Measure Circle
Search this Place Map Satellite Hybrid

Basic Layer Basic Layer

Over Layer Over Layer

District District
Village Cuddalore Village Cuddalore

Resources Resources
Kancheepuram
Query Map Kancheepuram Query Map
Elangadu Agaram Elangadu Agaram
Upload Upload

Search Search
Thiruvallur Thiruvallur

Home page UI Design Map Navigation UI Design

Hi,Vysakhi Sign Out In Progress Help Hi,Vysakhi Sign Out In Progress Help
Do you want know Do you want know
What is happening now? What is happening now?
Click here what is New? Click here what is New?

Distance Tools Navigate Measure Line Measure Polygon Measure Circle

Search this Place Map Satellite Hybrid Distance Tools Navigate Measure Line Measure Polygon Measure Circle
Search this Place Map Satellite Hybrid

Basic Layer Basic Layer

Over Layer Over Layer
District Hospital
District
Village Church Cuddalore Village Cuddalore
Resources Fire service Resources
Kancheepuram Kancheepuram
Query Map Query Map
Elangadu Agaram Elangadu Agaram
Upload Watershed Watershed Close x
Upload Spatial data Non-Spatial data
Watershed
Search Search
Petrol bunk Thiruvallur Thiruvallur
Police Station Airport

Search Go View Full screen

Menu interaction Design Spatial & Non Spatial dat a navigation

 Usability Testing followed by Web usability principles

Hospital

Church Cuddalore

Fire service

Kancheepuram
Elangadu Agaram
Watershed

Petrol bunk Thiruvallur

Police Station Airport

at IITM I had been proposed a different way of interaction design mapping

the information ,its very easy to control ,and finish their task,

An Existing of data visualization design, which is very An analysis of an other products of data visualization, still
complicated to user to finish their task... user not feel user friendly ,so I triggered my brain to bring
very user friendly UI design which can be use by all age
groups
User Interface Design
Classroom Project
I feel very comfortable to
About the Project: find the place. i could easily
The project involves to proposed a new interact with this map and
4 Km
finding the place where we
way of User interface , interaction design Spencer Plaza
want to go , its awesome...
on Road Map application on Mobile plat-
form.

1 Km
Anand Theater
You Here ! Find:
Car parking
Thousand Light Petrol bunk -4 Km Set voice Guide
Hospital Show the Route

Design Methodology: Bank

Hotel
Research, Brain storming, Creative De- School

sign Proposed, Paper prototype, Usability

Testing, UI Design development, Usabili- Story Telling
ty Testing, Technology Feasibility, Imple-
mentation.

Responsibilities:
4 Km
Spencer Plaza

Interaction , New way of Interactive De- 1 Km

sign proposed, Story telling for product,

Anand Theater Find:
You Here ! Car parking
Thousand Light Petrol bunk
Hospital
Bank
Hotel 4 Km

Graphics, Icons.
School Spencer Plaza

1 Km
Anand Theater
You Here ! Find:
Car parking
Thousand Light Petrol bunk -4 Km Set voice Guide
Hospital Show the Route
Bank
Hotel
School

Scenario & Personas

Traffic place at Chennai India

Proposed data visualization Normal data visualization UI
UI
Instructional Design
e-Learning Module
Classroom Project

About the Project:

This was an instructional design project.
Robert Gagnes principles are used in de-
signing its content and the presentation.
The design was to provide interest to chil-
dren to find information about the climate,
food, people, culture of India. The content
and visualization was researched from
various story telling books and the topic
was “Narrative style of data visualization”

The Dick and Carey Systems Approach

Model[20] . The model was originally pub-
lished in 1978 by Walter Dick and Lou Car-
ey in their book entitled The Systematic
Design of Instruction.

Responsibilities:
As a UI designer, had the responsibility of Home Page
User interface design, Logo design, infor-
mation architecture ,Icon Design, 2D Ani-
mation, content development and imple-
mentation.

Sign up page
User Experience Design
Web based UI application
Classroom Project
Hi !
I need career guidance,
Statement of Purpose I need to interact with others schools teachers
User-centered design project involves & students
bringing new application design ideas and I need Economic Help
simplifying the structure of tasks, making I need to know what is
things visible, getting the mapping right, happening in the Global
I want to know about Internet
exploiting the powers of constraint, de-
signing for error and designing for users. What is the way ?

Design Methodology
Research, Brain storming, contextual
enquiry, information architecture, wire
frame, prototype, usability testing, Design
implementation

Responsibilities:
Visual design
Interface design
Navigation design
Information design Planning, IA analysis Wireframe Development
Interaction design
Information architecture Design Home welcomeraj SearchFriend LogOut

Functional specification
‘‡Ǧ› ”‹‡†•Ȁ‡ƒ…Š‡”•

’Š‘–‘
”‹‡†• Ž‹‡ȋͷȌ ‡ƒ…Š‡”• Ž‹‡ȋͳͳȌ
Ž‘… ‡‘˜‡
Google

Content requirements ›ƒ‹”›

‡ƒ”…Š

User needs
”‹‡†Ž‹•–

‡ƒ…Š‡”•

Site objective
ƒ”‡–•

‡••ƒ‰‡•

Concept visualization.
›‘—‹–‹‡• ƒ‘Œ•–—̷ ƒ‘Œ•–—̷ ƒ‘Œ•–—̷

Š‹ǡ‹Šƒ˜‡“—‡•–‹‘’ƒ’‡” •…Š‘‘Ž‡–Ǥ…‘ Š‹ǡ‹Šƒ˜‡“—‡•–‹‘’ƒ’‡” •…Š‘‘Ž‡–Ǥ…‘ Š‹ǡ‹Šƒ˜‡“—‡•–‹‘’ƒ’‡” •…Š‘‘Ž‡–Ǥ…‘

‡––‹‰•
‹•‹–ǫ ‹•‹–ǫ ‹•‹–ǫ

Personas Advertisement

ƒ„‘—–•…Š‘‘Ž‡–™‘” ƒˆ‡–›…‡–‡” ”‹˜ƒ…› ‡”•

Introducing New Design Service
On i-phone mobile New Design of Contacts Ui Interaction Design
Classroom Project

Statement of Purpose
The project aim to find and propose a
new design service on any mobile phone,
I have chosen i- Phone and narrow down
to the contacts Category ,
Through the design methodology I have
found a easy way to save the contacts and
search the contacts
10.10 AM Personas:
My name John 34 years old. I have been doing business.
I have more than 400 Contacts on my mobile,
when I wanted to call my friends or relations ,I am reading the names
and i recall the relationship, some times many of my friends and rela-
tions also have a same name, by mistakenly i called up them and i get
irritating while searching the person to whom i want to talk urgently, i
always search the name and select the person and then i view the details,
then I call them. I feel its wasting my time and putting me in tension.

Design solution:
This way of saving Contact is awesome, I can immediately call, to
whom I like to speak. Its very easy to search, and know about the details
of the specific person..

Best Friends Relations Colleagues Professional

10.10 AM 10.10 AM 10.10 AM

All Contacts Best Friends List Best Friend details Cancel

Ashik Ashik
Name : Fobia
Abhinaya Fobia Details

Chevlosan George : 93818

Deepak Heman
Elan
: Web developer at xxxx

Fobia :162 sunshine apartment,

Fiksama Bangalore
George
Heman Birthday :18/06/1984
Imairaj
Email ID :fobia@gmail.com
Imekabu
Jack Other events :
James
Edit

Best Friends Relations Colleagues Professional Best Friends Relations Colleagues Professional Best Friends Relations Colleagues Professional
Info-graphic Visualization Design
Classroom Project

Statement of Purpose
The project is focused on to redesign the
information graphics on newspaper.
Since the day there are so many newspa-
per play with visuals and graphic to con-
vey the information but still there is lack
of info-graphic visualization in newspaper
specially if it meant to children.
It was an attempt to redesign the existing
info-graphic as in very easy to understand
by children. Indeed i have narrow down
to chosen the topic, which is bomb blast User Needs Story Telling & Scenario
awareness for children and made the
Hundred of Info-Graphics and taken into
user testing. The success was all the info
graphic are effectively communicating the
information to my users.

Design Methodology
Research, Brain storming, contextual Info-Graphics Visualization
enquiry, information architecture, wire
frame, prototype, usability testing, Design HOSPITAL
TERROIRST FOCUS ABANDON THINGS
be aware of abandoned things.
Bomb Squad diffuse the RDX bomb

implementation
those may contain deadly material
so its our duty to inform police

RDX Police
Public Our Duty Public
10 2
terrorist always focus on TERRORIST 9 3
hospital,hotels and markets. 5
information has
8
6
sent to police

RELIGION PLACE
India DEADLY MATERIAL very dangerous bomb-RDX Tiffin box Cooker

Responsibilities
ammonium nitrate/copper/diodes Bullet-Proof
helmet
10 2 Manipulator
most of the bomb blast 9 3 Bus stop

Analysis existing newspaper info-graph-

happened in religion place 8
6
5 Hospital
Pressure Cooker Wool & cotton
Terrorist were placed bomb where pillow for shock
people crowded area. RDX Bomb
resistance
terrorist always use these material Dustbin Carbon Kevler

ics, Concept visualization, Designing lay-

to make bomb,so beaware when
any one buy them. protection plate
PEOPLE Carbon blanket (bullet proof) Police
inside breast Carbon fiber
Transporation

out conversion, Content management,

pouch jacket
Groinprotection
Abadoned Bag Suitcase bomb squad dressed up.and
Dustbin plate
nearing to diffuse the bomb

Graphics , Color significance, Story telling

its always our duty to save people
information about suspected person
can save lots of people life.
Terrorist send threaten mail to police
e- MAIL
terrorist always keep the bomb
in the transport.in which public
used to travel everyday life.
Carbon fiber
in Delhi. totaly 40 people killed an abandon bag is placed in the Bus stop.which the suitcase has been kept in Hospital.which
in bomb blast.died,the time bomb
trouser
contain RDXbomb.bomb squad diffused the bomb contain time bomb.bomb squad diffused
were placed inside of the dustbin. the bomb successfuly. Rubber
Bomb Squad boots
Interaction Design
Print Media -Newspaper

Classroom Project

About the Project

It was the course on interaction design
.the objective of the course is to come
up with high interaction design in any
medium .as my insight is to bring good
interaction design where human being
gets struck and bored of monotony of the Story Telling & Scenario
product . which is newspaper graphics Today Thoughts
and visual, Pages AHMEDABAD FRIDAY, AUGUST 23,2008 Price RS 2

Student’s Newspaper
you have to dream before your dreams can
come true
-Abdul kalam
The project is focused on, how can design
a print media very effectively interact with Today’s Achievement Be Aware
challenge Steven Paul Jobs (born February 24, 1955) is the co-founder, Chairman, and Be Aware of bomb blast in Ahmedabad ,

people. It was an design project to design CEO of Apple Inc and former CEO of Pixar Animation Studios.

In the late '70s, Jobs, with Apple co-founder Steve Wozniak, made the easy
a newspaper for school student and make and affordable (compared to other computers of the time) personal computer
become reality, years before the advent of IBM PC. In the early '80s, still at

them to engage and interact with full en- Apple, Jobs was among the first to see the commercial potential of the
mouse-driven GUI (Graphical User Interface).[7] After losing a power strug
gle with the board of directors in 1985, Jobs resigned from Apple and found
thusiasm by that way they learn and read ed NeXT, a computer platform development company specializing in the

higher education and business markets. NeXT's subsequent 1997 buyout by Apple Inc. brought Jobs back to the
the newspaper. This interaction design company he co-founded, and he has served as its
CEO since then. Steve Jobs was listed as Fortune Magazine's Most Powerful Businessman of 2007.[8]

product design will make children very

active and act smart, during the project i
had done Hundred info- graphic Visual- Sports
The 2008 Summer
Career support History
Are you confused
Entertainment Competition
Coming Indian student s bag 2nd prize in
Books

ization.
Olympic Games, to choose your NASA’S Competition.
officially known as Stop career. here is Of electric
Soon
the Games of the the best field
XXIX Olympiad, is Worry- you can get
current,
An elec
a major international into .
multi-sport event Design, MBA

Responsibilities
which is being held in Beijing,
People's Republic of China, from
August 8 (except football, which
Computer Engineering ,B.com , submit your creative drawing for
Electronics engineering , Visual childrens day before 15 .
communication. tromagnet in which Show timing:11,
magnetism is produced by 3 ,6 , 9

Concept visualization, Designing layout

started on August 6) to August 24,
2008. A total of 10,500 athletes
are expected to compete in 302
some of the best college in india Theaters:
to set up and start your career Best book for student to learn
an Electric current. City pulse
.those are National institute of about computer basic
Rajshri

conversion, Content Management, Graph-

ics , Prototypes (For interactive or in-the-
events in 28 sports, one event more design , Indian Institute of Manage-
than was on the schedule of the
2004 games.[2] The 2008 Beijing
Olympics will also mark the third
time that Olympic events will

mind simulation), Graphic mockups (Pre-

cise visual of the expected end result)

mer
Sum-
2008
The
con-
you

Are

see

IBM
the
commercia early

computers
PC.

co-founder
In
the
l potential still

CEO
of
the

Steve

is
of
'80s,

time)

the
Pixar
of

Wozniak,

co-founder
the

personal

Animation
at
Apple,

made
become

computer

, Chairman,

St
Studios.
Jobs

and
the
reality,

easy
was

affordable

In

ud
and
the
among

CEO
years

late
(compared

Steven
'70s,

of
the

before

Apple

en
first

Jobs,

Paul
the
to

Inc
to

with
advent

Jobs
other

and

t’s
Apple

(born
former
of

February
24,
1955)
Be

Today

Competition
User Centered Design
Classroom Project

Statement of Purpose
Old age, being a phase of everyone’s lives
should not be ignored. Its accompanied
with physical ailments that make us in
need for additional stability. Effectively, a
walking stick can be used by elderly people
of sixty five years and/or above. Serving,
society for a noble cause and restructuring
the basic concept of an ordinary walking
stick will gain stronger support for pro-
ceeding with the research. Instead of being
an ordinary walking stick, it would have
few frequently used accessories integrated
with it which are vital to daily usage of an Contextual level diagram
old person. Design with product concern
Re-designing the stick would consider Innovation Brainstorm
physical structure, technology, extent of contextual based

use and followed-up with a prototype. In-

logically supported
volving continuous user research and feed-
User
back is core towards an effectively commu-
Design Communication raw materials needed

nicated message for the end user. Design User

Economic Approach Strategy Feedback ru
gg
ed
& dimension substance
Old aged du
ra
Physically bl
e
challenged
Injured

User Conceptual
Frame work
Raw
material
Desire produce easily supplier

use easily

Product innovative & practical maintain easily

Refinement
demanded spec comparison

build prototype
field visits
User Centered Design
Responsibilities
Contextual study
Design planning
User Scenarios
Persona
Product analysis
Prototypes
Technology feasibility
Usability testing

User Desirability

Proposed Product design

Graphic Design

Logo Designs, Brochure designs, Letter pad design, Magazine layout, Windows display
Visual Communication Design
Illustration
Visual Communication Design

ahoo OKIA
Visual Communication Design

The perfect style

I always think to create some thing creative so why not to redesign the Web page of an iPhone online products display, I want to design a web page visual Design
The visuals should be more interactive ,Interesting, artistically settled. its an attempt to design a display of online products of Apple iPhone products, the aim
of this visual communication design is to make user to engage and interact with online products .
Desktop Design
Advanced Form & Design
Usability

This project involves to propose new This project aimed to develop rapid This project aim was to propose a
The project aim was to Redesigned
product idea and design the whole prototype design ,so the given task product idea and the whole project
the form of the answering machine,
product display panel, mainly con- was to design a vehicle with different involved design methodology ,rapid
which was chosen from old mart
sidered about human interaction form and shapes, prototyping.
and attempted to redesign the form
with product
with out removing the component.
The project aim is to redesign the
product Display with user friendly
UI and Ergonomically settled de-
sign
Product Design :
Aesthetic Interface design
Paintings

Title: A girl Title: Culture Title: Festival

Medium: Water colour Medium: Collage Medium: water colour
Color & Form Design
Photography
Creativity Design
Awards

Title: My Duty
Title : Varanasi
Painting : National Jury Award,
Title: Tomorrow Photography: I prize in inter college
Gold Medal, India
competition
Photography: II nd prize,
District level II nd place.
Ashvita art gallery competition
About Me
I still remember! From my I started drawing from
childhood itself , I was childhood, I had been in
thinking about the prod- dream to become designer
ucts, designs and who is I wanted to become a
and I wanted to graduate
eo
olleg f fine
bringing the ideas. designer ,so I had cho-
in design
tc Ar sen to study about vi-
ov ts sual communication

G
design, I joined at Govt
College of Fine Arts.

Television
advertisement
game design
Computer etc..

I Post graduate in Software & User Interface design Having talent and passion in designing for users
Having ability to deliver quality designs on time
Having ability to understand the problem and turn around solution
quickly
Able to work with cross functional team
I graduated in Visual com- Having excellent Visual communication skill
munication design , still Committed for works and willing to work hard
want to learn more about Passionate about delivering design solution for new products ,enhance-
design. ment to existing product .
Communicate ideas and design concepts effectively
so I want to join at NID. yes
Passionate about my style to suite the clients needs
NID is tough to get through. To provide better design services and support business and product develop-
I will try..I want to become ment for the business unit
a designer. Coordinate with cross functional teams to deliver result
Cooperate with teams of all levels /function and resolve conflicts effectively
Provide support to the development team for implementation

Now I am looking for a place where I can share my

creative design mind to change the World,
Challenging design jobs
Design Presentation at NID Teams works...

Extra Activities: Member in Trust which is helping to school students

READ Rural Education Anew Delegation
Sports: National level Hockey Player

Hobbies: Reading Books, Playing Chess, Swimming

Contact

Prathapraj.S

Software & User Interface Design

National Institute of Design

T N K
Paldi, Ahemdabad, INDIA.

Mobile :09381812461
eMail :spratap_raj9@yahoo.com
H A U
prathap_r@nid.edu
finenidian@gmail.com