For more information, please visit www.nattphenjati.com

1. P H E N J AT I

2. 2 / 60
Rensselaer Polytechnic Institute (RPI)
BS in Electronic Media, Arts and Communication
New York, USA
Sep 2007 – Dec 2010
Intellidemia
Web Developer
New York, USA
Sep 2010 – Aug 2011
Post Intermedia
New Media Specialist
Bangkok, Thailand
Aug 2011 – Mar 2012
Playable
Interaction Designer
Bangkok, Thailand
Dec 2011 – Sep 2012
Domus Academy
Master of Interaction Design
Milan, Italy
Sep 2012 – Jul 2013
2009 2010 2011 2012 2013
Publication Design User Interface Design
UI Interaction DesignIxDPhotography
NATT PHENJATI
EXPERIENCE
SKILLS

3. 3 / 60
MY WORKS
4 3521
44 49
52 56

4. 4 / 60
Master in Interaction Design
Brief Title: ReadMe | Apr - Jul 13
Project Leader: Claudio Moderini
Advisors: Gianluigi Ricuperati,
Rodrigo Torres, Riccardo Mantelli
BY NATT PHENJATI
4 / 60

5. 5 / 60
WE ARE OVERLOADED WITH DATA
From the PastFrom the Present

6. 6 / 60
#T
MEET A NEW WAY TO SEDIMENT YOUR DIGITAL READING
Roko is an application that quantifies your reading activities and transforms them into
insightful reports that help you to manage, discover, and share your reading experience.
Video: https://vimeo.com/70564941

7. 7 / 60
126
Articles
Your reading on Flipboard
Technology (34%)
Design (26%)
Photography (21%)
The Extreme ... (9%)
Google+ (8%)
Others (2%)
How Yahoo Killed Flickr and Lost the Internet
You read this article 1 year ago:
103
87
70
58
12
21
1
1
Dubliners
by James Joyce
41 / 172
pages read
24%
10/30 day
Your have been
reading for
46
62
26
60
You read 46 articles this week
You
Sandeep
Average Reader
my Reading world
June 2013
YOU CAN CREATE 6 TYPES OF REPORTS WITH ROKO
Each report has specialized functions that attach to different types of readers.

8. 8 / 60
Compare to how you
read this week to last
week and your goal
Compare to your
friend and the
average reader
Activity Feed
Another visualization
that shows how much
you read each day

9. 9 / 60
Hightlight & Note
from your reading
Overview of your
progress toward
your goal
Where you left off
Daily records

10. 10 / 60
Highlight stories
from each type of
discovery
Reading from
others based on
your interests
Reading from
your past

11. 11 / 60
The buildings
represent things
that you have read
from each source
A teaser to your
report
Popular tags
Popular media
The sizes roughly
represent the
reading quantity

12. 12 / 60
Sediment
what you read
Discover
content
Manage
your behavior
Share
experience
CORE VALUES
With insights from Roko,
you can better ...
Motivate
yourself to read
While not all five values of Roko will be valid for everyone,
there is a value in Roko for every type of digital reader.

13. 13 / 60
DESIGN PROCESS

14. 14 / 60
OBSERVATION
I began this project through my observation that we have accumulated so many e-books,
but we easily forget about them. Then I did an informal interview and survey to investigate
what prevent people from reading books. The result is shown below.
Don’t have time
Out of sight
Cannot follow
the content
Misc.
14 People

15. 15 / 60
With the observation that I made, I came up with two initial concepts that lie in two
extremes: one is a mobile application and another is a physical object.
README APP
Design for
Emotion
By Aarron Walter
What’s Mine is
Yours
By Rachel Botsman and
Roo Rogers
12 pages left
8 hours left
The Multiplayer
Classroom
By Lee Sheldon
Book: A Futurist’s
Manifesto
By Hugh McGuire and
Brain O’Leary
Seductive
Interaction Design
By Stephen P. Anderson
3 hours left
These Days
By Jack Cheng + Add new book
HYPERBOOKMARK
WHY READ IT
IN A NOVEL
WHEN I CAN
LIVE IT”
“
These Days
by Jack Cheng
Such an ironic
quote. Love it!
Natt Phenjati:
HARRY POTTER
A mobile application that motivates you
read your book through goal-setting
A physical souvenir of your digital
reading experience
INITIAL CONCEPTS

