about
projects
contact
carl.dobrovic@columbia.edu
CLOSE MENU

Karlo Dobrović

product,
dev,
film.

PROJECTS
SCROLL
TO DISCOVER

Hey! I'm Karlo Dobrović, a 2022 graduate of Columbia University majoring in Computer Science. I am the co-founder of Light RFP (lightrfp.com), a startup aiming to vastly improve the procurement process.
‍
In the past couple years, I worked as a Frontend Developer at Five Agency in Zagreb, Croatia, a Software Engineering Intern at HBO Max, and as a Product Management Intern at True Footage, a real estate tech startup.

Earlier in my school career, I was Head of Engineering at the Columbia Daily Spectator media company, where I led a team of thirty developers and product designers to develop our news platform and community-focused apps. In addition to my interests in software, I have over four years of experience writing, directing, producing, and editing films and VFX projects.

Please take a stroll through a selection of my projects.

Powerful and intuitive software. Compelling stories.

Tech Projects
MOBILE BANKING

plato money

NEWSPAPER WEBSITE

columbia daily spectator

STUDENT HOUSING SITE

the shaft

UI DESIGN CLASS FINAL PROJECT

musely

SUMMER INTERNSHIP

vyond animation
project

Film Projects
ENVIRONMENTAL DOCUMENTARY

making a difference

NOIR x VFX EXPERIMENTAL

check mate

HALLOWEEN THRILLER

necromancy

MOCK CAMPAIGN AD

clear 2016

INTERESTS
SOFTWARE ENGINEERING
PRODUCT DESIGN
Creative direction / writing
product management

Software Engineering

I started studying Computer Science in my Sophomore year at Columbia. After joining Spectator soon thereafter, I was introduced to the world of real-life software development. At Spectator, I have garnered significant experience in full stack development with technologies such as React, Node.js, SQL and MongoDB, Docker, and React Native / mobile development. As the Head of Engineering, I oversaw the architecture of our news platform and apps and guided the collaboration between our product design staff and engineering staff. I also coordinated with other leaders in the Spectator organization such as marketing and journalism to smoothly deploy and maintain our products.

Through my coursework in the Computer Science department, I have learned a lot about Object Oriented Programming in Java, C, and C++. The Advanced Programming I took introduced me to systems programming and had me develop a network server from scratch in C.

Product Design

Stemming from my interests in cinematography and VFX, I have developed a passion for creating a user experience from a technology standpoint. In fall 2019, I took a User Interface Design course that taught me about design heuristics, theories, and best practices. For my final project, Musely, I had to incorporate all of the techniques we learned over the semester (and those I picked up at Spectator and my summer internship) to conduct the design iteration process rigorously.

I'm fascinated by the degree to which the quality of a design can make or break a product and the techniques developed over decades to distill the elements behind good design. Much like good storytelling, good design is clear, concise and coherent to the user. I aim to learn more about advanced user testing techniques to enhance my design workflow.

Creative Direction / Writing

I love words. In fact, I keep a personal dictionary of my favorite words that I come across that's now some few hundred entries large. Words matter to me so much because they pack experiences into a neat box, ready to be put together for consumption. Elucubration, phantasmagoria, verklempt, I could go on. I have written a number of scripts for short films, the one I'm most proud of being "Necromancy". Over the years I have been refining how I reflect on my work and refine my skills for new projects. I think designing the core experience of a creative work must come from a place of humility, introspection, and curiosity.

Beyond just the essential writing, I like leading teams to guide production—film or tech. I like thinking about the little details that might otherwise be overlooked. I have lead teams of thirty and larger on long-term projects, coordinating efforts for one larger vision. The feel of a project, film or tech, is essential to me because it's the primary tool the user has to evaluate whether they like it or not. I put a lot of effort into figuring out why something works or doesn't work and then getting the overall team on board.

Product Management

To me, Product Management is about building businesses. As I have matured in my career over the past few years, I noticed more and more parallels between producing and pm-ing.

