🌦️ Weather App Re-Imagined

Key word: UI/UX design, Rapid Prototyping, User Research, HTML/CSS Prototyping

Need-Finding

After interviewing 3 weather app users, I gained some insights that motivate a better design for weather apps:

1. We should build on the nice visuals. People like the weather icons and backgrounds that show what’s happening outside. To make it even better, the app could add visuals for metrics like air quality or UV levels so users get more useful information quickly.

2. The app can provide actionable advice. Users often check the weather to decide what to wear or when to go out. The app could give direct advice, like suggesting this weather is perfect for a sweater.

3. The app should allow easy conversion between temperature systems. Some users want to easily switch between Fahrenheit and Celsius. 

4. The user can access past weather information. A few users mentioned they’d like to see what the weather was like yesterday at the same time. Adding this feature would help people compare and understand the weather better.

Users want to customize their home screen. Similar to how they can arrange widgets on their phones, they should be able to hide or move things around based on what’s important to them, like removing details they don’t find useful, such as wind speed.

Low Fidelity Paper Prototype

Three Distinct Lo-Fi Paper Prototypes

High Fidelity Paper Prototype

Hi-Fi Paper Prototype

HTML/CSS Implementation

Features to highlight: 

• Easy switch between fahrenheit and celsius 

• Direct recommendations on clothes and travel 

• Expandable / collapsable weather feature modules 

• Ability to customize homepage 

• Dictate important weather information

Github: https://github.com/raylkr/Weather_App 

Hi-Fi HTML/CSS Prototype