Hi, my name is Simon!

 GitHub

I study Media Informatics with application on Human-Computer-Interaction at the LMU Munich.
I focus on web development and design, physical and digital prototyping, UX/UI, as well as concept and product development.
I would describe myself as a creative, curious, analytical, and detail-oriented developer and designer committed to understanding and realizing the holistic development process, from ideation, concept creation, prototyping, user studies, to both frontend and backend implementation, as well as testing and deployment. I combine the creative knowledge of a designer with the critical thinking of a developer, enabling me to collaborate more effectively and bring concepts to life. Scroll down to explore the cards that represent my work and topics I'm interested in.

Website

I like to design and create websites.

x/y
Media Design

I started freelancing in video and graphic design when I was 14.

x/y
"Meet" Prototype

Mobile application prototype following a UCD process.

x/y
Teaching

Some words
about my experience
as a tutor.

x/y
"Quarto" Game

Client with "C" and web application with "JS".

x/y
Music

My favourite recreational activity
is creating and
playing music.

x/y
Chrome Extension

Web Browser Extension:
Themes for university website.

x/y
Concept Development

Using practical research, analysis, ideation, and prototyping.

x/y
Rememory

Interaction- and physical prototyping a balloon game.

x/y
IoT: Security/Privacy

Connectivity mode control on smart home devices.

x/y
Website

My website is completely self-written in HTML, CSS, and quite some JavaScript.

It's influenced by the "Brutalism" design trend, embracing strong outlines, contrasting colors, and bold typography. With my design I tried to create something unique and frivol, opposing most modern web design trends. I started out by hand-sketching some ideas on my tablet, continued by creating a high fidelity prototype in AdobeXD, and eventually refined and coded my webpage.


I first got in touch with web development in my first semester at the LMU Munich. There I learned the initial basics of HTML, CSS, and JavaScript. I thoroughly enjoyed this field and designed and implemented some smaller projects early on (e.g.). Over time I gained a lot of advanced skills in this area and teaching and assisting the subject that comprises of web development one year later further deepend my knowledge which let me to effortlessly design and code responsive websites like the one you are on right now.

Media Design

I initially started back in 2014 by creating short 3D introduction animations for YouTubers. I uploaded my final projects on my own YouTube channel which I named "DiceFX", quickly gained attention, built a community, and started freelancing by selling my personalized designs as well as presets for creative software. Next to motion design I also focused on graphic design by creating logos, banners, thumbnails, etc. and sold them as well. I have now ceased creating 3D introductions due to YouTubers decline in demand but still continue with media design overall. In other projects, for example, I designed geographic filters for Snapchat, created a new logo for a small private pub, designed, printed and sold some posters for a kid's tv show and personally redesigned company logos. In another project I managed to easily work myself into a new software called Autodesk Maya and created this Low-Poly animation, and I'm able to apply my editing skillset to create Video-Prototypes like this. I'm now happy to have advanced skills in creative software like Adobe's Photoshop, After Effects, Premiere Pro, AdobeXD, and Maxom's Cinema4D and a profound understanding of design concepts. Have a look at some of my graphic designs:

"Meet" Prototype

"Meet is an app to connect people by joining other people on different activities. It offers users creating either their own event in which others can take part in or having the possibility to participate in events created by other users. Organisation is simplified by an integrated chat function to communicate with newly acquired friends."
In my third semester at the LMU Munich six other students and I came up with this idea for a mobile application and created a high fidelity protype while following a user centred design (UCD) process. You can read in my user experience report about this design process and the application. Keeping it short, we started by brainstorming and sketching out some ideas and created a design brief. Then we continued with wireframing in the software Miro and started prototyping in AdobeXD. Due to my background with Adobes software and my interest for UX-Design I contributed a lot into this project, came up with most ideas, guided the group as a leader and distributed tasks.
We continued with a usability heuristic evaluation, worked through a system checklist, iteratively improved our prototype, and concluded with an usability testing after which we once again refined our protoype. We finished our project with a short video presentation and a portfolio.