Stakeholder relationships, for example, are crucial to a successful product, and I have expanded and deepened my skills building them to reach my goals. As Spectator's Head of Engineering, I made it a high priority to discuss challenges and aspirations across our journalism sections to empathize with them. In every stage of our site migration, members of my team and I sat down in roundtable meetings with journalism leadership to keep all stakeholders up-to-date on overall progress.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Vestibulum nec mattis ed non lectus mi. Cras consequat, nibh eget rhoncus consequat, augue nisi auctor arcu, elementum.

MARTIN, VIDEO PRODUCTION

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Vestibulum nec mattis ed non lectus mi. Cras consequat, nibh eget rhoncus consequat, augue nisi auctor arcu, elementum.

JUSTIN, PHOTOGRAPHY  

As a Frontend Developer, I implemented most of the screens and flows you see featured in this TV spot in React Native with Redux and custom tooling.

Creating consistent and expandable UI elements while maintaining readability was one of the skillsets I developed the most on this page-heavy app.

Plato Money

As my first project working at Five Agency in Zagreb, Plato's size and scope were initially quite intimidating. This money-transfer app developed for Belgrade-based TradeCore and shipped to EU markets features multiple user support and deep tracking and customizability. As such, I needed to quickly acclimate myself to Five's development environment and code structure.

Though my tasks started small, I eventually implemented entire flows myself, such as the card customization. Though I came to the team with some React Native experience, I came away from this project with the confidence understanding how a market-ready banking app is structured and maintained. Of particular interest to me was the degree to which initially simple UI elements like keyboard input could be vastly expanded as new features are added. Ensuring sound state-flow via Redux thus became imperative, and I feel proud of my ability to adapt to Five's custom Redux toolkit.

Check out the full site at platomoney.com

carl.dobrovic@columbia.edu

Our journalists and columnists across half a dozen sections publish pieces daily to our site with rich text and media.

Our revenue comes primarily from advertising and partnerships with businesses via our Spec Brand Studios (SBS) line of sponsored content.

Columbia Daily Spectator

Columbia Daily Spectator is the newspaper read by Columbia students and alumni to the tune of 200,000 unique page views per month in a good semester. As head of Engineering for Product, the group within the Spectator organization overall responsible for the development of the site and unique apps, I oversee a team of 30 software engineers and product designers alongside a Head of Product Design to ideate and implement up to twenty hours a week.

My biggest responsibilities as Head of Engineering concern our GitHub repositories, the way our teams operate, what new projects we aim to tackle, and how to solve problems people throughout the Spectator organization bring to me with our platform. One moment I'm in a meeting about designing and implementing monetization into our product workflow from the ground up and in the next I'm managing a crisis of a non-functioning backend of our flag ship web app, The Shaft.

When it comes to team organization within my engineering staff, I aim for an open and collaborative environment where "associates" and "managers" all have a voice in our decision making. Through "mangers", though, I establish goals, guidelines and expectations team-wide.

Our biggest challenge currently is completing the long-term migration from JSP to React per updates to the Arc Publishing system we use. Along with reimplementing our entire frontend, we redesigned many layouts and aesthetic details to some of our most popular sections. My goal for the end of 2020 is to prepare our platform to use the some of the most powerful aspects of React to achieve performance and design well ahead of any other university newspaper in the United States.

Check out the full site at columbiaspectator.com

carl.dobrovic@columbia.edu

Musely

"Musely" is the final project that four of my friends and I completed for our User Interface Design class in Fall 2019. The core use case is the ability to annotate music pieces for the purpose of writing essays. This is something every Columbia College student has to do during the required Core Curriculum course "Music Humanities".

The features we designed came about after research through observation and surveys of Music Humanities students. Many were writing papers at the last minute and spent a lot of time going back and forth between listening to pieces, making notes about pieces, and putting something on the page. After four design iterations we arrived at our two key features: Time-marked Annotations and Timeline Tags.

