weathermate

Background cloud pattern

same same, but different

how often do you check the weather on your phone, apart from socially awkward situations? have you ever wondered if there are people living in cities that might have the same weather as you and what they might be doing? weathermate does just that. with a simple interaction, reveal your city's weather twin for the day and see what people in that city are up to!

course

graphical user interface

timeline

2 weeks

team

solo

the brief

given the open-ended "weather app prototype" brief, i skipped the usual forecast routine. instead, i created a prototype that connects you to global cities experiencing your exact same weather. sweltering in chicago? discover which mediterranean town shares your heatwave. it's part weather tool, part virtual travel experience — turning forecasts into windows to faraway places.

Screenshot of the iterations of weathermate app design

knowing when to stop

when you're given all the freedom in the world to design something without restriction, you tend to lose track of time while deciding on a direction. an important lesson i learnt here was knowing when to stop iterating and get into making a functional prototype. the goal was to master the little interactions that feel intentional inside the prototyping tool.

Mockup of the weathermate app Mockup of the weathermate app Mockup of the weathermate app
All the illustrations for the weather conditions

sweating the details

i went all out on the tiny details in this project. all the way from the colour of the stroke around containers to crafting custom illustrations for the different weather conditions. and i do not regret spending days on each of these.

Screenshot of the prototype settings inside origami

what did i use?

the main focus of this course was on origami, the prototyping tool by meta. although i am familiar with protopie, origami felt like a whole new world since it was a node-based tool. however, it does possess amazing capabilities for prototyping complex interactions.