16. 16 / 60
RoKo
Goal for each Source
10 hr
3 hr
3 hr
2 hr
2 hrFacebook
Total
Flipboard
Quartz
nytimes
30%
7 hr
30 min
1.5 hr
4 hr
30%
20%
15%
5%
2 hr
Compare to others >
MY WEEKLY GOAL
NATT PHENJATI
Active Reader
MediaInterests Widgets
44 5 +
ARTICLE SOURCES
63
items
nytimes.com
13
+14%
items
from
last week
Quartz
12
-5%
items
from
last week
Facebook
8
-2%
items
from
last week
3
Flip
+20
MY INTERESTS
60% Design
20% Technology
20% Education
By combining the two initial concepts and the lesson from the workshop, I developed the
first version of Roko. In this version, the core objective of tracking your reading experience
is to motivate you to read more, and everything is displayed in one dashboard.
MERGING CONCEPTS

17. 17 / 60
I used the wireframe that I developed to test with other people. Most of the negative
feedback revolves around using “motivation” as a core objective.
I could pay $10 for this app. I like the time capsule idea.
I don’t want to be told
what to do.
I only need to know what
is important.
If I am already motivated,
why do I need it?
The logo looks like
Marlboro logo
USER TESTING

18. 18 / 60
Emma Karen PaulName
Age 24 27 36
Occupation Graduate Student Painter IT Consultant
Type of reader Casual Active Professional
Reading Amount 3 articles per days 40 articles per days / 4 books per month 20 articles per day / sections of books
Topic
Variety of trendy topics / Topics relating
to her friends
Arts / Philosophy / General Knowledge
/ Novel
Topics relating to projects that he is
working on / Technology / Music
Main Sources Facebook, Flipboard, News Websites Facebook, Web Boards, Blogs Pulse, Linkedin, Twitter, News Website
Main Devices Laptop / iPad Laptop / Books Laptop / iPad / iPhone / eReader
“I do prefer reading than going out.”“I read because I want to be in trend.” “Reading is a part of my job.”
Frustrations
- I hate a page a long text.
- I can easily get distracted.
- I have a problem collecting articles
that I read online.
- Sometimes, I cannot stop reading.
- Multiple devices and platforms make
my life complicated.
- I don’t have time for reflection.
Goals
I want to ...
- Be up to date.
- Read more.
- Find books that is right for me.
I want to ...
- Organize my digital assets.
- Discover deeper information on what
I am reading
I want to ...
- Optimize my time
- Get the most out of what I read
- Not forgetting what I read
Persona
CREATING USER PERSONAS
Using what I learned from the interviews, I develops persona of three different
types of users to use as a guideline for my design process.

19. 19 / 60
FINALIZATION
I used the feedbacks and personas as the guideline to finalize the concept. Then develop
a prototype using a software called Mag+.

20. 20 / 60
SKILLS APPLIED
Design Research
Ideation
Prototyping
Interface Design

21. 21 / 60
VITRO
Zijing Zhang, Natt Phenjati
Emmika Sakonwitthayanon
TACTILE BATTERY CASE
Workshop 5: MORE
Project Leader: Paolo Lorini
Project Assistants:
Stefan Krivokapic, Nima Gazestani
Final Presentation: 22/03/2013

22. 22 / 60
WHAT IF YOUR PHONE CAN MOVE?
VITRO is a new kind of iPhone battery case with a dynamic tactile surface that gives a new
form of communication between iPhone and its owner.

23. 23 / 60
Better than phone vibration. You can easily see the movement of VITRO and
differentiate different types of notifications without the need of the phone’s screen.
SCENARIO

