Weather App

Project Type: UI & UX Design - University Project

Date: 2022

Tools: Figma, Protopie

Overview

The Weather App is one of my UI Design university projects. The objective is to meticulously craft a high-fidelity, interactive prototype for a mobile weather application using the powerful combination of Figma and Protopie. Embracing a minimalist visual theme, the app seamlessly integrates intricate weather data pertaining to the user's selected location, accompanied by an array of features including a calendar and event-centric notes for efficient planning. This undertaking is a conduit for honing a comprehensive skill set encompassing design system creation, wireframing, UI design prowess, and advanced prototyping techniques.

Problem Space

The problem space for the Weather App design project encompasses the multifaceted challenge of creating a high-fidelity and interactive prototype of a mobile weather application with a minimalistic visual theme. The challenge lies in striking a balance between minimalism and functionality, ensuring that the weather data, calendar, and notes features are intelligently intertwined within the app's framework, while also prioritising a visually coherent and engaging design. In addition to aiming to develop skills in UI design, this project also provides an opportunity to enhance the visual interface and user experience of the weather app.

Process

Colour Palette

One of the essential design systems in creating the Weather App is the colour palette. I chose blue as the primary colour because blue is associated with the sky, aiming to achieve a minimalistic design where the blue colour can visually represent "weather" akin to the sky. In addition to the primary colours, I also established other equally important colour palettes, including neutrals, shades, success, warning, and error colour palettes.

Components

Several recurring components used in my Weather App are created as Figma "components". Some components can have their styles changed flexibly based on requirements. Components also greatly assist in creating an interactive prototype that involves clickable buttons or toggles.

Solution

Prototype

After completing the design systems and components, I designed this high-fidelity prototype, which consists of several screens. Four flows comprise a collection of screens, including the login/register page, home/location page, calendar/events page, and the settings page.

Wire Flow

After using Figma to create an interactive high-fidelity prototype, I enhanced its interactivity using Protopie. To facilitate user understanding and the usability testing process, I devised this wire flow, which includes instructions and explanations for each interface aspect, guiding users from the initial to the final stages.

Final Prototype (Figma)