Turning the first of a kind weather platform into an intuitive
decision tool
Incubated at IIT Bombay, WeatherEx.AI translates complex numerical weather models into maps, layers, and alerts for both enterprise operators and the everyday public. The brief was a visual refresh. The audit showed the product had outgrown its interface, so the engagement widened to research, redesign, feature addition and product strategy.
BEFORE
The original
AFTER
The redesign
Web · shipped
Phone · prototype
Role
UX design (sole)- Internship,
Independent designer
Engagement
Audit | Redesign |
Validation | Feature addition
Timeline
May 2026 - Present
Sector
Weather Intelligence
At a glance
System Usability Scale
52.5 →
79.4
+51%
From below the 68 baseline to comfortably usable.
NASA-TLX workload
71.0 →
37.4
−47%
Less demanding, less frustrating. Lower is better.
Tested with
Interview, three observed tasks, SUS and NASA-TLX.
18 users
The CONTEXT
WeatherEx.ai puts global forecast models on one live map: first of its kind, deep data, early interface. The aim was to close the gap between what the platform knows and what a user can act on, without disturbing workflows that already worked.
Contents
Part 1 · Placement & brand
Part 2 · Data & decisions
Part 3 · Research — the evidence behind every move
Design
/
Build
Four moves, from layout to decisions
The work ran from where each control sits to what the product calls itself. Round one shipped and was measured.
MOVE 01
First, the rulebook
Where in the map should a button live?
From about 20 features to 90, every new button went wherever there was room. So before moving anything, I studied six weather and map products and six UX principles, audited every control on web and phone, and wrote a rule the whole team can use.
SIX ZONES
Every control on the map belongs to one. Same zones on web and phone — only the edge changes.
Map — keep clear
1
Find
2
App
3
Change the map
Layer list
Altitude, beside its layer
Overlays: airports, flight routes, cyclones
4
Read a place
Place card
Forecast panels
Airport view
Ask Cumulus AI
6
View
Live · 2D / 3D · Zoom
5
Time
Date · Play · Day strip → model + legend at the right end
1
2
3
6
4
5
1
Find
2
App
3
Change the map
4
Read a place
5
Time
6
View
RESEARCH · PRINCIPLES
Six principles that decide placement
Each answers a different part of "where". Together they become the criteria.
Familiar wins
Jakob's law
People spend most of their time in other products, so they expect yours to work the same way.
For WeatherEx → Copy the spots the market already agrees on.
Nielsen · NN/g
Edges are fast
Fitts's law
Big, close targets are quick. Screen edges and corners act like infinitely big targets for a mouse.
For WeatherEx → Pin web controls to edges and corners — never float them mid-map.
Fitts, 1954
49%
Thumb zone
of people use their phone one-handed. The easy zone is the bottom; top corners are the hardest reach.
For WeatherEx → Frequent phone controls live in the bottom half.
Hoober · 1,333 people
80%
Attention leans left
of eye fixations land on the left half of the page, only 20% on the right.
For WeatherEx → Put what people choose first on the left.
NN/g eyetracking · newer study
Next to it
Natural mapping
Controls work best on, or right beside, the thing they change.
For WeatherEx → A modifier like altitude sits beside what it modifies — layers.
Norman
Fewer = faster
Hick's law
Every extra visible choice adds decision time. Progressive disclosure keeps power without clutter.
For WeatherEx → Show the frequent; tuck the rest one tap deep.
Hick–Hyman
RESEARCH · WEB
How the market lays out a weather map
Six products, one screen each. Colour = what the control does. Dashed = opens on click.
3
4
Forecast
5
Timeline
4
Windy
Layers and altitude on the right, time at the bottom. Its own users call the crowded right side confusing.
2
3
4
5
Time slider
6
meteoblue
Site menu left, map types right, zoom top-right, legend bottom-left.
3
5
Timeline
Ventusky
Main menu in the bottom-left corner, moved there so web and app match.
4
Flight
6
5
3
Filters
Flightradar24
Search top-left, view controls on the right edge, filters and playback at the bottom.
4
Place
3
6
Google Maps
The layout most people already carry in their heads.
3
4
BOM MetEye
The outlier: layer menu on the left, timeline above the map.
RESEARCH · PHONE
On a phone, the bottom does the work
Time and place details sit in the thumb zone. Search goes top, or into the sheet.
3
4
5
Windy app
Layers and altitude in a right-side menu.
4
3
5
Ventusky app
Main menu moved to the bottom-left for one hand.
6
1
4
Apple Maps
Search sits inside the bottom sheet.
1
3
6
4
2
Google Maps app
Search on top, locate bottom-right.
WHAT PHONES AGREE ON
Time
Always at the bottom.
Place details
A bottom sheet that pulls up.
Search
Top bar, or inside the sheet.
Layers
No agreement: right menu, bottom-left or top-right.
?
?
?
WHERE EACH ONE SITS
RESEARCH · SYNTHESIS
Settled spots vs open questions
Five spots are settled across the market. Two are open — WeatherEx sets its own rule there.
5 Time / playback
Bottom
Bottom
Bottom
Bottom
—
Top
✓ Bottom · 4 of 5
1 Search / find
Top-left
—
Top
Top-left
Top-left
Top
✓ Top · 5 of 5
2 Account / app
Top-right
Left menu
—
Top-right
Top-right
—
✓ Top-right · 3 of 4
6 View (zoom, 3D)
—
Top-right
—
Right
Bottom-right
—
✓ Right edge · 3 of 3
4 Legend / key
Bottom-right
Bottom-left
—
—
—
Bottom-right
✓ Bottom · 3 of 3
3 Data layers
Right
Right
Bottom-left
Bottom
Bottom-left
Left
? Split
4 Place info
Bottom
—
Bottom
Left
Left
—
? Split
SETTLED → COPY IT
Time at the bottom, search at the top, account top-right, view on the right edge. Fighting these costs users effort for no gain.
OPEN → WEATHEREX DECIDES, ONCE
Which side holds the layers, and where place details open. The market is split, so WeatherEx needs its own rule here, used everywhere.
DECIDING THE CRITERIA
Seven ways to sort a button
Seven ways to judge where a button goes. Only three of them decide it — the other four just break ties.
1
Each row is one way to judge a button.
2
Each dot shows how well that row answers the question at the top of its column.
Yes
Partly
No
3
Shaded rows are the three that decide where a button goes. The rest only break ties.
Decides placement
WHICH SIDE?
HOW VISIBLE?
WORKS ON
WEB + PHONE?
EASY TO USE?
JOB IN WEATHEREX RULES
Function
What job does it do?
Groups — what sits together
Input vs output
Do you change the map, or read from it?
Primary rule → which side
Scope
Whole app, whole map, or a selected place?
Which layer → edge, panel or menu
Frequency
Every visit, some visits, rarely?
How visible → on screen, 1 tap, menu
Mapping
Does it modify another control?
Tie-breaker → stick to its parent
Convention
Where do users already expect it?
Tie-breaker → don't fight habits
Reach & attention
Thumb, pointer, eye path
Tie-breaker → per device
Input vs output
→ side
+
Scope
→ layer
+
Frequency
→ visibility
+
Mapping · convention · reach
→ break ties
THE RULE
The WeatherEx placement test
Three questions anyone on the team can answer in 30 seconds — for a new feature or an old one.
THE SIX ZONES
Map
1
Find
2
App
3
Change
4
Read
6
View
5
Time
Q1
What does it act on?
2
The app → App · top-right
1
Finding a place → Find · top-left
4
One place → Read a place · right / sheet
The whole map → Q2
Q2
What about the map does it change?
3
What it shows → Change the map · left
5
When → Time · bottom
6
How you see it → View · bottom-right
Q3
How often is it used?
Every visit → on screen
Some visits → one tap
Rarely → menu
Brand new → spotlight 2–4 weeks, then its zone
WHEN TWO ANSWERS FIT
1
Stick to the parent
A modifier sits beside what it modifies. Altitude goes next to layers.
2
Follow a settled market
The model picker changes data, but every product keeps it by the timeline, so it stays there.
3
Phone: frequent goes low
Inside the thumb zone, the bottom wins.
4
Safety first
A severe weather alert may interrupt anywhere.
DEALING WITH WHAT'S LIVE
Move slowly: now → next → later
"We don't want to disrupt everything at once." So the rule applies to new work first, and old controls move in small, announced steps.
Now
No visible change
DISRUPTION
Next
Small, low-risk moves
DISRUPTION
Later
Needs a team call
DISRUPTION
HOW EACH MOVE SHIPS
01
Spotlight the new spot for 2–4 weeks
02
One zone at a time
03
Web and phone together
04
Check usage before the next move
MOVE 02
A brand that says what it is
The new website explains what WeatherEx helps people decide, shows the evidence behind its forecasts, and gives each sector a clear way in.
WeatherEx
Signal cyan
#0C7D97
Warm paper
#F3EDE8
Aa
IBM Plex Sans
Regular · Medium
24°
IBM Plex Mono
Data / numerals
A palette drawn from cartography
Data colours
Reserved for weather variables and intensity. Separate from the interface palette.
01
Lead with the next decision
Prototype
“Know what the weather means for your next decision.” The homepage now opens with the value to the user.
02
Make the science easy to follow
Prototype
See what is coming → make it local → make the decision. Three steps connect forecasting to action.
03
Put evidence beside the promise
Prototype
A dedicated performance section brings validation metrics into the story, alongside the organisations WeatherEx works with.
04
Give every sector a relevant way in
Prototype
Sector tabs open tailored solution views. Demo forms carry that sector context into the next step.
05
Paper, ink and a signal colour
Prototype
Warm paper references printed maps and atlases: a quiet ground for geographic information. Dark ink carries text and hierarchy. Cyan/teal signals actions and emphasis. Data colours retain their own meaning.
06
Explain what happens after interest
Prototype
Twelve FAQs and a consultation → evaluation → implementation sequence clarify the path to getting started.
Turning the first of a kind weather platform into an intuitive
decision tool
Incubated at IIT Bombay, WeatherEx.AI translates complex numerical weather models into maps, layers, and alerts for both enterprise operators and the everyday public. The brief was a visual refresh. The audit showed the product had outgrown its interface, so the engagement widened to research, redesign, feature addition and product strategy.
BEFORE
The original
AFTER
The redesign
Web · shipped
Phone · prototype
Role
UX design (sole)- Internship,
Independent designer
Engagement
Audit | Redesign |
Validation | Feature addition
Timeline
May 2026 - Present
Sector
Weather Intelligence
At a glance
System Usability Scale
52.5 →
79.4
+51%
From below the 68 baseline to comfortably usable.
NASA-TLX workload
71.0 →
37.4
−47%
Less demanding, less frustrating. Lower is better.
Tested with
Interview, three observed tasks, SUS and NASA-TLX.
18 users
The CONTEXT
WeatherEx.ai puts global forecast models on one live map: first of its kind, deep data, early interface. The aim was to close the gap between what the platform knows and what a user can act on, without disturbing workflows that already worked.
Contents
Part 1 · Placement & brand
Part 2 · Data & decisions
Part 3 · Research — the evidence behind every move
Design
/
Build
Four moves, from layout to decisions
The work ran from where each control sits to what the product calls itself. Round one shipped and was measured.
MOVE 01
First, the rulebook
Where in the map should a button live?
From about 20 features to 90, every new button went wherever there was room. So before moving anything, I studied six weather and map products and six UX principles, audited every control on web and phone, and wrote a rule the whole team can use.
SIX ZONES
Every control on the map belongs to one. Same zones on web and phone — only the edge changes.
Map — keep clear
1
Find
2
App
3
Change the map
Layer list
Altitude, beside its layer
Overlays: airports, flight routes, cyclones
4
Read a place
Place card
Forecast panels
Airport view
Ask Cumulus AI
6
View
Live · 2D / 3D · Zoom
5
Time
Date · Play · Day strip → model + legend at the right end
1
2
3
6
4
5
RESEARCH · PRINCIPLES
Six principles that decide placement
Each answers a different part of "where". Together they become the criteria.
Show the 6 principles
Familiar wins
Jakob's law
People spend most of their time in other products, so they expect yours to work the same way.
For WeatherEx → Copy the spots the market already agrees on.
Nielsen · NN/g
Edges are fast
Fitts's law
Big, close targets are quick. Screen edges and corners act like infinitely big targets for a mouse.
For WeatherEx → Pin web controls to edges and corners — never float them mid-map.
Fitts, 1954
49%
Thumb zone
of people use their phone one-handed. The easy zone is the bottom; top corners are the hardest reach.
For WeatherEx → Frequent phone controls live in the bottom half.
Hoober · 1,333 people
80%
Attention leans left
of eye fixations land on the left half of the page, only 20% on the right.
For WeatherEx → Put what people choose first on the left.
NN/g eyetracking · newer study
Next to it
Natural mapping
Controls work best on, or right beside, the thing they change.
For WeatherEx → A modifier like altitude sits beside what it modifies — layers.
Norman
Fewer = faster
Hick's law
Every extra visible choice adds decision time. Progressive disclosure keeps power without clutter.
For WeatherEx → Show the frequent; tuck the rest one tap deep.
Hick–Hyman
RESEARCH · WEB
How the market lays out a weather map
Six products, one screen each. Colour = what the control does. Dashed = opens on click.
3
4
Forecast
5
Timeline
4
Windy
Layers and altitude on the right, time at the bottom. Its own users call the crowded right side confusing.
2
3
4
5
Time slider
6
meteoblue
Site menu left, map types right, zoom top-right, legend bottom-left.
3
5
Timeline
Ventusky
Main menu in the bottom-left corner, moved there so web and app match.
4
Flight
6
5
3
Filters
Flightradar24
Search top-left, view controls on the right edge, filters and playback at the bottom.
4
Place
3
6
Google Maps
The layout most people already carry in their heads.
3
4
BOM MetEye
The outlier: layer menu on the left, timeline above the map.
RESEARCH · PHONE
On a phone, the bottom does the work
Time and place details sit in the thumb zone. Search goes top, or into the sheet.
Show the phone layouts
3
4
5
Windy app
Layers and altitude in a right-side menu.
4
3
5
Ventusky app
Main menu moved to the bottom-left for one hand.
6
1
4
Apple Maps
Search sits inside the bottom sheet.
1
3
6
4
2
Google Maps app
Search on top, locate bottom-right.
WHAT PHONES AGREE ON
Time
Always at the bottom.
Place details
A bottom sheet that pulls up.
Search
Top bar, or inside the sheet.
Layers
No agreement: right menu, bottom-left or top-right.
?
?
?
WHERE EACH ONE SITS
RESEARCH · SYNTHESIS
Settled spots vs open questions
Five spots are settled across the market. Two are open — WeatherEx sets its own rule there.
Show the comparison
5 Time / playback
Bottom
Bottom
Bottom
Bottom
—
Top
✓ Bottom · 4 of 5
1 Search / find
Top-left
—
Top
Top-left
Top-left
Top
✓ Top · 5 of 5
2 Account / app
Top-right
Left menu
—
Top-right
Top-right
—
✓ Top-right · 3 of 4
6 View (zoom, 3D)
—
Top-right
—
Right
Bottom-right
—
✓ Right edge · 3 of 3
4 Legend / key
Bottom-right
Bottom-left
—
—
—
Bottom-right
✓ Bottom · 3 of 3
3 Data layers
Right
Right
Bottom-left
Bottom
Bottom-left
Left
? Split
4 Place info
Bottom
—
Bottom
Left
Left
—
? Split
SETTLED → COPY IT
Time at the bottom, search at the top, account top-right, view on the right edge. Fighting these costs users effort for no gain.
OPEN → WEATHEREX DECIDES, ONCE
Which side holds the layers, and where place details open. The market is split, so WeatherEx needs its own rule here, used everywhere.
DECIDING THE CRITERIA
Seven ways to sort a button
Seven ways to judge where a button goes. Only three of them decide it — the other four just break ties.
Show the 7 criteria
Input vs output
→ side
+
Scope
→ layer
+
Frequency
→ visibility
+
Mapping · convention · reach
→ break ties
THE RULE
The WeatherEx placement test
Three questions anyone on the team can answer in 30 seconds — for a new feature or an old one.
THE SIX ZONES
Map
1
Find
2
App
3
Change
4
Read
6
View
5
Time
Q1
What does it act on?
2
The app → App · top-right
1
Finding a place → Find · top-left
4
One place → Read a place · right / sheet
The whole map → Q2
Q2
What about the map does it change?
3
What it shows → Change the map · left
5
When → Time · bottom
6
How you see it → View · bottom-right
Q3
How often is it used?
Every visit → on screen
Some visits → one tap
Rarely → menu
Brand new → spotlight 2–4 weeks, then its zone
WHEN TWO ANSWERS FIT
1
Stick to the parent
A modifier sits beside what it modifies. Altitude goes next to layers.
2
Follow a settled market
The model picker changes data, but every product keeps it by the timeline, so it stays there.
3
Phone: frequent goes low
Inside the thumb zone, the bottom wins.
4
Safety first
A severe weather alert may interrupt anywhere.
DEALING WITH WHAT'S LIVE
Move slowly: now → next → later
"We don't want to disrupt everything at once." So the rule applies to new work first, and old controls move in small, announced steps.
Now
No visible change
DISRUPTION
Next
Small, low-risk moves
DISRUPTION
Later
Needs a team call
DISRUPTION
HOW EACH MOVE SHIPS
01
Spotlight the new spot for 2–4 weeks
02
One zone at a time
03
Web and phone together
04
Check usage before the next move
MOVE 02
The new website explains what WeatherEx helps people decide, shows the evidence behind its forecasts, and gives each sector a clear way in.
WeatherEx
Signal cyan
#0C7D97
Warm paper
#F3EDE8
Aa
IBM Plex Sans
Regular · Medium
24°
IBM Plex Mono
Data / numerals
A palette drawn from cartography
Paper · #F3EDE8
Recalls printed maps and atlases. A calm surface beneath the information.
Ink · #172832
Text, labels and hierarchy. Keeps the information clear.
Signal cyan · #0C7D97
Actions, navigation and selected emphasis. Connects the interface to WeatherEx.
Data colours
Reserved for weather variables and intensity. Separate from the interface palette.
01
Lead with the next decision
Prototype
“Know what the weather means for your next decision.” The homepage now opens with the value to the user.
02
Make the science easy to follow
Prototype
See what is coming → make it local → make the decision. Three steps connect forecasting to action.
03
Put evidence beside the promise
Prototype
A dedicated performance section brings validation metrics into the story, alongside the organisations WeatherEx works with.
04
Give every sector a relevant way in
Prototype
Sector tabs open tailored solution views. Demo forms carry that sector context into the next step.
05
Paper, ink and a signal colour
Prototype
Warm paper references printed maps and atlases: a quiet ground for geographic information. Dark ink carries text and hierarchy. Cyan/teal signals actions and emphasis. Data colours retain their own meaning.
06
Explain what happens after interest
Prototype
Twelve FAQs and a consultation → evaluation → implementation sequence clarify the path to getting started.