24. 24 / 60
You not only can see but also can touch the movement of VITRO. You can feel it when
you are talking on the phone or when the phone is inside your pocket.
SCENARIO

25. 25 / 60
Attach your iPhone with the case;
then install VITRO app
Select a type of movement for
your VITRO alert
1
Enable VITRO alert for your apps
in Notification Center
2 3
INSTRUCTION
The movement of VITRO is integrated with notification of your phone. You can set different
type of movements for each notification you receive.

26. 26 / 60
Rain Drop Count Down Capital X Snake
MOVEMENT STYLES

27. 27 / 60
iPhone
Processor Battery
0100100
EAP
3 Voltages
Electroactive Polymer (EAP)
Sheets and Printed Circuit
Controller Board
and Connector
Rechargeable Battery
STRUCTURE
Multi-layers Skin
0 Volt
+3 Volt
TECHNOLOGY

28. 28 / 60
DESIGN PROCESS

29. 29 / 60
The brief is to find a way to help us manage time without using display.
OBSERVATION
Observing that the we always leave our phones on
a table when we work, we wondered how to add
value to the backside of our phones?
“ZEN” (2007) by René Lee
We started by researching about tactile interface
to see the design language and technology behind
inspirations that we found.

30. 30 / 60
source: polysep.ucla.edu
Our biggest challenge was to find a material that can move with a small amount of energy and
consumes minimal space. By talking with a research center, supplier, and scientist, we discover
the right material for our project: Electroactive Polymer (EAP).
MATERIAL RESEARCH

31. 31 / 60
PROTOTYPING
We used multiple way of prototyping to test and refine our concepts, ranging from
sketching, hacking, 3D rendering, to building physical mockups.

32. 32 / 60
RevenueCost
Design & Technical
Know-how
Key Activity:
VITRO
Key Partners: Primary Market:
Key Resources: Channels:
Manufactures &
Research Centers
Tech-savvy
business people
Marketing & Supply
Management
Kickstarter
& Retailers
Case $5
Circuit Board $5
Battery $5
EAP Sheets $25
Packaging $2
Total $42
Distribution $75
Profit Margin $33
Retail Price: $150
BUSINESS ANALYSIS
Fixed Cost ÷ Profit Margin = Break Even
120,000 ÷ 33 = 3,637 Units

33. 33 / 60
FEATURED ON ...
http://www.brit.co/vitro/http://www.tuvie.com/vitro-tactile-battery-case-reacts-to-a-notifications-to-get-users-attention/
Tuvie Brit + Co.

34. 34 / 60
SKILLS APPLIED
Material Research
3D Rendering
Business Analysis
Ideation

35. 35 / 60

36. 36 / 60
INTERACTIVE POP-UP BOOK FOR ALFA ROMEO MITO
Mito Flip is a pop-up book that becomes alive by combining it with an iPad and projector.
Video: http://youtu.be/MeIuNP1-Zzo

37. 37 / 60
USE CASES
MiTo Flip works on 3 levels. It can work as a standalone pop-up book. By inserting an iPad inside,
you can touch and light up MiTo Flip from below. Then by adding a projector, you can trigger the
projector to project an animation onto MiTo Flip by flipping each page.
Standalone
With iPad
With Projector

38. 38 / 60
IPAD IPAD
Connect with iPad
via Aux Input
Plastic sheet Incomplete circuit Complete circuit
Send signal to iPad
When it is opened
When the book is closed
HOW IT WORKS

39. 39 / 60
DESIGN PROCESS

40. 40 / 60
FINDING INSPIRATIONS
We searched for inspirations and mapped them with the brand images of Alfa Romeo MITO.

41. 41 / 60
CREATING MOCKUPS WITH 3D RENDERS
To be able to communicate clearly and quickly with other people, we used 3D rendering
to create mockups for our ideas.

