I-Ting Tseng
(886) 910 301 500
1F., No.251, Sec. 1, Kangning Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)
I certify that the work included in this portfolio is my own original work. Work included which was
conducted as a part of a team or other group is indicated and attributed as such- the other team
members are named and a true description of my role in the project is included.
Table of Contents in Infane Design Group
Kelti Group corporate，2011.10
confirm design, user experience design, corporate identity system design
Ruentex Co. A Community of Happiness mansion，2010.10
Story telling, integration, marketin
Yuanta Co. A court mansion，2009.8
branding, graphic design, user experience design
Kelti Group Corporate
The whole environment identity system including concept from building and our client. We made three films that made our proposal and design easily accessible to our customers. The following contains three s and three design proposal briefings.
Architecture Concept Proposal
（Please turn on the speaker）
2011.01.13
Kelti Group corporate headquarter
Director : Jean Chen
Production : Jack Chen, Tiffany Tseng (me)
Music : Charlie Chen
Art : Yun-Kuan Wu
Software : Powerpoint
Basement Concept Proposal
（Please turn on the speaker） 2011.01.13
Kelti Group corporate headquarter Director : Jean Chen
Production : Jack Chen, Tiffany Tseng (me)
Music : Charlie Chen
Art : Yun-Kuan Wu
Software : Powerpoint
CIS Proposal
（Please turn on the speaker）2011.09.15
Kelti Group corporate CIS
Director : Jean Chen
Production : Jack Chen, Tiffany Tseng (me)
Art : En-He Zhuo
Software : Powerpoint
A Community of Happiness Mansion
（Please turn on the speaker）
2010.07.23
A Community of Happiness Mansion
Director : Jean Chen
Production : Jack Chen , Tiffany Tseng (me)
Music : Charlie Chen
Art : Yun-Kuan Wu
Software : Powerpoint
This is the opening video for a presentation of indoor decoration of buildings. Ruentex construction & development co. held several presentations before handing over the house. We introduce construction company first, then we woke up the original intention from the clients who bought the mansion. In addition, we illustrated ten innovation engineering techniques with ten pearls emblem, and we depict lives in the mansion. Finally, we assured our clients by providing guarantees a lifetime service. This is the best example of combining marketing with after-sales service compared to the service provided by real estate marketing agency. In the film you can understand our commitment to integration and story-telling skills.
Yuanta Co. A Court Mansion
Yuanta is an established and well-known construction company that tackles unique and expensive projects. In addition to indicators design, we decided to perfect the user experience of their customers for the first time. Combining space and graphic design, we extended the overall environment identity from branding to after-sales service.
Table of Contents in EMCT
Taiwan Forest Recreation Website 2017.7 - current
Animation and interaction maps, charts and parallax scrolling effect using Bootstrap template, CSS, javascript, jquery, and HTML
Environmental Info Push Application 2015.5 - current
User experience design including prototype, wireframe, site mapping, user interface design including graphic design, page layout and interaction design using Justinmind
Environmental Sensing Website 2017.5 - 2017.11
Crowdsourcing data on its IoT based using Leaflet, Kriging method in spatial interpolation with PostgreSQL object relational database for trend map and hot zone as spacial analysis and tableau for data visualization.
Environmental Protection Administration White Paper Website 2016.1 - 2016.4
Data visualization with Interactive JavaScript chart: Highcharts, and Timeglider jQuery plugin with Infographic design
i-Environment Website 2015.5 - 2015.11
Interactive map with dashboard with Google Maps API for Local-based service and Design interface with CorelDRAW
Taiwan Forest Recreation Website
This is the official Forestry Bureau Recreation website and the project is the revision of the old website. I use the free bootstrap template from W3C. I did all the HTML and CSS coding as well as some Javascript. There are three demo sites.
Demo Site
Homepage
Including video background, searching tools, popular activities, navigation, service, interaction slide, and social community.
Subpage
We designed parallax scrolling, weather with dynamic background, cluster effect using Javascript, and slide shows.
Interaction Map
This is the work I am proudest of. This demo is an interactive map that will animate a map path while scrolling the page. We find open source code on the website from others sharing and try to tell a good story.
Environmental Info Push Application
This is the official Environmental Protection Administration app and we have supported this project since May 2015. I am in charge of prototyping, wireframing, interface design, user experience design and interaction design. It is important to find a balance between our client (government) and the app’s user (the public). The app provides the public with environmental data such as air quality, weather and river quality information that is updated every hour.
v 1.3.3
This version was what I was tasked to improve. You can see it was colorful but meaningless. Additionally the numbers were hard for the public to understand.
v 2.0.1
This version was a hit upon its debut in July 2015. Besides using color, I also designed a dashboard with pointer to indicate the instant air quality index. You can understand the meaning of the numbers at first glance.
v 2.2.9
This is the newest version. Our client asked us to put a air pollution flag on home, and I decided to use blue sky with clouds as background. I try to visualize every data and information. You can see the interaction effect on the link below.
GO
User Experience
The app has won many awards including the Geospatial World Awards 2016, Cloud award 2017 and 2017 IT month innovation product. Behind the simple interface is a complex data exchange and receiving structure and these create a powerful and easy to use app.
App Store
User Experience
In the spirit of crowdsourcing, I designed AirPhoto, a function enabling people to take a photo stamped with real-time air quality data on the app, and share the photo on a map as well as on one’s own Facebook Wall. In 2018, we rolled out a new function that informs people of the quality of the air they breathe by turning on location services.
Google PlayInterface Design in Progress
Homepage
In 2018, there will be no dashboard and point, but infographics combined with background, and the interaction chart of future trends in air quality and climate.
Health & Activities Page
Based on user's age, reported allergies, and other parameters, we can provide smart forecasts for their activities. I also designed users focus interface for different users.
Environmental Sensing Website
The WOT uses api to dynamically generate the sensed data integrated with the iot platform. In addition, because the micro-sensing information has the characteristics of quick update frequency and large amount of data, the websocket is imported to sense the sensed data and provide Users can browse to the latest and most immediate information.
WOT
For public user
Interactive Map
Using particulate matter to do instant visualization on map. In addition, WOT provides spatial query function, including landmark, address, coordinates and device name query; User can store interested sensing device, and can overlay related map layer information, such as wind field, traffic network information, then observe the changes in the environment.
MapTools - Dynamic Map（EPA only）
The sensing data space digitization results with dynamic changes in time to play to observe the proliferation of pollutants and its impact. User can choose the type of equipment, set the playback time, and then the sensing data space digitization is ready to play. The legend below shows time, weathercock and sensing information.
MapTools - Hot Zone（EPA only）
The spatial analysis results will be stored in the spatio-temporal database to identify the mesh of air quality pollution for a long time by using the characteristics of time and space. The result of the analysis that the mesh represent to the air quality indicators of brown or purple in the past month according to the cumulative length of time
Sensor Monitor
（EPA only）
You can view the previous values of each item of the installation, photos of the installation of environmental photos and interpretation information prepared by the EPD. As well as a line chart showing the concentration of a test item in the past three hours. The donut shows the stability of the transmission and the ratio exceeded. The bar graph of the AQI indicator for each hour in the past three hours is also displayed. Sensing data can also be exported.
Data Visualization
We used Tableau and put car volume, speed with map and speed, and air quality monitor station to understand and present the relation between traffic pollution source and air quality. These data are also used in the WOT for map overlay.
GO
Environmental Protection Administration White Paper Website
The project's goal is to visualize the effect of air quality and water quality policies in recent years. The project was on a short deadline and because there is no limit to the scope of the information, it was really a challenge for me. The hardest part was fusion design and communication issues from numerous chaotic information sources, and the challenge of telling a story with limited time and budget. I discovered the breadth and profundity of data journalism and data visualization during this time. This fascination convinced me to study and invest in information.
Information Architecture
This is the homepage. At first, I planned to use parallax scrolling to tell a story. Then I decided to enhance the interaction effect of the webpage and animation. Finally, I settled on simplicity.
The navigation page is the thorny and critical issue of the whole project. How do I let the public become aware of the improvement of environment but propagate policy simultaneously? This had puzzled me for a long time, but it became simple finally.
Infographic
In this part I worked with an artist. I was responsible for drawing drafts, while artists helped me with mockups. There were 9 infographics addressing both air quality policy and water policy, and they were showed after navigation page.
Interactive Charts
There were 30 interactive charts in the website. I originally intended to design different charts for each data set separately, but this idea was unrealistic on the given timetable. Thus I prioritized consistency for the charts: interactive maps with interactive linecharts.
GO
i-Environment Website
i-Environment provides all kinds of instant information on air quality, tap water quality, factories and stacks, potential landslides etc. You can search a location or let the system use your current location. All the data are from the EPA environmental resource database. i- Environment is the first government website designed for the Hybrid Web. It is developed using data visualization technology, which helps present reports, statistics, quantitative figures, and other information in a visual manner.
Interface Design
An interface with dashboards and interactive maps provides location-based services that allow users to easily browse and search the environmental information they need. In the left is the window that can fold and unfold. Users can click the button inside the window and see what happens in the right map.
GO
Interface Design Process
To combine maps with information is always my ultimate goal in many projects, because most of our data are spatial data. I hope to become a user experience designer and interface designer specialized in map design in the future. The following are the proposals that were not accepted by the client, but which I show for reference.