Annotations allow the user to write notes that correspond to particular points in time for a piece. These annotations are then grouped together with tags, say "Allegro" or "Quintessential Mozart", which then display beneath the audio waveform. The color-coded bars indicate where annotations for that specific tag are located in the duration of the piece, giving users the ability to easily scan over their annotation work and make useful connections while writing a paper.

We implemented this project with React and Redux. State management was key as clicking on something like a Timeline Tag reorients the entire UI. A lot of painstaking work went into getting the information flow to work well under the hood so the experience of adding a tag, dragging the annotation window, and saving the tag was seamless.

A detailed full report about the project can be found here, and the GitHub repository for our demo here.

carl.dobrovic@columbia.edu

I spent hours optimizing the performance of the animations of the Timeline Tags so they would expand and retract smoothly on 'mouseover' and 'mouseleave' events—back to back.

The user can create new annotations while listening to the music piece and visualize where the annotation will correspond to in the piece. The annotation window is draggable and resizable.

The utility of the Timeline Tags comes into view as the user adds more and more annotations. We arrived at this system after many design iterations aimed at figuring out a way to succinctly convey to the user the material they generated. By clicking on a Timeline Tag, all the annotations with that tag come to the top of the Annotation panel, making it easy to quickly examine one's thoughts concerning a particular category of information.

The explore page makes it easy for users to find the dorms they are interested in and filter among relevant categories. The Mapbox API integration we used offered a lightweight solution to a birds-eye view of the dorms proximity to campus.

The dorm page offers users an in-depth look into the layout, amenities, and reviews of each dorm around campus.

During the housing lottery process, users can check on the availability of rooms as they prepare to change strategies to land the best spot.

The mobile edition of the site is fully featured while still optimized for mobile screens. I worked very late nights in the lead-up to launch to get this version right, and it payed off. The mobile site was our most visited version.

The Shaft

Our most popular web app, The Shaft is a tool for Columbia students during the housing selection and lottery process every spring to inform themselves about the options available to them and get live updates during the lottery process.

As the first major independent product I worked on at SpecTech, The Shaft gave me valuable full stack experience as well as experience developing among agile teams with a hard deadline. I rotated between developing numerous frontend widgets and interactive features, such as the dorm floor plans, and backend database integration with Amazon AWS S3.

In the later stages of development, I tackled implementing large portions of the mobile layout that was integral to the app's wide adoption among the undergraduate student body, an impressive 75% of underclassmen. I became very comfortable with React as a powerful frontend tool through this project and a much deeper understanding about the lifecycle of a hit app from paper sketch to peak-popularity.

Take a deeper look at theshaft.info

carl.dobrovic@columbia.edu

This video walks new users through the basics of the Vyond studio, an online editor for animated videos.

My roommate and I pose for a photo at the China Club in Central District.

Vyond

In the summer of 2019, I had the incredible opportunity to work as a software engineering intern with Vyond in Hong Kong. Vyond is an online video editing platform that specializes in animated videos. Headquartered in the heart of downtown Hong Kong, the company's office was filled with talented artists and engineers producing new content and improving the user experience.

After trying out a few projects, I centered the bulk of my work over the summer on a prototype for an animation tool that replaces an old system written in Flash. This tool, designed for the in-house animation team, allows the user to map out complex drawing animations with a very minimalist user interface.

I wrote the tool on a web development stack with a React frontend to show the potential for the tool to be put on the online studio for end users to make their own animations. The animators were very happy with the performance and design of this new system as a potential to replace the old one. Unfortunately, due to agreements I signed, I'm unable to show any photos or video from inside the office or code from the project publicly.

Working at Vyond was my first experience at a professional software company and it taught me a lot about how teams operate on a sprint schedule, how engineers interface with product designers, and how long-term business strategy is integrated into short-term goals. Coming from a film background prior to software engineering, Vyond interested me as a creative venture first and foremost. I took every opportunity to pick the brain of their Head of Product, for example, to learn about where he came from and how his experiences inform design decisions for the Vyond platform.

