P H E N J AT I
2 / 60
Rensselaer Polytechnic Institute (RPI)
BS in Electronic Media, Arts and Communication
New York, USA
Sep 2007 – Dec ...
3 / 60
MY WORKS
4 3521
44 49
52 56
4 / 60
Master in Interaction Design
Brief Title: ReadMe | Apr - Jul 13
Project Leader: Claudio Moderini
Advisors: Gianluig...
5 / 60
WE ARE OVERLOADED WITH DATA
From the PastFrom the Present
6 / 60
#T
MEET A NEW WAY TO SEDIMENT YOUR DIGITAL READING
Roko is an application that quantifies your reading activities a...
7 / 60
126
Articles
Your reading on Flipboard
Technology (34%)
Design (26%)
Photography (21%)
The Extreme ... (9%)
Google+...
8 / 60
Compare to how you
read this week to last
week and your goal
Compare to your
friend and the
average reader
Activity...
9 / 60
Hightlight & Note
from your reading
Overview of your
progress toward
your goal
Where you left off
Daily records
10 / 60
Highlight stories
from each type of
discovery
Reading from
others based on
your interests
Reading from
your past
11 / 60
The buildings
represent things
that you have read
from each source
A teaser to your
report
Popular tags
Popular me...
12 / 60
Sediment
what you read
Discover
content
Manage
your behavior
Share
experience
CORE VALUES
With insights from Roko,...
13 / 60
DESIGN PROCESS
14 / 60
OBSERVATION
I began this project through my observation that we have accumulated so many e-books,
but we easily fo...
15 / 60
With the observation that I made, I came up with two initial concepts that lie in two
extremes: one is a mobile ap...
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
...
17 / 60
I used the wireframe that I developed to test with other people. Most of the negative
feedback revolves around usi...
18 / 60
Emma Karen PaulName
Age 24 27 36
Occupation Graduate Student Painter IT Consultant
Type of reader Casual Active Pr...
19 / 60
FINALIZATION
I used the feedbacks and personas as the guideline to finalize the concept. Then develop
a prototype ...
20 / 60
SKILLS APPLIED
Design Research
Ideation
Prototyping
Interface Design
21 / 60
VITRO
Zijing Zhang, Natt Phenjati
Emmika Sakonwitthayanon
TACTILE BATTERY CASE
Workshop 5: MORE
Project Leader: Pa...
22 / 60
WHAT IF YOUR PHONE CAN MOVE?
VITRO is a new kind of iPhone battery case with a dynamic tactile surface that gives ...
23 / 60
Better than phone vibration. You can easily see the movement of VITRO and
differentiate different types of notific...
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 o...
25 / 60
Attach your iPhone with the case;
then install VITRO app
Select a type of movement for
your VITRO alert
1
Enable V...
26 / 60
Rain Drop Count Down Capital X Snake
MOVEMENT STYLES
27 / 60
iPhone
Processor Battery
0100100
EAP
3 Voltages
Electroactive Polymer (EAP)
Sheets and Printed Circuit
Controller ...
28 / 60
DESIGN PROCESS
29 / 60
The brief is to find a way to help us manage time without using display.
OBSERVATION
Observing that the we always ...
30 / 60
source: polysep.ucla.edu
Our biggest challenge was to find a material that can move with a small amount of energy ...
31 / 60
PROTOTYPING
We used multiple way of prototyping to test and refine our concepts, ranging from
sketching, hacking, ...
32 / 60
RevenueCost
Design & Technical
Know-how
Key Activity:
VITRO
Key Partners: Primary Market:
Key Resources: Channels:...
33 / 60
FEATURED ON ...
http://www.brit.co/vitro/http://www.tuvie.com/vitro-tactile-battery-case-reacts-to-a-notifications...
34 / 60
SKILLS APPLIED
Material Research
3D Rendering
Business Analysis
Ideation
35 / 60
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 ...
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 c...
38 / 60
IPAD IPAD
Connect with iPad
via Aux Input
Plastic sheet Incomplete circuit Complete circuit
Send signal to iPad
Wh...
39 / 60
DESIGN PROCESS
40 / 60
FINDING INSPIRATIONS
We searched for inspirations and mapped them with the brand images of Alfa Romeo MITO.
41 / 60
CREATING MOCKUPS WITH 3D RENDERS
To be able to communicate clearly and quickly with other people, we used 3D rende...
42 / 60
PHYSICAL PROTOTYPING
To come up with the right shapes of the pop-up books, we had to create numerous
physical prot...
43 / 60
SKILLS APPLIED
Physical Prototyping
Design Research
3D Rendering & Mapping
44 / 60
45 / 60
CONCOURSE
Concourse is a learning management system which uses syllabus as its core.
It is created by Intellidemia...
46 / 60
Side by side comparison between old and new interface that I designed.
RE-DESIGN THE INTERFACE
My main task was to...
47 / 60
DESIGN NEW FEATURE
To develop a report system for Concourse, I studied other analytics systems, and
develop wirefr...
48 / 60
SKILLS APPLIED
Web Programming
(HTML, CSS, JavaScript)
Interface Design
49 / 60
//JavaScript Document
$(document).ready(function(){
$(‘.gallery_thumbnails a’).click(function(e){
e.preventDefault...
50 / 60
Sample video: http://youtu.be/5rPRBIed2k4
DEVELOP IPAD MAGAZINES
I worked with their graphic designers to develop ...
51 / 60
SKILLS APPLIED
Learning Web Programming
(HTML, JavaScript)
Graphic Design
Teaching
52 / 60
DIGITAL ECOSYSTEM FOR THAI EDUCATION
53 / 60
THAI EDUCATION IS CHANGING
Thai government has planned to deploy tablet to every K12 students in Thailand.
The ima...
54 / 60
TMS
(Teaching Management System)
Interactive
Classroom
Planet of Knowledge
The number one
pain point: to create
le...
55 / 60
SKILLS APPLIED
Research
Interface Design
Ideation
56 / 60
PHOTO SHOOT FOR ELLE FASHION WEEK
57 / 60
More photos: http://blog.phenji.com/elle-fashion-week-sum-up/
58 / 60
SKILLS APPLIED
Ninja
Photography
59 / 60
MY WORKS
4 3521
44 49
52 56
60 / 60
TO SEE MORE ...
Please visit: http://www.nattphenjati.com/
THANK YOU
Natt Phenjati
natt_ph@msn.com
of 61

Natt Phenjati's Portfolio

For more information, please visit www.nattphenjati.com
Published on: Mar 3, 2016
Published in: Design      Technology      Education      
Source: www.slideshare.net


Transcripts - Natt Phenjati's Portfolio

  • 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