Teaching

Back in school I was always looking forward for presentations. I enjoyed standing in front of class and speaking about a subject that I am interested in. My teacher once told me after a good presentation "You have the skill when thoroughly undestanding a topic, you are able to teach it and enlighten others". He recommended me to pursue this skill in some way after school. In my third semester at the LMU Munich and after feeling confident with my knowledge in a course that I'd successfully passed the year before, I decided to apply for a Assistent/Tutor position in Digital Media. The content of this course is digitization, compression techniques with algorithms like huffman coding or LZW, chroma subsampling, video compression, audio editing, number systems, and webdevelopment with HTML, CSS, and JavaScript. My tasks where presenting the course content in weekly tutorials as well as creating and grading assignments. I really like giving tutorials, standing next to a whiteboard in front of students and conveying the subjects' content. Helping a struggling student or seeing them all understanding a complicated topic after I explained it to them and coming up with ideas on how to approach and teach a difficult subject matter where the things that made me enjoy being a Tutor and continue working as one in my next semesters.

"Quarto" Game

Quarto is a board game with 16 stones. Each stone has four attributes. The goal is to place the stone that you receive from your opponent in a row in which all share at least one common attribute. The opponent gets to choose the stone you place each turn.
Three fellow students and I programmed a client for that game as part of the course system programming. We coded in the language C and learned about system programming matters like pipes, sockets, protocols, client/server, scheduling, processes/threads, etc. I enjoy C a lot. It is low level, contrasting most other modern languages and I always feel like I "own" the computer when coding in C. I used Linux for this project of course. In fact I completely switched to Linux as my standard OS for 6 months for that project. I enjoy Linux and have it now installed on all my old laptops and on dual boot on my main computer. Because the server for the Quarto game (it was setup by university) didn't really have a proper GUI and I couldn't find any proper Quarto game online with a nice User Interface, I decided to unpack my web development skills and code the game as an application for browsers using Vanilla JavaScript in my spare time. My implementation allows you to play Quarto against the computer by dragging and dropping the stones to the gameboard. Next to creating a good-looking, intuitive UI, I focused on making the game experience feel real by having the player wait until the computer takes his turn. Having the drag and drop interaction instead of clicking should also make the game feel more real. The visibility of system status was also important for me. The user can always see what the computer is currently doing and what to do exactly when it's the player's turn. I also coded a simple AI which can be activated and lets you only ever "win" in form of a tie.
Check out the game and give it a try:


-> Play Quarto!

Music

When I was about 12 years old I taught myself to play the electric guitar, quickly made some progress and continued to play daily. I am now very experienced with string instruments, besides electric guitar I also play western guitar, ukulele, and classical guitar which I probably enjoy most. I also taught myself the piano when I was around the age of 17. It really helped me with visualizing the fretboard on guitar and understand why and how chords and scales work on other instruments.
What thrives me most in playing instruments is probably music theory. It is basically the language for music in the same way math is the language for physics. It explains why music works. Why some chord progressions sound good. Which ones make you feel sad, happy, lost, or mysterious. How to build chords that sound unexpeted and dissonant and still manage to make the chord melt to a minor cadence. It is really close to physics because a note, in the end, is nothing but an acoustic wave, a vibration that transmisses a medium like air. And chords are just interferences of multiple waves/notes. And simply by superposing certain notes to a chord and playing multiple chords in a specific sequence makes one feel a certain feeling. I find that very fascinating. This is music and music theory for me and what thrives me to continue playing instruments and further educating myself in that field.
Have a look at me playing:


-> Playlist

Chrome Extension

