(Not) Just another weather app.

Countless weather app redesigns pour into Dribble every month. I challenged myself to design something that's more than just a cookie-cutter weather app in 10 hours.

Climate Change

I majored in Civil and Environmental engineering. And what taking 400-level environmental engineering classes taught me was that there are more than enough evidence and data about climate change.

Now that's not really a news. But what was shocking was that people who think climate change is a hoax will keep believing in it despite all the scientific proof.

I learned this is mostly because the numbers don't feel personal to them. In many parts of the world, the changes might be a little too subtle to notice.

Since then, I always thought about how I can raise awareness for climate change and ways to help people believe that everyone's lives could be in jeopardy if things don't change.

Weather app redesign

I came across an article by a junior designer criticizing numerous unsolicited weather app and music app redesigns that will probably never become a product.

I wholeheartedly agree with the sentiment. Every product, even if it's just a weather app, should follow a thorough user-centric design process.

That got me thinking, what kind of a weather app redesign *would* be user-centric, and not feel like just another redesign?

And that's when my climate change awareness kicked in. If people can see that the climate where they currently live in is actually being affected, they will have much easier time associating the data with the risk they are in. On top of that, weather app is something users universally use, so the data will get plenty of exposure.

The 10-hour blitz challenge: Testing my limits

For a lot of my past projects, I didn't have many time constraints. I wanted challenge myself to see how I can do under time limitations, and I thought a relatively short design project like this would be a perfect opportunity to do a 10-hour Blitz design challenge.

Final project time-lapse


I divided the project into four main stages.

Step 1. Research

Since it was an expedited challenge, I needed to slim down each process for maximum efficiency. For user research, my main tools were reviews of existing products, and what I learned in college about people's perception on climate change.

I compared three products. 1. The native iOS weather app, 2.The Weather Channel, and 3. Accuweather. The main elements of comparison were information display, configurable elements, noteworthy UIs, and how these all play a role in strengthening/weakening the service.

All three apps had a "main display" in common, where only the most necessarily information such as current temperature and weather conditions were shown.

A good design executed "show more with less" - successfully displaying more data with effective and concise display of information in limited screen estate.

Part 2. User Journey and Wireframing

User journey

The experience is divided into three sections.

1. The primary display where all the information people need at a quick glance is placed
2. A dedicated screen for forecasts
3. Customizable dashboard.

Lo-fi wireframe

Below are several versions I came up with for each display

The biggest challenge was choosing what type of information to put in the primary display and where to show the yearly comparison (for climate change awareness). I wanted all sections to appear on screen and minimize scroll, so I abandoned the horizontal carousel section.

I entertained the thought of representing climate change with a little icon alongside temperature display. However, I wanted the climate change display to be a highlighted feature rather than an add-on, and wanted the section to be at least 100px in height. This meant that I had to to get rid of one of the sections to make up for the space..

I kept the hourly forecast and got rid of the daily forecast - hourly forecasts felt more suitable in the main display where current weather conditions are shown, whereas the weekly forecast felt like it belonged to the dedicated forecast tab along with other more long term weather forecasts.

Hi-fi wireframe

High fidelity wireframe was done minimally as I was running out of time and I thought more design details would be determined later on while creating the design system.

Part 3. Design System and Components

Basic components, colors, and typeface were made into a design system to achieve consistency in design.

Part 4. Final Prototype

Here are some final prototypes with real data.

Scroll on main



By the time I exported mockups for the main display, I was already 1-hour overtime, which is why I could not finish the design for the two remaining screens.

I spent a lot of time during the prototyping stage adding more elements to the design system as I hadn't planned it thoroughly. It is important to plan your design documents in the wireframe stage better so you know what elements you need to put into the design system before moving onto prototyping stage.

What's next?

Just as the title says, I do not want this to be just another weather app that will never see the light as a finished product. If I am to develop alone, I will most likely build the app that contains just the main screen and forecasts without the personalized dashboard.

Before moving onto the development stage, I would like to find better/different ways to display historic weather data to effectively tell people that climate change is very real and could impact everyone.