Now as Head of Engineering at SpecTech, I incorporate the lessons I learned about team efficiency and a modern tech stack into our workflow here in New York.

carl.dobrovic@columbia.edu

Follow the link embedded here to see the film on YouTube.

This project involved extensive nature photography. I had to adapt my knowledge of lighting best practices to a very dynamic environment to get the shots I wanted.

Making a Difference

A team of high school students revolutionizes conservation efforts with cost effective data collection and advanced analysis.

This is my final project before heading to Columbia and my most ambitious yet. I spent a year with the team documenting their work and finding the right way to tell their story. While I didn't have the large film crew I did for Necromancy, I had access to advanced film equipment and the editing skills I developed for a decade.

I premiered the film at the Angelika Film Center to a large audience and the reception was incredible. The project went on to provide notoriety to this group and their methods among conservation circles across the United States.

carl.dobrovic@columbia.edu

So much of our brilliant camera work was achieved by some of the most talented photographers I know. We were able to use advanced equipment, such as dollies, to achieve our amazing camera motion.

We had a very diverse set of locales for the film, including an airport, a medical clinic, a high school, and an office space.

Our costume design and props were integral to the feel of many scenes.

Necromancy

Federal Paranormal agents are on the hunt for a monster that's believed to be extinct, unknowingly falling into a trap that reaches the highest levels of government.

This was the elevator pitch for the halloween thriller film a team of over thirty passionate film students and I put together over the course of an amazing October in 2015. I wrote the script for the project and introduced it to a special film class in mid-September, and, before I knew it, the whole class was on board with my project. Soon different departments were being set up and a filming schedule put together. We wound up shooting for five or more hours sometimes four days a week to get all the scenes in for the forty minute movie.

In addition to writing the script, I also developed the visual effects, including motion graphics, green screens, and gun shots. By this point in my life I had extensive experience with Adobe After Effects and Photoshop.

My favorite part of working on this film, however, was the editing process. I always edit to music and with this film received a lot of praise for finding the tempo and tone right in every scene because of how and when I incorporated a dynamic score.

This was the project that made me believe in myself as a leader and a filmmaker.

carl.dobrovic@columbia.edu

The particle effects were so intense to render that my computer nearly crashed!

Rotoscoping was a key skill I picked up to get the fire to look right in this final shot.

I really enjoyed using alphas to play with shapes and space in the intro sequence.

Check Mate

Noir lighting meets abstract visual effects storytelling.

This project came about from an assignment in my junior year film class to simply make a film inspired by the noir style. In character, I wrote a scenario based on a sample of music that I thought was perfect. What grew out of it was an artistic piece that highlighted the power of aggressive camera and light work.

I used advanced visual effects techniques such as particles and alphas to produce some of the effects seen here. The introduction sequence alone is one of my most complex motion graphics accomplishments.

carl.dobrovic@columbia.edu

I used a right light around the lens of my camera for the first time to perfect the intensity and the evenness of the lighting on Kyle's face.

I worked quite a bit with Kyle's eyes in post to achieve the right color and reflectivity.

Clear 2016

A political tv spot that takes full advantage of my new found interest in 3D rendering, this project was an intense sprint that focused on color theory and tight editing. I created this as an assignment for my senior year government class.

Much of the work behind the look of this piece revolved around the fundamental design. We settled on the name "clear" and I wanted a design language to reflect the "transparency" talking point for our mock political party.

I settled on a toothpaste teal color that I bring out in the eyes of our "politician" and carry through to the 3D graphics and the final animated logo. Sans-sarif fonts and clean lines were also key to completing the look.

I developed the models with Blender and brought them into After Effects with the Videocopilot plugin "Element 3D".

carl.dobrovic@columbia.edu