In reverse chronological order.
Whenever possible, I included Challenge, Solution and My role.
Many companies still deal with a lot of paperwork. German companies, especially. And it's not just informational material. Large paper forms are used as surveys or questionnaires. There are already form builders out there, but many of those lack a well-structured format to build upon. So when Dampsoft asked me to develop a tool that would allow them to digitalize a lot of documents very quickly, I knew that was a great challenge.
I created The Editor. The Editor allows to create complex documents in just minutes. It features drag and drop to put text and images into the right place. Form elements are used to capture user input. Single-choice and multiple-choice elements allow nesting further elements. That way, certain elements only show up when a particular answer has been selected. The editor supports multiple languages and creates a well-structured JSON description of the whole document in the end.
The document editor was a great project and Dampsoft an excellent client. I developed the app from scratch using React / Redux, embedded in a Rails app. After just 10 days, the first few people on the team started to create documents. Soon, the editor was widely used and a lot of user feedback arrived. That meant I was able to iterate quickly and to improve design, browser compatibility and performance.
Paragliding is a sport that requires well-chosen equipment. Most pilots choose their wing based on personal recommendation, but they also take a lot of time researching the internet for opinions, reviews, test reports and more. The only available comparison platform before was para2000.org, which was a great project, but it hadn't been up to date in terms of usability and mobile friendliness for quite some time.
Gliderbase.com closes that gap. Gliderbase combines publicly available paraglider data and normalizes it to create a searchable database, suited for comparison. So when pilots decide for a paraglider, they may now quickly pre-select a few models that fit their skill level, takeoff weight, color preference and more. Gliderbase has seen around 12.000 visitors after being online for around 6 months (Feb 2019).
Gliderbase is my first project as an independent developer. I'm using all the best tools I can find, including react, node, gatsby, emotion, redux. Also, I'm starting to partner up with people in the paragliding community to help me with the idea, the images, and the data.
How would you compose queries against a database in a visual, interactive way? What if all parts of the query are available as "concepts", organized in a tree structure? The great team at bakdata asked me to build a hand-tailored single page web app, which would rely heavily on drag and drop to compose queries and to execute them against an API backend.
Introducing: conquery. Using conquery, item trees can be explored, similar to your file system. The so called "concepts" in the tree vary in their degree of abstraction. This allows a user to ask queries in a very abstract manner, but also in great detail. To build a query, the concepts are dropped into a query editor, using AND/OR-connections. Results can be downloaded as a CSV file.
Over the course of 9 months, I worked part-time on the UX and React frontend, while my colleague Manuel crafted the Java backend. The clear responsibilities allowed us to move quickly in terms of functionality. After starting to work full-time at neXenio, bakdata hired three developers who continued improving the web app. Built for a great client at first, bakdata recently even managed to open source the frontend code!
What is not so great about the latest movie cinema websites? They're full of advertisement, which consumes all your mobile traffic, they take ages to load and still, they don't manage to deliver on the most basic requirement anymore: showing you, which movie runs when. For this particular cinema, I've asked 'why' in an email, but they never responded. So I had an idea.
Cinesimple is plain and simple. A site that shows you, which movie runs when, in a – ... wait for it ... – table! In this case, Cinesimple only covers my own favorite cinema. But it could be extended to various cinemas quite easily. It's optimized for pure information at the least possible distraction.
Most of the time, I've been eating popcorn, smiling and joyfully developing this idea as a tiny React app over the course of two days. Now it's automated. Every night, up-to-date movie data is fetched, a robot re-bundles the site and re-launches it. I've added IMDB and movie trailer links. Ever since then, I have been relying on Cinesimple for going to this cinema.
Sometimes you just want to play a game. As a frontend developer on OS X, I was missing the amazing experience back in the day, when minesweeper was available on the old Windows machines. Now, especially on OS X, minesweeper isn't available. I didn't want to search online, because I feared navigating through heaps of advertisement, cookie-consents, and you-don't-have-flash-installed banners. I had to build minesweeper myself.
Here you go. My own Minesweeper. Created with a lot of love, sound, and a level system in place that makes it almost addictive to play. Once I had shared it, it took half an hour for the first few friends to master the last level. They demanded for more. So I introduced more difficult levels. Which level can you beat?
Developing minesweeper with pure react was a walk in the park. It took me a day until I could publish it, then I improved it the next day. Most challenging was making it browser-compatible, mobile-compatible, and adding the double-click-to-sweep-expand feature.
When Wassily Kandinsky had been a lecturer at Bauhaus, he posed a questionnaire to his students. Do color and shape have a close aesthetic relationship? Does a certain shape afford to be filled with a certain color? But Kandinsky only asked a couple of students and seemed to validate his own prediction: yellow triangle, red square, blue circle. However, this had been the exact order he suggested the colors on the questionnaire sheet.
Kandinsky Questionnaire repeats the experiment. Closely modelled after the original questionnaire, the site allows participants to provide their gender, nationality and a rationale for their choice. Yet, since this is the web, the three colors are suggested in random order, eliminating the bias in Kandinsky's experiment. Responses so far are quite interesting and will be published soon.
For this rather simple 3-days project, I used the opportunity to polish my private React / Redux template for single page webapps. Finally I had some time to take care of it, which left me with a great oh-my-pencils-are-sharp-again kind of feeling. I even created a small node backend to capture people's responses, using express and sequelize + a postgres database. Even mocha unit tests!
Say you have a table of cities with a lot of properties per city, like weather, cost to live, population density, friendliness to foreigners. How can you explore this data to decide for your next vacation trip? Or maybe you have a list of users with a lot of KPIs. Maybe there are clusters in the data? But how to find out?
Introducing star-coordinates.com. Originally described by Kandogan, star coordinates is a visualization technique that maps points from a multi-dimensional space into a 2D-projection. The projection can be explored interactively by scaling and rotating the axes, which form a star in the beginning. I couldn't find any openly available version, especially no in-browser solution. So there you go. Try it out with your own CSV-files.
I implemented Star Coordinates with all recent hipster technologies: React, ES6, Redux, p5js, dat.gui, Papa Parse. Especially challenging was the interplay of the HTML canvas and GUI with a single-state redux app. I first prototyped everything and then added Redux to the mix.
Do you know that moment when you're pleasantly losing yourself in a task? You focus effortlessly. You proceed from task to subtask, to another task. Suddenly you wake up and you wonder: Wait, why am I doing this again? Your brain sometimes breaks down trying to break down a task? Time for clarity!
Introducing Amp Five. The pleasant todo app. When your brain is productive, beta waves are emitted with a low amplitude. Amp Five helps you reach your goals by creating cards that can be broken down into subcards. Infinite hierarchy. You can mark cards as in progress, or as complete, drag & drop them, and undo any action.
Amplitude five is my first experiment with React and Redux (ES6, a little bit of Express, lots of flexbox) and I have to say I'm delighted with the developer experience. I had to deal with hierarchical data structures, route management, usability.
Some friends and I were having a barbecue on a huge green area in Berlin and I was asking naively: hey, was this east or west Berlin? One of my friends instantly claimed to know the answer - 'West, of course!'. But we had no way to check.
That's why I created west-or-east-berlin.com. It's a mobile website that shows you whether you're in the former west or east of the Berlin wall. In order to decide that, of course, you will have to allow access to your current location in your mobile browser.
I implemented the site with Rails (to check the locale on server-side for better SEO). Getting the former wall coordinates was actually the toughest part. Then, in Javascript, I just draw polylines in Google Maps. Using the browser location, once you're close enough to the center of Berlin, I check if you're inside the polygon, which means: West.
At Goodpatch one of our products is a prototyping tool called Prott. We needed a blogging platform to provide our users with product news, features and other intersting information related to prototyping.
It's live! blog.prottapp.com Since we didn't like wordpress, we set out to try something new. The solution is a multi language (Japanese | English) blog based on prismic.io. You can browse the lastest articles, filter by category, see the post's author and share. See more details in a blog post I wrote.
We started sketching together and Kinugawa-san created the design in photoshop. The coding (front-end in Coffeescript, Sass and Jade, back-end in Rails) was done by me. I used prismic.io as the "database" and CMS for this blog.
Within the Stanford ME310 course, student teams accross different global universities participate to solve a design challenge posed by a partner company. Many projects include Stanford students (ME310 projects), some only students from global universities (SUGAR projects). SUGAR needed a website.
The website has gone live recently. It features SUGAR introduction, university presentations, past project and a photo gallery.
While the design was done by Maria Solovjew and Christine Thong, I was responsible for the implementation in Rails, using Foundation 5.
I'm learning japanese, so there is a ton of vocabulary I want to learn in the fastest way possible. I needed a system that simply asks me for a word and repeats wrong words at the end until I typed them all correctly at least once.
So I built Vocab Training, which is a Rails website that does exactly that! It even tracks how much time I've spend on every word as well as how often I've trained and failed at it. The data is then visualized as statistics with graphs.
I finally refreshed my Rails knowledge! The UI is written in coffeescript and I used Flots, which is an awesome plotting library for jQuery. You can add and edit your own word lists, it's all public!
Pie menus have inspired me since the computer game Silver. So I created a basic js version of one. Still unsure, what to do with it.
I built an adjustable particle system with funny physics to play around with. A click creates a particle on the screen.
Sparkling dots is my first exploration from my pursuit to create a feeling of speed. This doesn't move the view yet, but already creates some sparkling. More updates soon!
The Berlin-based startup company GameOn aspires to build a game center in Berlin, inspired by those in Japan. They let me build a 3D model according to their floor plan of their hopefully soon to build center.
GameOn will soon start a crowdfunding campaign. For some of the renderings of the final model, see their homepage.
I created various chairs, a bar, couches, a meeting room and learned how to handle a huge amount of objects in one 3D model. The work was done in about one week working time. It was great fun to use my 3D modelling hobby in a commercial project for the first time!
How to do fast prototyping without having to wait for a 3D printer to print big models? Answer: Build as much as you can with Lego! But how to find the right Lego layout for a given 3D Model?
Starting with 1x1 bricks from a voxelized 3D model, I created an algorithm inspired by Testuz. The algorithm first calculates an initial layout and tries to optimize from then on, fixing any overhanging or weak bricks. It even considers bricks of different heights in the same model (Lego plates).
About five people from my university participated in this project, with different focus points. My job was to find a layout algorithm, that would create a stable and buildable Lego grid from a voxelized 3D model. I wrote it entirely in Coffeescript and collaborated a lot with Tobias, who built the framework around the web application.
ME310 is a very special product design and engineering course tought at Stanford University. Working together with 3 students from Aalto University and 4 students from Kyoto Institute of Technology, we had the challenge to reinvent advertising.
Our corporate partner for this project was the Finnish game development company Rovio Entertainment. They are mostly known for their very successful mobile game Angry Birds and many other related games. Advertising for them provides great challenges and opportunities.
Our solution is a new advertising concept: Choose your sponsor. It replaces traditionally pushed advertising by pull. People want to engage with their favorite brands and share that with their friends, you just need to give them the opportunity to do so. We developed an App to test this concept: PULSE, a sponsored event platform. See more in this video.
When building our final prototype, I was responsible for the iOS development of our PULSE app. Like every team member, I was working by the design innovation process, that includes iterative brainstorming, prototyping and testing. In addition, this course changed my life and way of thinking.
You probably know the time when you have to write that boring report? The super-long research paper? Your master's thesis? Writing certainly can be fun sometimes, but to me it felt boring too often, so I wanted to create a motivational tool.
Paper-Motivator will analyze your text from various formats (.txt, .pdf, .md and .docx) and create statistics, progress bars, and a fun word cloud from it. You can share those with your friends. You might even receive an email when someone hits the cheer-up button!
I wrote a python script for text analysis and created a rails website with visualizations done in processing.js sketches. The best part: It's all open source on Github! Set it up yourself and drop me some feedback!