“Imagine planning your day with just a glance at the sky—hard to do, right? That’s where weather trackers come in handy! These smart systems give us a heads-up on what the sky has in store, from scorching sunny days to unexpected rain showers.”
BACKGROUND
research
design progress
mockup
My role
Tool
6-7 weeks, fall 23
Figma, Illustrator, Photoshop
Visual Design / Weather Dashboard / Web Interface
timeframe
persona
❝
Tyler
❝
Tyler thrives outdoors whether he’s cycling to work or skateboarding with friends. As a tech-savvy environmental advocate, he uses apps to streamline his lifestyle and reduce his carbon footprint. Tyler’s daily routine involves checking weather updates to navigate his asthma and busy schedule efficiently. He relies on a weather tracker for real-time forecasts to ensure safe and enjoyable outdoor activities, especially during weekends when planning longer rides. This tool also helps him retrospectively view weather patterns, aiding in organizing trips that align with his health needs and outdoor passions.
Age: 33 years old
Location: San Francisco
Occupation: Graphic Designer
Hobbies: Cycling, skateboarding
Lo-fi wireframe
hi-fi wireframe
Weather Alerts and Warnings:
Severe Weather Notifications: Alerts for severe weather conditions like storms, high winds, or extreme temperatures.
Air Quality:
Air Quality Index (AQI): Information on the current air quality, which is crucial for people with respiratory issues.
Historical Weather Data:
Past Weather Records: Access to historical weather data, which can be useful for various analytical purposes.
Current Weather Conditions:
Temperature: Displays the current temperature, often with a feel-like temperature that considers humidity and wind.
Weather Status: Shows current conditions like sunny, cloudy, rainy, snowy.
Wind Speed and Direction: Information on current wind conditions.
Short-Term Forecasts:
Hourly Forecasts: Weather predictions for the next few hours, useful for planning short-term activities.
Precipitation Chances: Probability of rain or snow, often displayed on an hourly basis.
style guide
FONT
HEADER 1
HEADER 2
Inter, 36px
Inter, 24px
Aa
Inter
Semibold
BUTTONS
Button
Button
color
#C60000
#FFFFFF
#334155
#00E0FF
#AFFFB7
#FF9900
#A0A0A0
#F1F5F9
This color story mixes bright and soft shades for a fun and balanced look. It starts with a deep navy blue for elegance, then adds a bright light blue for freshness. A strong red adds excitement, while a cheerful yellow brings warmth. There's also a soft mint green for a calming feel. The story includes a medium gray and a light gray for a neutral, easy-going vibe, and finishes with a clean, crisp white to make everything look clear and open. This mix of colors is perfect for making designs that are both lively and pleasing to the eye.
SkyTrack
ICONS
Thank you for watching.
© 2024 by Yuchen Chen. All rights reserved.