May 16, 2019

505 words 3 mins read


Completed UI/UX Design
Hackathon project
Developed for a Hackathon in exactly 24 hours.

👉 Intro

Today, we tend to think about different fields of science as completely seperate. A biologist is a biologist, why would they want to know anything about computer science? As students, we take subjects that rarely mention anything from any other classes.

However, these fields are all studying nature and our surroundings. In computer science there are many inspirations that come from biology, leaf growing patterns or snowflakes can be explained by maths, and engineers study movements of birds to create airplanes.

STEM it is an application aimed at connecting experts and students from different fields (Science, Technology, Engineering, and Mathematics).

The user inputs the free time they have and based on that, the app recommends an article for them to read or to listen to. In the end, the user can take an optional quiz. That way the app determines the user’s expertese level in a certain field.

Its algorithm suggests the articles they might be interested in based on their fields of expertise, interests and history. For example, a biologist interested in evolution theory might want to learn something about evolutionary algorithms in computer science.

✋ My Role

I was in a team of 4 people—one back end developer, one web developer, one iOS developer and me, a designer. My role was to do the whole UI and UX of the app and to create all the assets for iOS and web.

💥 Challenges

The Real Challenge
Having very little time to do the whole project, the biggest challenge was just getting it done.

Since the time was of the essence, we had to prioritize features. The single feature we wanted to focus on was the “I’m feeling lucky” button flow.

The goal was creating a frictionless flow for users that just wanted to start reading or listening to an article. A user would choose the amount of time they have to listen or read an article. Based on their previous activity and their preferences, the application would open an article for them.

📱 Prototype

This is the final high fidelity prototype of the app we decided to go with.

It’s not perfect and I would have liked to spend much more time on it. However, considering the time constraints, I think it came out rather nicely. Feel free to voice your opinions in the comments below the article.

🎨 Design Elements


Experimental Green
Sciency Purple
School Yellow


The application icon and logo represent the four fields of STEM connected together inside one app.

the icon of the application
the logo of the application

✅ Results

🏆 1st place
We won first place in the Change Code hackathon.

In the end, the application we developed looked like this:

change-code hackathon photo 1
change-code hackathon photo 2

🎓 What I Learned

I learned that a lot can be accomplished within 24 hours. If we were too keep it up for 24 hours more, we would have had a MVP to show to investors. Of course, with an at least 24 hour sleeping pause in between. 😴