Kratika Varma Portfolio
Kratika Varma Portfolio
Kratika Varma Portfolio
TEAM WORK
arch
itecture+DESIGN
Being from an architectural background
fast learner
adapt easily
A museum without walls...
- KRATIKA VARMA
User Experience Designer
I thrive in a fast moving, diverse, demanding and pressurised space as they
MYEDUTOR
PERSONALIZED E-LEARNING MULTI MEDIA HANDLED DEVICE
page: 6
CORRIDOR
AN INTRANET APPLICATION OF COMMSCOPE (US)
page: 9 03
04 VIRTUAL PAINTER
WINDOWS DESKTOP VISUALIZATION APPLICATION
page: 13
OUR DOMAIN
APPLICATION TO SHARE INFORMATION FOR IITians
page: 16 05
06 CIRCULAR JOURNEY
APPLICATION FOR BOOKING CIRCULAR JOURNEY TICKETS
page: 19
PHILANTHROPY
A STRATEGY MODEL TO INCREASE EMPLOYABILTY
page: 22 07
08 PRODUCT DESIGN
REDESIGN OF HOOK FOR CLOTHES AND THUMB PIN
page: 24
EXPLORATIONS
ANIMATIONS, VISUAL DESIGNS AND SKETCHES
page: 26 09
01
The aim of the project was to design a smart phone application for effectively managing and conducting collaborative
and intensive brainstorming sessions on the go augmented by a design thinking experience. This project was a four
month assignment module on an Interaction design project by Microsoft, Hyderabad for which we had to design an
application for mobile collaboration. We were given the freedom to refine our topic under the area of office develop-
ment. After intensive research we arrived at the need statement. We are nearing an end of this project and have
already developed an initial version of the prototype for our final user testing. The progress of the project is monitored
online.
A Automated T ask
B Common T ask
C Moderator ’s T ask
CREA TE EVENT LAST MINUTE CREA TE / INSERT SUMMARIZE MAIL SLIDES AND
REMINDERS DATA SUMMAR Y T O A TTENDEES
DEFINE SUBJECT UPD ATE AND RECIPENTS
JOIN SESSION FEEDBA CK CALENDER
ADD EVENT T O
CALENDER BRIEFING OF CONTEXTU AL EXIT
ATTENDEES DISCUSSIONS
ADD SAVE AND EXPORT
PARTICIP ANTS SET UP I-BO ARD ORGANIZE , EDIT SUMMAR Y
AND MAP
ADD END SESSION
PRIMARY RESEARCH
DEFINE
SCENARIO RECIPIENTS* PARTICIP ANT
PRIVILEGES
ADD AND
NA VIGA TE SLIDES
RESEARCH: OBSERVE & INQUIRE
EMAIL / SMS T O
RESEARCH: SYNTHESIS INVITEE AND
SET UP A CTIVITY CONTROL
RECIPIENTS
PARTICIP ANT
ACCEPT/DECLINE PRIVILEGES
INVIT ATION
DRA G & MONIT OR AND
DROP
RECOL OR STATUS UPD ATE T O UPD ATE PARTICIP ANT
USER
MODERA TOR STATUS
ACTIONS O VERLAP TRANSFORM
PRIMITIVES
INSERT MODIFY EVENT
VISU AL LINES
VECT ORS BEZIER CREA TE HYPERLINKED T O
RECORD
ORGANIZA TION
VECT OR I-BO ARD SLIDES PARTICIP ATION
MAPPING TABLES REMINDER T O
DRA WING LEVEL
KEYWORDS INVITEES
DATA FROM O THER INFOGRAPHICS
DESK TOP SHARE CHARTS
MEDIA / DEVICE RECORD , SA VE AND
e.g CAD MODELS
PRESENT ATION EXPORT SLIDES AND
SCREEN SHARE AUDIO / VIDEO
LIKE / FEEDBA CKS
SUMMARIZER
ideation
DISLIKE
FEEDBA CK I-BO ARD
IMA GES
COMMENT “POST ITS”
HEADERS
SLIDES
NA VIGA TE AUDIO VIDEO
CREA TE TEXT
TIMELINE
CLICK &
EXPAND
ZOOM
TASK FLOW
ICONS TRASHBIN GROUP MODELLING: SYNTHESIS & EXPERIMENT
HYPERLINKS
HIDE/SHOW
HIGHLIGHTING EMO TE
TOOLS
SPEECH T O IDENTITY
TEXT SPEECH T O
TEXT
O THER
After establishing the user interface design goals, we categorized the information into a
COL OR CODING
inspiration
COMMENT
FEATURES SPECIFIC
CHA T- SCROLL AGREE / DISA GREE
PRIV ATE
CHA T
coherent structure. Finally, a diagram was created which shows the analysis and design
of the data stored by information systems, concentrating on entities, their attributes, and
EXPRESSION
TEXT STYLE
their interrelationships.
MIND MAPPING
MODELLING: SYNTHESIS
While conducting interviews, we captured the scope of the application. After brainstorming
we did the task analysis in which analysis of how a task is accomplished, including a deta-
iled description of both manual and mental activities was done in the form of mind mappi-
process
ng diagram and finally established the user interface design goals.
INFORMATION ARCHITECTURE
MODELLING: SYNTHESIS & EXPERIMENT
execution
WIREFRAME
FRAMEWORK: EXECUTE & EXPERIMENT
implementation
After mapping the experience and navigation model to design
patterns and structure, we coverted them into low-fidelity
wireframes and then testing them on users. Once it created a
user expectations, we were able to figure out what a user need. HIGH-FIDELITY PROTOTYPE
SCREENSHOTS
REFINEMENT: EXECUTE & SPREAD
upshots
a clear picture of different scenarios.
02
MyEdutor is a personalized learning handled device which is revolutionizing how education is delivered to each and
every individual. It is a multi-media e-learning system, enabling students worldwide to achieve academic success
through one-on-one tutoring and engaged personalized learning. We designed the User Interface of the device during
my internship at Hyderabad with Prasanna Boni (Director of Edutor technologies) and Sravan Narasipuram (Director) in
May 2010. Worked, hands on, did the Information Architecture of a live product for the first time. Learned how to do
pixel-by-pixel visual design to fit predefined grids. Learned to design icons. Did package design for the final shipment of
the product.
www.myedutor.com
research
framework
MIND MAPPING PRE CARD SORTING
IDEATION: SYNTHESIZE IDEATION: EXPERIMENT
Activities: Mapping the experience and navigation model to design patterns and structure,
modelling
coverting them into low-fidelity wireframes and then testing them on users.
process
CLOSED CARD SORTING
IDEATION: SYNTHESIZE & EXPERIMENT
Page 5: Back Page Page 6: Content Page Page 7: Page Content Page 8: Cover Page
How to see a topic in any subject? How to take a test on Edutor? How to use dictionary?
About Edutor Technologies Step1: See image 3, click on any of the subject icons, you should see Step 1: See image 3, click on Tests icon > select a subject > select a test Step 1: See image 3, click on the ‘Dictionary’ at the bottom of the screen,
Edutor Quick Start Guide image 4, click on any of the topics for the animations, video or a presenta- you should see dictionary icons. Click on dictionary of your choice
tion. Enjoy the learning experience!
Step 2: See below image for information
Image 5: (Test screen), describe various menu items here.
Image 3:
edu_6_science_tst_1.ser
List Prev Next Answer Submit 00:00:12 Repeat Pronounce Go to Add
Image 4:
edu_6_science edu_6_science_tst_1.ser
5 A B C D
7 A B C D
1. Chapter 1
8 A B C D
2. Chapter 2 9 A B C D
10 A B C D
11 A B C D
12 A B C D
13 A B C D
14 A B C D
15 A B C D
SCREEN SHOT : CURRICULUM SCREEN SHOT : CONTENT Page 1: Back Page Page 2: Content Page Page 3: Page Content Page 4: Cover Page
Top View:
Dos and Don’ts:
1 Charge the device for 4 hours before use. Your Edutor can be charged
using both the power point or if you connect to a PC/Laptop using the
USB cable (this may take longer time to charge)
2 Do not use it moist conditions or in rain or where there is a possibility of
Activities: Started looking into behavior, form, and presentation of application. Converting
Support at School
Our representative will be present in your school for any support require- 8 Step 2: You should see your name etc,. Details in the first screen, click on
ments that you may have. You can bring the Edutor device (student or Login
parent) and deliver to our representative for support or service require-
ments if any. No hassles of going around or standing in queues! Step 3: You should see the below screen, you are ready to use Edutor!
Image 2:
Bottom View:
10
Device Information:
spread
1 On/Off 6a Enter
2 Mic 6b Esc/Back
3 TV Out (Disabled*) 7 Screen Welcome, Ajit Jose (2324)
*GCF2JQPG,CEM 8 Speakers
5 Volume 9 USB (Disabled*) Class: VII Standard Start Edutor
6 Navigation Keys 10 Stylus School: Indus International School
Place: Hyderabad
upshots
IMPLEMENTATION: EXECUTE & SPREAD IMPLEMENTATION: EXECUTE & SPREAD
After capturing all the data from the application and client, the
information was then chunked into the groups. The groups were
then distributed into the respective buckets as per their context.
Homepage consist of three buckets, which works as separate portals. The portal
acts like a gateway to the category of data, further divided into the subcategory
and finally leads to the content.
EXPERIENCE MODEL
MODELLING: SYNTHESIZE process
UI BEHAVIOUR: HOME PAGE
IMPLEMENTATION: EXECUTE
UI BEHAVIOUR: WORK PAGE
ideation: visual design
IMPLEMENTATION: EXECUTE
framework
VISUAL DESIGN GRIDS: HOME VISUAL DESIGN GRIDS: WORK
MOODBOARD MOOD BOARD IMPLEMENTATION: EXECUTE & EXPERIMENT IMPLEMENTATION: EXECUTE & EXPERIMENT
RESEARCH: OBSERVE & INQUIRE RESEARCH: OBSERVE & INQUIRE
After the brainstorming on the keywords related to the visual design goal, Defined the grid and UI behaviour for the screens as a set of functional
a basic design approach was taken and shown in the form of mood boads specification that gave directions on how to communicate elements co-
to enable the client to illustrate visually the direction of style which we nsistently throughout the process of development of the application.
process
were pursuing. It then helped us to get an idea of what our clients were
looking for.
SCREENSHOT : WORK PAGE
FRAMEWORK: EXECUTE & SPREAD
DISCUSSION PAGE
FRAMEWORK: EXECUTE & SPREAD
implementation
execution
We compiled the screens and designed according to a visual design guidelines All visual design principles are derived from CommScope’s
document. It represents every experience, service, and quality of the company. global brand strategy, incorporating employee requiremen-
To achieve the goals of the mission, a new visual design strategy based on a ts and the opportunities provided by new technologies.
upshots
set of design principles has been established.
04
The aim of the project was to let the users visualize the place that they want to get painted. This is a desktop appli-
cation which leads user paint their place of choice, the way they want to and gives a virtual walkthrough. This will let
the user get an actual feel of the space once it’s painted. We have incorporated various genre of look and feel to cater
to the needs of any kind. We have options of uploading 2D architectural plans and 3D models to enable better rende-
ring and walkthroughs. We have various options for setting up different camera angles to get an optimized virtual view.
We intend to develop a platform independent and fully customizable application for the masses which is currently being
developed as a Windows application at IIT Kanpur.
TUTORIALS
AND EASY
GUIDES TO
INSTALL
3D MODELLING
FUSS
Help
Application Guide FREE
Software Help
Ancilliaries
Modelling Tutorials
Finishes
Latest on Web
Room Shadecards
What’s This? View
Door Type of Applications
Product Information
Window Defects & Remedies Uploads
License Information
Components Getting started Zoom in/out
About Software
Roof Post Painting Temporary hide
Floor
Dealer Locator
Calculator Temporary isolate
OS
Ceiling Hide in View INDEPENDANT
Staicases Unhide in View
Render in Daylight
Render in Nightlight
Image Auto tone
WALKTHROUGH
BUDGET
PERSONA
RESEARCH: OBSERVE & INQUIRE Sample Views
APPLICATION
Middle income group
Saves Money FULLY
TARGET USER
Residence Hectic Schedule
School CUSMOTIZED
Space concious
Institutions Well Educated
College Campus Tech Savvy
Offices Experimental
Industries VIRTUAL Patient
Retail outlets COLOR Seeks Durability
Malls
Hospitals PALETTES Color Plalette
Clinics
Vastu:
Boutiques
space
Life Style:
glam, cool, vibrant,
neutral.
Ambience::
romantic, energetic
SAMPLE Color Wheel:
VIEWS & analogous,
VARIOUS GENRE mochromatic,
VARIOUS VIEWS MODELS Vitual
complementary
triadic, tetradic Paiunter
Light Intensity: 2010
carpet are, size
ideation
of openings
INFORMATION ARCHITECTURE
MODELLING: SYNTHESIS & EXPERIMENT
After establishing the user interface design goals, we categorized the information into a
inspiration
coherent structure. Finally, a diagram was created which shows the analysis and design
of the data stored by information systems, concentrating on entities, their attributes, and
their interrelationships.
While conducting interviews, we captured the scope of the application. After brainstorming
we did the task analysis in which analysis of how a task is accomplished, including a deta-
iled description of both manual and mental activities was done in the form of mind mappi-
process
ng diagram and finally established the user interface design goals.
HIGH-FIDELITY PROTOTYPE HIGH-FIDELITY PROTOTYPE
SCREENSHOT 3 SCREENSHOT 4
REFINEMENT: EXECUTE & SPREAD REFINEMENT: EXECUTE & SPREAD
implementation
WIREFRAME
FRAMEWORK: EXECUTE & EXPERIMENT
HIGH-FIDELITY PROTOTYPE HIGH-FIDELITY PROTOTYPE
SCREENSHOT 5 SCREENSHOT 6
REFINEMENT: EXECUTE & SPREAD REFINEMENT: EXECUTE & SPREAD
upshots
REFINEMENT: EXECUTE & SPREAD REFINEMENT: EXECUTE & SPREAD
After mapping the experience and navigation model to design patterns and structure,
we coverted them into low-fidelity wireframes and then testing them on users. Once
it created a user expectations, we were able to figure out what a user need.
05
We worked on this project with the sole idea of increasing the interaction among the students as well as the faculties
of our institution. We designed an application where we brought all the facilities provided to the residents of IIT Kanp-
ur at one platform within the reach of a single mouse click. We give our users an easy and logical platform to share
information and carry out other tasks within a group. We also try to facilitate the possibilities of internships and related
work and experience sharing within the campus. The application can also be referred to as a social networking for a
regular academic life.
BRAINSTORMING
IDEATION: SYNTHESIZE
research
framework
MIND MAPPING
IDEATION: SYNTHESIZE
STRUCTURE
INSPIRATION: OBSERVE & INQUIRE
process
OPEN CARD SORTING
IDEATION: SYNTHESIZE & EXPERIMENT
execution
HIGH-FIDELITY WIREFRAME:JOB PAGE
IMPLEMENTATION: EXPERIMENT & EXECUTE
upshots
HOME PAGE PRODUCT MARKET
IMPLEMENTATION: EXECUTE IMPLEMENTATION: EXECUTE
Started looking into behavior and presentation of the application, converting the
low-fidelity wireframes to high-fidelity wireframes and then tested them on users.
06
Objective was to design an application for booking Indian Railways, ‘Circular Journey’ tickets. We had to design
a third party application only associated with Indian Railways for booking the tickets, We were not designing an applic-
ation to be incorporated in the Indian Railways website. Hence, the look and feel, as well as the functionality of our
application is entirely different from the standards followed by Indian Railways. The payment procedure is similar to
other reservation procedure existing, also the users have to book different tickets for different stretches of the journey.
PERSONA low-fidelity wireframe
RESEARCH: INQUIRE
inspiration
implementation
MIND MAPPING
MODELLING: SYNTHESIS
BRAINSTORMING
RESEARCH: SYNTHESIS
While conducting interviews, we captured the scope of the application. After brainstorming
we chunked the information into the groups in the form of mind mapping diagram and fi-
nally established the user interface design goals.
TASK FLOW MODEL TASK FLOW MODEL
FRAMEWORK: EXPERIMENT FRAMEWORK: EXPERIMENT
process
es was done in the form of information architecture table.
TASK ANALYSIS
MODELLING: SYNTHESIS
HIGH-FIDELITY HIGH-FIDELITY
WIREFRAME3 WIREFRAME4
REFINEMENT: EXECUTE & SPREAD REFINEMENT: EXECUTE & SPREAD
implementation
WIREFRAME
FRAMEWORK: EXECUTE & EXPERIMENT
HIGH-FIDELITY HIGH-FIDELITY
WIREFRAME5 WIREFRAME6
REFINEMENT: EXECUTE & SPREAD REFINEMENT: EXECUTE & SPREAD
HIGH-FIDELITY HIGH-FIDELITY
WIREFRAME1 WIREFRAME2
upshots
REFINEMENT: EXECUTE & SPREAD REFINEMENT: EXECUTE & SPREAD
Guide will visit houses door to door. Online job portal to search
appropriate job.
BRAINSTORMING
RESEARCH: SYNTHESIS Distribute the card to each and every The profile information is uploaded Here after, the guide then connects to Training institute for up
skilling/certification.
individual member of the family. by creating a candidate database the various options/facilities available
on the internet. for each individual profile in their area
according to their educational qualifi-
cation and skill set.
inspiration
/
Any change in the profile later, it’s the
responsibility of every individual to
update their information on to the chip
either by going to the NGO or to the
ATM in the future.
MIND MAPPING
AFFINITY MAPPING MODELLING: SYNTHESIS REFINED PROCESS MODEL
MODELLING: SYNTHESIS CULTIVATION: EXECUTE & SPREAD
implementation
suggestions to help make the current situation better. Certificate
of
3rd Party support
PROSPERITY
LIFETIME
YOUTH TILL
SECONDARY SCHOOL 1 mo
nth FAILURE
6 months
nth
mo
Channelisers
1
NO NEED RE-PAY TILL 1 month` JOB
TO REPAY with INTEREST COLLEGE
bsidy SUBSIDY
gets Su to Trainee
ENTREPRENEURSHIP
NETWORK OF EXPERTS IN
VARIOUS DOMAINS
UNSKILLED PEOPLE
SCENARIO MODEL
ideation
research
under the guidance of the guides at each level.
made to assemble such people, and utilize their knowledge/experience for the benifit of Un-skilled/Un-employed
masses. Such people(called Channelisers) could serve as agents to attract suitable candidates to the Upskilling Body.
Channelisers could be people who themselves are benifited by the Upskilling Body.
08
Two of the few product designs i have done are ‘hook’ and ‘thumb pin’. The objective of redesigning the hook was
to come up with a solution for a problem of clothes falling off, either when somebody passes by or stacking one over
another. For thumb pin was to overcome with the issues of hurting the nails while removing the pin from the board,
the mark of corrosion on the sheets, problem of picking up one pin from the heap of pins etc.
IDEATION
COMPARING DIFFERENT ALTERNATIVES
PROTOTYPE VIEW
3DS MAX RENDERED MODEL
IDEATION
SECTIONAL VIEW COMPARING DIFFERENT ALTERNATIVES
3DS MAX RENDERED MODEL
thumb pin
WEIGHTED OBJECTS
STACKING IN PACKAGE
3DS MAX RENDERED MODEL METHOD
COMPARING THREE POTENTIAL OPTIONS
WORKING SCENARIO OF THE MODEL A simple thumb pin does not only need to hold paper on a surface but should provide
3DS MAX RENDERED
ease of use (putting it in and retrieving). The design covers the most important factors
The lever projection from the back face can be pushed down by the of usablity, safety and material.
upshots
small projection from the hooks horizontal axis. That’s how tension
is created for the clipping mechanism.
09
Currently pursuing Interaction Design and being from an Architectural background, I keep exploring various fields
to exploit my creativity. I think of it as exploring the unexplored. I love sketching, doing posters and other visual
design work as a hobby. I believe in making use of your learning at all the later stages of life. Hence, I have tried to
use my illustrations in various animations, etc., which always helps me improve my skills and keep learning new stuff
while trying my hands on different software. In the following pages, I have compiled few of my best works in these
domains.
animation design 2
STORY BOARD ANIMATICS SCREENSHOT 1 SCREENSHOT 2
NEWSPAPER DATA VISUALIZATION NEWSPAPER DATA VISUALIZATION
NEWTON’S 1ST LAW OF MOTION NEWTON’S 1ST LAW OF MOTION
SCREENSHOT 3 SCREENSHOT 4
animation design 1
ANIMATICS ANIMATICS
NEWTON’S 3RD LAW OF MOTION NEWTON’S 3RD LAW OF MOTION
upshots
The project offer means of storytelling and visual entertainment which can enrich
viewers with different kinds of information and yet keep them interested in it. It
is the rapid display of a sequence of images of 2-D artwork in order to create an
illusion of movement.
SNAPSHOT 1 SNAPSHOT 2 SNAPSHOT 2
CHARCOAL SKETCH CHARCOAL SKETCH CHARCOAL SKETCH
PAGE 1 PAGE 2 PAGE 3
INTRODUCTION PAGE ORIGIN PAGE AVATAR PAGE
illustrations
SNAPSHOT 3 SNAPSHOT 4 SNAPSHOT 5 PAGE 4 PAGE 5 PAGE 1
DOT RENDERING CHARCOAL SKETCH DOT RENDERING VARIETY PAGE INDIAN CONTEXT PAGE PREPERATION PAGE
SNAPSHOT 6 SNAPSHOT 7
SKETCH WITH CROSS RENDERING CHARCOAL SKETCH
upshots
Free hand live sketchings and dot renderings using charcoal and
point pen as a medium.
DOMESTIC VIOLENCE DOMESTIC VIOLENCE DOMESTIC VIOLENCE
EXAMPLE OF PUN EXAMPLE OF ANTITHESIS EXAMPLE OF ANTITHESIS
posters
thank you...