The main platform most students use at the University Of Munich is Uni2Work. During pride-season I noticed students talking about the fact that Uni2Work doesn't appear in a pride-theme with the typical rainbow flag as other websites do during that time. As Uni2Works' design is merely a rather monotonous green I decided to programm a general browser extension for chromium which lets users select different themes for this webpage including a pride-theme. After some research on how browser extensions work I finished programming "Uni2WorkThemes" and published the extension in the chrome web store for other students to use.
Short explanation: The popups' HTML is only displayed when the user is on the active tab *://*.uni2work.ifi.lmu.de/*, here the user can select the different themes. On every other website the extensions' popup, when clicked, displays "Go to Uni2Work". By clicking on the different themes a JavaScript file inserts the new CSS within a style-tag into the current HTML-header. The activated theme is then also stored in the browsers' local storage and retreived from different JavaScript files when opening and changing the theme in the popup, and when browsing on Uni2Work. Check out my extension on the chrome web store and see for yourself:


-> Uni2WorkThemes

Concept Development

In a two week practical course a team of five other students and me systematically elaborated an interaction-concept. Objective was to put the iterative User-Experience design-process into practice and work through its initial convergent and divergent phases. We started by conducting field research in form of multiple In-Context interviews (Contextual Inquiry) with companies in the sustainable-energy sector. We then sorted and interpreted this collected data via Affinity Diagramming, derived insights from clustered data, and continued with generating "How-Might-We"-Questions to translate the insights we had into ways we can tackle and solve this problem. Dr. Marin Zec then helped us in the ideation phase. He presented us design-thinking concepts, creative problem-solving ways, and guided us through the "Crazy-8", "6-3-5", and "SCAMPER" methods until we eventually had our concept idea which we then elaborated in storyboards and finally in a video-prototype. Our concept was a showerhead that indicates the time passed in the shower via a LED-strip which changes colour sequentially from green, to orange, to red. The time can be set with a compatible mobile app which lets the user set a absolute time for showering or a dynamic time based on the water temperature and flow rate. For the app-prototype seen in the final video, we used the software Figma. For the physical LED-strip on the showerhead we used a ESP8266. This microcontroller board has an integrated Wifi module to create a server that hosts a web page which we used to controll the LED-strip remotely. Check out this blog depicting this concepts' progress where you can watch the final video-prototype as well as further information about the user-research and concept:


-> Video-Prototype (Blog)

Rememory

Rememory is an auditory and visual memory game with balloons developed by a fellow student and me. Each player holds a balloon with a dedicated color and note, and stands in a circle around an "instructor" balloon. This balloon provides a sequence of colors accompanied by a note, corresponding with each color. The players goal is to match this sequence by squeezing their balloons as a team in the correct order. The Instructor balloon then indicates whether this sequence is correct or incorrect and either continues with a more complex sequence each round or gives the players another try.
My teampartner and me both own a 3D-printer and we iterated through multiple 3d-models until we came up with an airtight device that can be inserted into the balloons. This device holds all the required hardware that we soldered together. The hardware consists of a ESP32 microcontroller from XIAO, a passive buzzer, a pressure sensor, a neopixel jewel led, as well as a slide switch and a 3.7 volt battery. I programmed the hardware and implemented the game logic in Arduinos' C++. The code is based on a station-accesspoint-architecture with communication based on HTTP. You should really check out my awesome demo video for this project and let the interaction design speak for itself: (Oh, and the game is not mocked, it works flawlessly and is pretty refined, you can find the code on my GitHub profile)


-> Video-Prototype

ConnectivityControl

In a practical web develelopment course, a team of 16 people and me built "ConnectivityControl", a framework that allows users to switch between four device connectivity levels: Offline, Access Point mode, Local Network mode, and Online. The team was devided into a hardware-group, middleware-group, and software-group. I was part of the hardware-group and built a smart camera and an environmental sensing unit using multiple hardware-components, microcontrollers, Raspberry Pi's, Laser-Cutting, 3D-Printing, as well as programming the hardware and the interface with the middleware-group. This course taught me a lot about web programming: IoT, WoT, the HTTP and MQTT protocol, Web Analytics, Web Servers, API's, React, Captive Portals. All in a profoundly practical manner.
Check out my demo of ConnectivityControl as part of the hardware team:


-> ConnectivityControl Demo

YouTube Email LinkedIn

 YearJS Simon Rödig - All rights reserved