Hi, I'm Kristin Baumann.

Senior Frontend Developer - DataVis Lover

About Me

Hi, I am a Senior Frontend Developer with 5+ years practical experience in creating web applications. My Computational Visualistics studies provided me with a profound computer science background and let me discover my passion for anything visual in our digital world. Thus I like to build beautiful modern web applications or code complex data visualisations. In terms of tech I am specialised in React JS about which I share my knowledge as a speaker at conferences. Nevertheless my interests go beyond coding, as I like to shape digital products by developing concepts, designing interfaces and testing with users. I am currently living in Berlin, Germany.

Resume

  • HomeToGo GmbH

    • in Berlin (Germany)
    • May 2017 - present

    Product Design & Prototyping Manager

    • Building prototypes to assess the feasibility and define the style and interaction of new product ideas
    • Conducting UX research in order to test and improve prototypes and the live product
    • Applying design thinking to shape processes including the close collaboration of designers, developers and product managers
    • Technologies: ReactJS, HTML5, CSS3, Sketch, Invision

  • 8 Bit Rockstars | Powering NFQ Group

    • in Ho Chi Minh City (Vietnam)
    • June 2016 - January 2017

    Senior Frontend Developer

    • Realisation of startup projects as frontend tech lead
    • Implementation of universal / isomorphic React web applications
    • Technologies: ReactJS, HTML5, CSS3, ES6, SASS, Webpack, Scrum

  • Small Multiples

    • in Sydney (Australia)
    • Sept 2015 - Jan 2016

    Data Visualisation Developer

    • Implementation of Single Page Web Applications with feature-rich data visualisations
    • Attention to mobile optimisation and cross-browser compatibility
    • Technologies: JavaScript, D3.js, CoffeeScript, ReactJS, React Native, Leaflet, Mapbox, Gulp

  • Research Campus STIMULATE

    • in Magdeburg (Germany)
    • Feb 2015 - May 2016

    Research Assistant

    • Academic research on the visualization of cerebral vessels with focus on the vessel walls, for the improvement of diagnosis and risk analysis of cerebrovascular diseases (e.g. aneurysms or stroke)
    • Research results summarized in my Bachelor Thesis: "Multiple Linked Views for the Exploration of Optical Coherence Tomographic Image Data to Evaluate the Cerebral Artery Wall"
    • Technologies: Matlab
    • in Magdeburg (Germany)
    • Apr 2013 - June 2015

    Freelancer (Web Development)

    • Planning, designing and implementation of web sites and online shops
    • Requirements engineering in close collaboration with clients
    • Technologies: HTML5, CSS3, JavaScript

  • Marmalade GmbH

    • in Magdeburg (Germany)
    • Sept 2013 - Mar 2015

    Student Trainee (Web Development)

    • Development of static websites and enhancement of web shop systems (Oxid, Magento)
    • Technologies: HTML5, CSS3, JavaScript, PHP, Symfony

  • Otto-von-Guericke University

    • in Magdeburg (Germany)
    • Oct 2013 - Feb 2014

    Graduate Teaching Assistant

    • Tutor for “Introduction to Computer Science” lecture
    • Technologies: Java

  • Otto-von-Guericke University

    • in Magdeburg (Germany)
    • Oct 2012 - Apr 2016

    Bachelor of Science in Computational Visualistics

    • Interdisciplinary Computer Science course with special focus on computer graphics and visualization in the application area medicine
    • Courses (excerpt): Mathematics, Algorithms and Data Structures, Databases, Software Engineering, Project Management, Computer Graphics, (Medical) Visualization
    • Final Score: 1,2 (very good)
    • Scholarship: Friedrich Naumann Foundation for Freedom
    • Technologies: Matlab, Java, C++, MySQL, Scrum

  • Product Design & Prototyping Manager

    @ HomeToGo GmbH

    in Berlin (Germany)

    May 2017 - present

    • Building prototypes to assess the feasibility and define the style and interaction of new product ideas
    • Conducting UX research in order to test and improve prototypes and the live product
    • Applying design thinking to shape processes including the close collaboration of designers, developers and product managers
    • Technologies: ReactJS, HTML5, CSS3, Sketch, Invision

  • Senior Frontend Developer

    @ 8 Bit Rockstars | Powering NFQ Group

    in Ho Chi Minh City (Vietnam)

    June 2016 - January 2017

    • Realisation of startup projects as frontend tech lead
    • Implementation of universal / isomorphic React web applications
    • Technologies: ReactJS, HTML5, CSS3, ES6, SASS, Webpack, Scrum

  • Data Visualisation Developer

    @ Small Multiples

    in Sydney (Australia)

    Sept 2015 - Jan 2016

    • Implementation of Single Page Web Applications with feature-rich data visualisations
    • Attention to mobile optimisation and cross-browser compatibility
    • Technologies: JavaScript, D3.js, CoffeeScript, ReactJS, React Native, Leaflet, Mapbox, Gulp

  • Research Assistant

    @ Research Campus STIMULATE

    in Magdeburg (Germany)

    Feb 2015 - May 2016

    • Academic research on the visualization of cerebral vessels with focus on the vessel walls, for the improvement of diagnosis and risk analysis of cerebrovascular diseases (e.g. aneurysms or stroke)
    • Research results summarized in my Bachelor Thesis: "Multiple Linked Views for the Exploration of Optical Coherence Tomographic Image Data to Evaluate the Cerebral Artery Wall"
    • Technologies: Matlab

  • Freelancer (Web Development)

    in Magdeburg (Germany)

    Apr 2013 - June 2015

    • Planning, designing and implementation of web sites and online shops
    • Requirements engineering in close collaboration with clients
    • Technologies: HTML5, CSS3, JavaScript

  • Student Trainee (Web Development)

    @ Marmalade GmbH

    in Magdeburg (Germany)

    Sept 2013 - Mar 2015

    • Development of static websites and enhancement of web shop systems (Oxid, Magento)
    • Technologies: HTML5, CSS3, JavaScript, PHP, Symfony

  • Graduate Teaching Assistant

    @ Otto-von-Guericke University

    in Magdeburg (Germany)

    Oct 2013 - Feb 2014

    • Tutor for “Introduction to Computer Science” lecture
    • Technologies: Java

  • Bachelor of Science in Computational Visualistics

    @ Otto-von-Guericke University

    in Magdeburg (Germany)

    Oct 2012 - Apr 2016

    • Interdisciplinary Computer Science course with special focus on computer graphics and visualization in the application area medicine
    • Courses (excerpt): Mathematics, Algorithms and Data Structures, Databases, Software Engineering, Project Management, Computer Graphics, (Medical) Visualization
    • Final Score: 1,2 (very good)
    • Scholarship: Friedrich Naumann Foundation for Freedom
    • Technologies: Matlab, Java, C++, MySQL, Scrum

