by Kenji Wada—Data Viz UX/UI Visual Designer & Researcher
data visualization image
front-end development image
ui ux design image
ui ux design image

Data Visualization

UX/UI Visual Design

Front-end Development

GIS/Cartography


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

All Works

  • All Works
  • Data Visualization
  • UX/UI Visual Design
  • Front-end Development
  • GIS/Cartography
  • Design System 3
  • Design System 1
  • Design System 2
  • Design System and Component Library


    Collaborating with other UX designers at the Central Bank of the Netherlands, I contributed to building a design system, specifically focusing on the typography. I also played a role in creating several components, beginning with research on major design systems in the market.

    Figma
  • Internal(Banking) & External Applications 2
  • Internal(Banking) & External Applications 1
  • Internal(Banking) & External Applications 3
  • Internal (Banking) & External Applications


    I worked on a variety of internal (banking) and external application UX/UI designs for the Central Bank of the Netherlands. Most of the internal banking applications are designed to support supervisors in ensuring the stability and integrity of the Dutch financial system.

    Figma
  • Interactive Internal Manual
  • Interactive Internal Manual


    The aim of this project was to make it possible to update the internal ATM (Authorization, Transaction, and Monitoring) process manual, which had previously been outsourced. PowerPoint was chosen as the tool since most employees are familiar with it.

    Illustrator · PowerPoint
  • 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.

    Illustrator
  • 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.

    ArcGIS
  • 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
    works

    PhD

    • 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.

    · ·
    research
    publications

    Experience

    • 2024–Current Data Visualization UX/UI Designer & Researcher focusing on sustainable and active transportation - Freelance
    • 2023–2024t 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.

    Education

    • 2018-Current 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

    Profile

    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!

    about