42. 42 / 60
PHYSICAL PROTOTYPING
To come up with the right shapes of the pop-up books, we had to create numerous
physical prototype and tested them with projection and iPad.

43. 43 / 60
SKILLS APPLIED
Physical Prototyping
Design Research
3D Rendering & Mapping

44. 44 / 60

45. 45 / 60
CONCOURSE
Concourse is a learning management system which uses syllabus as its core.
It is created by Intellidemia, a startup company based in New York.
Demo of Concourse: https://demo.campusconcourse.com/login

46. 46 / 60
Side by side comparison between old and new interface that I designed.
RE-DESIGN THE INTERFACE
My main task was to re-designing the interface of Concourse. The new interface uses
screen space much more efficiently and is easier to navigate and customize.

47. 47 / 60
DESIGN NEW FEATURE
To develop a report system for Concourse, I studied other analytics systems, and
develop wireframes and use cases for the new feature.

48. 48 / 60
SKILLS APPLIED
Web Programming
(HTML, CSS, JavaScript)
Interface Design

49. 49 / 60
//JavaScript Document
$(document).ready(function(){
$(‘.gallery_thumbnails a’).click(function(e){
e.preventDefault();
// set up vars from thumbnail
var photo_caption = $(this).attr(‘title’);
var photo_fullsize = $(this).attr(‘href’);
var photo_preview = photo_fullsize.replace(‘_full-
size’,’_preview’);
$(‘.gallery_caption’).slideUp(500);
$(‘.gallery_preview’).fadeOut(500, function(){
$(‘.gallery_preload_area’).html(‘<img
src=”’+photo_preview+’”/>’);
$(‘.gallery_preload_area img’).
imgpreload(function(){
$(‘.gallery_preview’).html(‘<a
class=”overlaylink” href=”’+photo_fullsize+’” title=”’+photo_
caption+’” style=”background-image:url(‘+photo_pre-
view+’);”></a>’);
$(‘.gallery_caption’).html(‘<p><a
class=”overlaylink zoom” href=”’+photo_fullsize+’”
title=”’+photo_caption+’”>View larger</a></p><p>’+photo_
caption+’</p>’);
$(‘.gallery_preview’).fadeIn(500);
$(‘.gallery_caption’).slideDown(500);
setFancyboxLinks();
POST INTERNATIONAL MEDIA

50. 50 / 60
Sample video: http://youtu.be/5rPRBIed2k4
DEVELOP IPAD MAGAZINES
I worked with their graphic designers to develop iPad magazines using a software called Mag+.

51. 51 / 60
SKILLS APPLIED
Learning Web Programming
(HTML, JavaScript)
Graphic Design
Teaching

52. 52 / 60
DIGITAL ECOSYSTEM FOR THAI EDUCATION

53. 53 / 60
THAI EDUCATION IS CHANGING
Thai government has planned to deploy tablet to every K12 students in Thailand.
The image below comes from a pilot classroom that I visited with the company.

54. 54 / 60
TMS
(Teaching Management System)
Interactive
Classroom
Planet of Knowledge
The number one
pain point: to create
lessons planning
and exams
No interaction
between teachers
and students
Lack of
self-motivation
Preparing for
Class
Teacher
Classroom
Teacher &
Student
Self-Learning
Student
DESIGN NEW ECOSYSTEM
Through interviews and observation, I identified three main issues in Thai education.
Then I design three interconnected systems to address the problem.

55. 55 / 60
SKILLS APPLIED
Research
Interface Design
Ideation

56. 56 / 60
PHOTO SHOOT FOR ELLE FASHION WEEK

57. 57 / 60
More photos: http://blog.phenji.com/elle-fashion-week-sum-up/

58. 58 / 60
SKILLS APPLIED
Ninja
Photography

59. 59 / 60
MY WORKS
4 3521
44 49
52 56

60. 60 / 60
TO SEE MORE ...
Please visit: http://www.nattphenjati.com/

61. THANK YOU
Natt Phenjati
natt_ph@msn.com