Portfolio

Walking the Berlin S- & U-Bahn Network
Walking the Berlin S- & U-Bahn Network
Data Visualisation
Close-up view of the lines with the walking distance numbers
Horizontal bar chart showing the total walking distance per line

Walking the Berlin S- & U-Bahn Network

Technologies: React JS (with react-sketchapp) & Sketch for visualisation, NodeJS for data cleaning
  • Personal data vis project, inspired by commuting through Berlin
  • Map highlights the time it takes to walk between the stations of Berlin’s vast S- & U-Bahn network
  • Distances calculated with the Google Maps Matrix API
Try Out
App Store Image Generator
App Store Image Generator
Automatisation
Automatic generation of localised app store images in Sketch with react-sketchapp
Sketch file generated from React components
For iTunes Connect and Google Play Store

App Store Image Generator

Technologies: React JS (with react-sketchapp), Sketch
Source code: https://github.com/kristinbaumann/app-store-image-generator
  • New app screenshots? Don't update all app images manually! Update all app images for all locales in an instant by generating them in Sketch automatically!
Try Out
React Sketchapp Starter Kit
React Sketchapp Starter Kit
Tool
Render React components into Sketch

React Sketchapp Starter Kit

Technologies: React JS (with react-sketchapp), Sketch
Source code: https://github.com/kristinbaumann/react-sketchapp-starter-kit
  • Initial setup for a React sketch.app project (render React components into sketch)
  • Used as base for the App Store Image Generator and Berlin Network Map project (also shown in the portfolio)
Try Out
Landing Page for React Hackathon
Landing Page for React Hackathon
Responsive Website
Fullscreen jumbotron as eye catcher at the top
More information about the event with text, countdown component and image slider

Landing Page for React Hackathon

Company: 8 Bit Rockstars | Powering NFQ Group
Role: Design & Implementation
Technologies: React JS, Sass, Webpack
Source code: https://github.com/kristinbaumann/reackathon
  • Landing Page for the first React Hackathon in Vietnam
  • Fast development using React Landing Page Components from neal-react
  • Created fully responsive design
EveryStay
EveryStay
Responsive Single Page Application
Fully responsive React Single Page Application
Start page - let's search for a location or property name
Detail page - find all information about a property
Searching and filtering on tablet
Searching and filtering on mobile
Let's book a house for the next holiday

EveryStay

Company: 8 Bit Rockstars | Powering NFQ Group
Role: Frontend Tech Lead
Technologies: React JS (Universal Rendering), Redux, NodeJS, Sass, Bootstrap, Webpack, Karma, Mocha
  • Vacation rental listing and booking website
  • User can search for a location & filter the results
  • Details of properties are displayed with images and maps
  • Property owner can be contacted by submitting booking requests
  • Fully responsive with a desktop, tablet and mobile version
  • Implemented as a server-side rendered React Single Page Application
Try Out
Bachelor Thesis
Bachelor Thesis
Research Project
VesselWallExplorer GUI with 3D vessel visualisation & associated OCT slice.
Anatomy overview of the Circle of Willis (main part of the cerebral circulation).
3D visualisation of the Circle of Willis.
Color coding of evaluation parameters on the 3D vessel model.
Optical Coherence Tomography slice with highlighted inner and outer vessel wall.

Bachelor Thesis

