by Kenji Wada - UX/UI Designer, Researcher & Developer
data visualization image
front-end development image
ui ux design image
ui ux design image

UX/UI Visual Design

Front-end Development

Data Visualization


zivatad aims to solve complex social and business issues by utilizing these four skills

All Works

  • All Works
  • UX/UI Visual Design
  • Front-end Development
  • Data Visualization
  • GIS/Cartography
  • Vitality Map Visualization 1
  • Vitality Map Visualization 2
  • Vitality Map Visualization

    Investigating the effectiveness of web cartography to support vitality-related projects, a web map application based on Node.js with JavaScript libraries—D3 and Leaflet, was developed for an experiment.

    HTML · CSS · JavaScript · Angular · D3 · Leaflet · ArcGIS · QGIS · R · Illustrator · Sketch github link
  • Vught Data Dashboard 1
  • Vught Data Dashboard 2
  • Vught Data Dashboard 3
  • Vught Data Dashboard

    This proposed dashboard design shows demographic data for the city of Vught (NL). I used a prototyping app, Sketch, to design the prototype.

    Illustrator · Sketch · ArcGIS · QGIS · R
  • Data System for VLL 1
  • Data System for VLL 2
  • Data System for VLL 3
  • Data System for VLL

    Data curation application related to vitality designed for the VLL (Vitality Living Lab) project. The top page shows all publicly available datasets. Authentication functions are developed based on Node.js and MongoDB (database). Individual dataset pages provide more tools such as overlaying maps. Profile pages after logging in are not developed (digital prototypes).

    HTML · CSS · JavaScript · D3 · Leaflet · ArcGIS · QGIS · R · Illustrator · Sketch · InVision github link Project Overview   
  • Data Visualization Assignment
  • Data Visualization Assignment

    This data visualization was created for a part of the recruitment process at a payment company by using R and Sketch app for cleaning up. An online version was also developed separately by D3.js.

    D3 · R · Sketch · HTML · CSS · JavaScript github link
  • Project Mapper 1
  • Project Mapper 2
  • Project Mapper

    Project Mapper shows major transportation projects in the San Francisco Bay Area with several different aspects such as cost, duration and geographical extent. Starting with data collection, I took charge of the entire process of production from ideation to development for MTC (Metropolitan Transportation Commission). ESRI's ArcGIS and GDAL's ogr2ogr are mainly used for the creation of geographical data for the web (GeoJSON) as well as R for exploratory data analysis. D3.js and Leaflet (JavaScript libraries) are used to make data visualizations on this application.

    HTML · CSS · JavaScript · D3 · Leaflet · ArcGIS · R · Illustrator · Photoshop github link
  • Transit Diagram
  • Transit Diagram

    This is the project to redesign the transit diagram to promote transportation in the San Francisco Bay Area by showing its network and connectivity. The diagram was designed by extracting data from the old transit diagram and updating it discussing with internal planners and local agencies.

  • Tenderloin and SOMA 1
  • Tenderloin and SOMA 2
  • Tenderloin and SOMA 3
  • Tenderloin / SOMA

    A Series of data visualizations about the neighborhood of Tenderloin and SoMa (South of Market) was designed to communicate the necessity of improvements there to various audiences including citizens. Original data visualizations were created by using ArcGIS and R. Then, Illustrator was used to cleaning up and organize all visualizations.

    Illustrator · ArcGIS · R · Photoshop
  • New Wave of Bikeways 1
  • New Wave of Bikeways 2
  • New Wave of Bikeways

    This web map application shows survey results from citizens in San Francisco to ask where they need new bike paths as well as which bike paths have to be improved.

    HTML · CSS · JavaScript · D3 · Leaflet · ArcGIS · R github link
  • Info Graphics for Outreach 1
  • Info Graphics for Outreach 2
  • Info Graphics
    for Outreach

    These infographics were created to advocate the improvement of streets for safer biking by using R, ArcGIS, Illustrator, and Photoshop.

    Illustrator · ArcGIS · R · Photoshop
  • Information Designs 1
  • Information Designs 2a
  • Information Designs 2b
  • Information Designs 3a
  • Information Designs 3b
  • Information Designs 4a
  • Information Designs 4b
  • Information Designs

    Variety of information designs done for courses at San Francisco State University. Most of works has done by the combination of ArcGIS, R, Illustrator, and Photoshop.

    Illustrator · ArcGIS · R · Photoshop
  • Bike Share Poster
  • Bike Share Poster

    Data visualizations and information graphics about Bike Share designed for Information Design course at San Francisco State University. R is used for making data visualizations and Illustrator for cleanup and layout the visualizations. The shape of a bicycle is used as a frame/grid to layout the visualizations.

    Illustrator · ArcGIS · R · Photoshop
  • Cartographies 1
  • Cartographies 2
  • Cartographies 3
  • Cartographies

    Several cartographies were created for various projects by using ArcGIS and Illustrator.

    ArcGIS · R · Illustrator
  • Spatial Analysis 1
  • Spatial Analysis 2
  • Spatial Analysis

    Examples of spatial analysis (slope analysis, hillshade, and network analysis) done for several projects.

    ArcGIS · R · Illustrator
  • Commute Patterns
  • Commute Patterns
    SF Bay Area

    This is an experimental project done by using mainly ArcGIS. I was asked to visualize communicating patterns in the San Francisco Bay Area based on a survey data. The survey data contained zip code of respondents’ homes and also their work locations.

    ArcGIS · R · Illustrator
  • Bayview Development
  • Bayview Development

    For a massive development plan in the neighborhood of Bayview in San Francisco, I compiled GIS data received from many different sources. The compilation of GIS data was also exported in a way that non GIS users are also able to use (Adobe Illustrator format with separate data layers).

    ArcGIS · Illustrator
  • Biodiversity GIS Data 1
  • Biodiversity GIS Data 2
  • Biodiversity GIS Data 2
  • Biodiversity GIS Data

    Looking at parcels in the city, I created the GIS data (shapefiles) showing potential habitat (unused land) by using ArcGIS collaborating with the other intern for the Department of Environment in San Francisco.

  • GIS Inventory 1
  • GIS Inventory 2
  • GIS Inventory 3
  • GIS Inventory

    This is a project to design and develop an internal inventory of GIS datasets for MTC (Metropolitan Transportation Commission). To make the search easier, Google-like simple search window was considered with the implementation of the tag clouds to see the popular datasets.

    HTML · CSS · JavaScript · Illustrator · Photoshop github link
  • Account Pages for Video Streaming Service 1
  • Account Pages for Video Streaming Service 2
  • Account Pages for Video Streaming Service

    These account pages were designed and developed (only front-end) for a video streaming service. These pages include users' profiles, albums users created, and videos users own with several functions such as sort, order, filter, and upload videos.

    Sketch · InVision · Zeplin · Illustrator · Photoshop · HTML · CSS · JavaScript
  • Affiliate Management
  • Affiliate Management

    Affiliate management pages are designed and developed for users to see the income through an affiliate with a video streaming service.

    Sketch · InVision · Zeplin · Illustrator · Photoshop · HTML · CSS · JavaScript
  • Landing Pages
  • Landing Pages

    Several landing pages were designed and developed to increase the member of a video streaming service, which communicate about the service and the benefit of becoming a member.

    Sketch · InVision · Zeplin · Illustrator · Photoshop · HTML · CSS · JavaScript
  • Website Renewal 1
  • Website Renewal 2
  • Website Renewal

    This project is to renew an outdated Japanese media website. The new design was proposed by hearing the client’s requests (e.g. modern looking and accessibility of information on the website) and then developed.

    HTML · CSS · JavaScript · Illustrator · Photoshop
  • Commemorative Project
  • Commemorative Project

    This poster is a final project for a design (typography) course at San Francisco State University. Miriam Makeba was (randomely) selected as a person to commemorate and promote by using various media including this poster.

    Illustrator · Photoshop
  • ID Redesign
  • ID Redesign

    This graphic is an assignment for a design (typography) course at San Francisco State University. Information on a passport was used as a source, and the information there was recomposed.

    Illustrator · Photoshop
  • Logo Designs
  • Logo Designs

    Although it is not the main work, I like logo designs, which communicate messages with minimum visual elements.

    Illustrator · Photoshop
  • Photo Book 1
  • Photo Book 2
  • Photo Book 3
  • Photo Book 4
  • Photo Book
    (Personal Project)

    This book is a personal editorial design project using Adobe InDesign and Photoshop.

    InDesign · Illustrator · Photoshop


    • PhD
    • Master

    Exploring a Map-Based Visualization to Raise Awareness of the Various Perspectives in Vitality among Different Domain Experts

    Despite the increase interest in collaboration and human factors in visualization, empirical studies taking both subjects into consideration simultaneously in visualization research are still limited. My PhD research aims at exploring factors for collaboration in information visualizations among users with different expertise.

    Awareness is hypothesized as a factor to enhance collaboration by communicating the perspectives of subject matters through information visualizations. Especially, the awareness of information is considered on a map-based visualization containing multiple datasets related to the concept of vitality.

    A qualitative research approach is primarily applied throughout my research to understand the target users and their requirements in depth. Consequently, this research aims to contribute to the fields of Information Visualization and Computer-Supported Cooperative Work (CSCW) by providing empirical evidence regarding factors which enhance collaboration with respect to data analysis through data awareness.

    · ·


    • 2023–Current UX Designer - De Nederlandsche Bank
    • 2015–2018 Visual (UX/UI) Designer, Front-end Developer and GIS Analyst/Cartographer - Freelance
    • 2014–2015 Visual Journalist - Metropolitan Transportation Commission
    • 2013–2014 Community Outreach (Intern) - San Francisco Bicycle Coalition
    • 2009–2011 Product Development - BE-S Co., Ltd.


    • 2018-2022 PhD Candidate in Industrial Design - Eindhoven University of Technology
    • 2011-2014 MA in Industrial Arts (focus in Visual Communication) - San Francisco State University
    • 2004-2007 BA in International Communication (focus in Chinese Language) - Kansai Gaidai University


    Hello, my name is Kenji.
    I am very interested in solving complex social and business issues through visual design. To achieve this, I utilize UX/UI design, data visualization, GIS/cartography, and Front-end Development, which I specialized in.
    Please feel free to drop me a line if you have any interesting projects!