Business Problem: Outdoor atheletes lack a weather app with features that are personalized to their lifestyle.
Task: Design a single detailed view for a weather app for runners
Competitive Analysis: + Google Weather + WeatherBug + Weather channel
User Research
Crafted interview questions based on market research
Identified mental models
Narrowed down pain/gain points, exercise habits
Implemented agile design methodology
Interviewed 12 users in total
Persona
Based off initial user tests
Focused on working young professionals
User journey based on narratives given during user interviews
Pain Points: + Chance of Rain percentage was never reliable + Humidity can cause chafing while running + It's hard to schedule a work out with volatile weather
Sitemapping
Began sitemap with post-it rearrangement
Translated the post-it map into Figma
Separated the Daily, 10-Day, and Hourly forecasts into separate pages
Included weather info nodes based on user feedback
Included Clothing Suggestions page and a Scheduler
Wireframing
Low-fidelity grayscale wireframe
Designed on a 10-column grid to include all 4 columns of weather info nodes and the Hourly forecast
Included a Map overlay
Scheduler given its own button after user tests
Calendar event form included for the Scheduler function
Daily, 10-Day, and Hourly forecasts are now all viewable on the main page
Color
Color choices chosen to reflect the colors of the sky
A canary yellow pop color simulates the sun
Color scheme modified to increase contrasts between blue shades for readability
Colors applied into high-fidelity wireframe prototype
Chose high-contrast colors to aid accessibility
Prototyping
Redesigned information architecture around Disneyland's Hub and Spoke model design
Home button added to reinforce the central hub design philosophy
Designed pop-up overlay windows for each of the weather nodes
Added hourly sliders to each weather node
Extra UI elements added to guide the users
Designed multiple different visualizations for weather info