Title: Multiple Linked Views for the Exploration of Optical Coherence Tomographic Image Data to Evaluate the Cerebral Artery Wall
Responsibility: Research, Data Processing, Algorithm Development, UI Design, Implementation, Evaluation
Technologies: Matlab & Math, Math, Math
  • Bachelor Thesis written during my time as research assistant at the Research Campus STIMULATE & Department of Simulaton and Graphics at University Magdeburg, Germany
  • Academic research on the visualization of cerebral vessels with focus on the vessel walls
  • Result: Interactive 3D visualization of a major component of the cerebral circulation to evaluate vessel radius and vessel wall thickness
  • Purpose: Improvement of the diagnosis and risk analysis of cerebrovascular diseases (e.g. aneurysms or stroke)
  • Background: recently enhanced imaging method Optical Coherence Tomography allows acquisition of the brain vessels, first project with this data visualised in 3D with meaningful parameters
  • Steps:
    1. Data Processing from OCT images
    2. Building of a 3D model of the Circle of Willis (Major component of the cerebral circulation)
    3. Color-coded mapping of evaluation parameters on model
    4. Evaluation
Read thesis
The Sleep Factor
The Sleep Factor
Data Visualisation
Vis 1: Start the sleep evaluation
Vis 1: Positive result of the sleep evaluation
Vis 1: Negative result of the sleep evaluation
Vis 2: Clock showing body temperature and melatonin and cortisol level per hour

The Sleep Factor

Company: Small Multiples
Client: The Guardian & Philips
Role: Frontend / Datavis Developer (Implementation)
Technologies: CoffeeScript, Backbone, Underscore, Jade/Pug, Stylus, Gulp
  • Two interactive applications that provide information and tips for a better sleeping behaviour
  • Visualisations as part of the article "The Sleep Factor: Setting the Clock for Performance" by The Guardian
  • Visualisation 1: Evaluation of the restfulness of sleep by duration, time distribution (sleep during day or night) and completed sleep cycles
  • Visualisation 2: Clock showing the body temperature and the melatonin and cortisol level per hour and the consequences for a good sleep
Try Out
Green Grid
Green Grid
Data Visualisation & Mobile Website
User selects start and end location with auto suggestions.
Initial route suggestion.
User can add and remove parks from route to change detour duration.
Walking route with directions, map and info like distance, steps and CO2 savings.
Walking directions.
Map showing the walking route, the park coverage, tree canopy, playgrounds, fitness stations, ...

Green Grid

Company: Small Multiples
Client: NSW Government Architect's Office (Australia)
Role: Frontend Developer (Implementation)
Technologies: CoffeeScript, Backbone, Underscore, Jade/Pug, Stylus, Gulp, Mapbox
  • Mobile web application allowing users to plan their pedestrian way through Sydney by crossing parks and green spaces
  • Goal: help Sydneysiders to improve their quality of life by walking through park areas instead of taking the big main roads
  • User selects start and end location, then receives way suggestions with parks on the route
  • Includes a map with information like tree canopy, play grounds and fitness stations
Try Out
Homelessness in Australia
Homelessness in Australia
Data Visualisation & Responsive Website
Hero Image "Without A Home".
Hexagon map showing increase (yellow) or decrease (blue) of homelessness per region.
Popup of a region in the hexagon map.
Dot density map showing the geographical distribution of homeless people.
Data Story Telling.

Homelessness in Australia

Company: Small Multiples
Client: FactFile ABC News (Australia)
Role: Frontend / Datavis Developer (Implementation)
Technologies: CoffeeScript, Backbone, Underscore, Jade/Pug, Stylus, Gulp, D3.js, Mapbox
  • Visualisation and explanation of research results about homelessness in Australia
  • Showing the geographical and demographic distribution and increasing factors
  • Single Page Web Application with a hexagon and a dot density map and more charts (built with D3.js and Mapbox)
Try Out

Skills and Techniques

Programming

  • 5+ years practical experience in developing web applications
  • Advanced experience in HTML5, CSS3 & JavaScript
  • Proficient experience in JavaScript Frameworks React
  • Familiar with ECMAScript 6 & Node.js
  • Experience in designing and developing data visualisations with D3.js, Leaflet & Mapbox API
  • Knowledge of CSS Frameworks Bootstrap & Foundation
  • Understanding of CSS Preprocessors (SASS, LESS)
  • Understanding of Java, Matlab, C++, MySQL & PHP
  • Familiar with frontend unit tests with Mocha & Karma
  • Understanding of frontend build tools Webpack & Gulp
  • Familiar with OOP, REST, HTTP, MVC

Software & Product Development

  • Advanced knowledge of UI / UX design, general design principles and Gestalt principles
  • Extensive experience with prototyping to test the feasibility and define the style and interaction of new product ideas
  • Proficient in UX research and conducting usability tests
  • Familiar with responsive web development, mobile optimisation & cross-browser compatibility
  • Experience with agile software development
  • Understanding of version control system GIT

Speaking Experience

Soft Skills

  • High level of proactivity, self-motivation & ambition
  • Very good communication & presentation skills
  • Strong collaboration skills across disciplines with designers, developers and product managers
  • Team player with leadership qualities

Blog Posts