Hackathon: in 6 Hours to a moving Prototype

Teresa Prosch
4 min readFeb 17, 2020



This weekend I went to my first Hackathon ever. It took place at the Ironhack Campus in Berlin combining the Superpowers of Web Dev’s, Data Analytics and UX/UI Designers.

We were divided into 6 Groups — each at least with one Developer, one Data Analytic and one UX/UI Designer.

In my case we have been only in a group of three as others were in five — but more to this beyond...

What was the Brief?

Your team has been hired by Craigslist, Inc. which is an American classified advertisements website with sections devoted to jobs, housing, for sale, items wanted, services, community service, gigs, résumés, and discussion forums.

As a team, you will redesign and deploy the housing page.

Why are we doing this?

The goals for the hackathon (besides mingling and having fun) are the following:

  • Learn what it’s like to work on a team with different roles
  • Distinguish each other’s roles in a product development process
  • Discover the fundamentals of the other’s job


After the project is done, you will present it! The presentation should be no more than 5 minutes and should include:

  • UX process
  • Demo of redesign housing page.


  • Prototype with micro-interactions
  • Usability test

A short UX Process

In a short amount of time and only me in the team as a UX Designer, I tried breaking down the process as short as possible.

While our Data Analytic Team Member checked what kind of Data could be gathered I was checking what Filters the Website already is supplying. With this information, I did Card Sorting.

As I had no time to do a User Research and Testings I checked related websites such as Immoscout24, Airbnb, Spotahome and eBay Kleinanzeigen to see how wich filters were the most important ones.

The most important Filters so far:

  • City
  • Kind (of Home)
  • Pictures
  • Prices
  • Number of rooms
  • Square meters
  • more filters

Competitor Analysis

Problem Statement: People need a Place to stay

How might we turn Craigslist Immo-Section into a friendly and clear Environment where searching and reaching out for flats seems to be easy?

Define the Problems of the existing Platform

Besides the missing design on Craigslist, there is a lot of misleading Navigation. Most crucial to me was that they have Requests and Offerings in the same Drop-Down-Menu.

So I decided to ask on the LandingPage of the Immosection whether you are searching for Offerings or Requests — just as eBay Kleinanzeigen and Immoscout24 are doing:

All the other Filters I wanted then to implement in the Overview of the Findings so far — so that it seems not taking a lot of effort to reach out to existing flats.

But don’t forget Time 👀

As a UX Designer so far I learned to handover a Design to a Developer only when it’s finished. BUT not in the Hackathon! It was important to let the Developer know as fast as possible how the Layout will be organized so he could start.

So I did quickly some Mid-Fis and transferred them via Zeplin.

Unfortunately, it turned out that the only Developer in my Group was not that much into Front-End but more in Back-End Development so he couldn’t work with Zeplin.

Also, he had issues with the Data Format of our Data Analytics Team member.


As I was trying to run my UX/UI Process as fast as possible so that the Developer can work with it he was not able to show our Data and Designs on a Website.


Don’t give up…. go for Hi-Fi’s

Landing Page / Requests
Landing Page / Offers
Main View
more Filters
Detail View of a Flat

Moving Prototype whoop whoop

There was quite a lot to learn — especially in that short time.

But I had fun getting out of my comfort zone and getting done a moving Prototype within a few hours.