Skies Weather App - Visual Design

Skies is a personal weather app that not only shows weather information but also adds a delightful element with characters representing different weather conditions. I created this project purely for fun and worked on the visual identity, branding, and UI.

Overview

UI Designer, Illustrator

Role

Figma, Adobe CC

Tools

Timeline

February 2024


UI Screens

The homepage displays relevant weather information with characters representing the different weather conditions.

Animation

Adding animation brings the characters and environment to life. It also helps with visualizing the current weather condition and creates an engaging immersive-like experience.

Illustrations

I created a set of illustrations for social media posts that can be used for a broader audience and branding purposes rather than targeting any specific location since weather varies from place to place.

Widgets

Users can customize widget designs based on which style they prefer from minimalistic to more detailed ones.

Icons Set

I designed several icons to represent different weather conditions. These icons can be included into the app’s design system, across various screens and even on widgets.

Reflection

I created this project mainly to enhance my visual design and illustration skills while ensuring that the product was practical for real-world use. Since visual design is also an important aspect of the overall product design process, it was important to define the product’s purpose and appeal to audience through imagery.

A challenge that I came across while working on this project was how to make the branding or social media illustrations specific to a user’s geographical region. Since weather conditions vary from place to place, it was tricky to avoid confusing the user if they come across weather posts not related to their current location weather. If I had more time, I would think of alternative approaches early in the research phase and get feedback from some participants to reimagine the purpose and idea.