QMD - Qatar’s official weather app for iPhone and iPad
“
Forecasts, warnings and sea data for Qatar, in Arabic.
QMD
iPhone and iPad app, 2018
About the project
The Qatar Meteorology Department (QMD) sits under Qatar’s Civil Aviation Authority and publishes the country’s forecasts and weather warnings. In 2018 we designed its public weather app for iPhone and iPad as the design partner of iHorizons, the Doha agency that held the contract and built the app. We started with a UX review of the wireframes we were given, then designed the information architecture, the screens, the data views and every weather state in Arabic.
Project
Qatar Weather App
Industry
Meteorology
Location
Doha, Qatar
Date
2018
“
Client Request
QMD wanted a weather app that people in Qatar would pick first, with forecasts, warnings, sea data and a place for users to share their own weather photos.
Qatar Meteorology Department
App requirements, March 2018
Design Pillars
Core UX Principles
Current conditions, the day’s high and low, and any warning fit on the first screen.
Saved cities sit in a tab bar at the top, and a swipe moves between them.
Every screen was designed in Arabic, reading right to left, on iPhone and iPad.
UX Review
What the First Wireframes Missed
Too Much on One Page
The wireframes we reviewed put everything on the main page, so we split the information into cards that can be read one at a time.
Warnings Too Quiet
Weather warnings needed more weight, so a red warning bar now sits on every weather screen.
Settings Without Context
The language screen lists only language names, and the units screen shows a sample temperature in each unit.
The Challenge
Problem Statement
The Main Goal: Make Official Weather Data Easy to Read
QMD publishes forecasts, warnings, sea and tide data, radar and satellite images and the dates of the seasonal stars. The app had to bring all of it into Arabic screens for iPhone and iPad, and the wireframes we were given put too much of it on one page.
“
Weather warnings should be presented in a more prominent manner.
Plexable UX review
QMD wireframes, March 2018
Our Approach
Solution
A Full Weather App in Arabic
A UX review, new wireframes, three visual directions and the final iPhone and iPad screens, with day and night versions of every weather state. It is an example of our Mobile App Design work.
01 - UX Review
In March 2018 we checked the wireframes we were given against usability principles and wrote a 24-page report.
02 - Wireframes and Directions
We wireframed the iPhone and iPad app in April and May 2018, then showed three visual directions, each in day and night.
03 - Final Screens
By June 2018 every iPhone and iPad screen was ready for iHorizons to build.
Before & After
The Blueprint & Evolution
Day and Night
Each main screen and weather state has a day version and a night version.
Day: a bright blue sky behind the forecast.
Night: deep navy, with the same layout and data.
Design
Key Features
The Weather Dial
A dial on the main screen switches between humidity, pressure, rain, visibility and wind, each with its own reading.
Beach and Sea Advice
Activity pages rate the beach, sunbathing and sea trips for each city, with an hourly sea table.
Design System
Visual Identity
Arabic Type
An Arabic sans serif, light for large temperatures and bold for city names and labels.
Color Palette
Sky blue for day, deep navy for night, white cards for data and a red bar for warnings.
UI Logic
Every weather condition has a day and a night screen. Forms have empty, error and success states, and the location and notification prompts say why the app needs them.
Impact
Ready for Development
Results for QMD
We handed iHorizons the complete iPhone and iPad design in June 2018, including all 44 weather states and the screens for news, surveys and user photos.
QMD
Result
By the Numbers
44 Weather States
22 weather conditions, each in a day and a night version.
3 Visual Directions
Each shown in a day mood and a night mood.
24-Page UX Review
Usability findings on the wireframes, March 2018.
Process
Review First, Then Redesign
Three Directions, Day and Night
Our review grouped the problems in the wireframes under usability, information architecture, overall direction and menu wording. We then wireframed the app again and designed three visual directions for QMD, each with a day mood and a night mood, before moving to the final screens. You can see some of the results below.
Final Showcase
The Qatar Weather App
