UI Design

Designing an exciting forecast experience

Dedicating practice time in UI design, I have been challenging myself to mirror and create screens everyday.

After taking a weather class, I start to notice how weather forecasts are being treated as boring task nowadays. As a believer in emotional design, I tried to design an app to turn forecasting into an excite experience in everyday life.

Problem

Looking at weather forecast apps today, I find lots of card designs: clean, organized but conveys no excitement. Checking weather seemed like a task that people wants to get done, but indeed it is an emotional experience: weather sets our mood each day, and living with different weather each day is a romantic and important surprise of life. With my design philosophy of making products emotional, I hope to design a experience where people can interact with and note weather's beauty in everyday life.

Communication goals

Emotional: the forecast screen should evoke emotions from viewers and become an experience of their lives.

Engaging: the forecast screen should be visual and intriguing while presenting all the information needed

Relatable: the forecast screen should be intimate and bring a sense of belongingness to users

Inspiration

I decided to take inspiration from fields that usually conveys strong emotions. I borrowed ideas from sports, space travels, music players... the UI topic that get redesigned over and over again. I have always has a concern: If people get excited digesting content in sport performance and music player apps, why can't weather be exciting?


Analyzing the "exciting apps", I started to see a recurring patten in these screens:
  • clean and bold fonts with strong personality;
  • monochromatic color palette amplifying the boldness of the brand;
  • organized 8pt based white space;
  • largely oriented around visual elements like graphs and pictures.


And I was ready to design weather screens under the same philosophy.

Prototype

I started out trying different layouts based on my sketches and had long iterate on the visuals. Though design directions vary largely, my communication goal has always been to making users resonate with weather and present information intuitively.

initial idea with list and weather trend graph

add in maps, cardsm and basical UI element

why stick to blue for weather?

taking out dividers, leave more space for visuals.

Design

My final design is an effort to make people resonate with weather at home and educate people more of weather.

Take away: be different for emotional design

Although UI designer are told to stick with convention, daring to innovate is also how we and our product become memorable. Weather forecast is not the only place emotional design can come into play. Tasks completion doesn't have to be just about the outcome, but also the emotional experience in the process. Noticing the details that can leverage task to experience and implement these changes is a way to practice creative confidence and become better designer.

Home