This design practice aims at creating an interaction works well on both PC and mobile devices.

1. DESIGN EXERCISE
Weather Search Experience
Yian Lu吕易安

2. CURRENT Bing WEATHER ANSWER
PC WEB
MOBILE WEB_iOS7 SafariBing reveals essential weather information with realistic
illustration and linear graphs in the top two modules.
Weather answer’s information is very readable at a
glance. However, compare to the other similar
products’ design features, Bing’s elements should be
more interactive.

3. PC WEB
MOBILE WEB_iOS7 Safari
Baidu customizes an interactive module for
weather-searching result, and the format of PC’s
module is different from mobile’s. PC’s module
contains more detailed weather information, while
mobile’s presents essential only. Mobile version
emphasizes the connection with social APPs.
BAIDU WEATHER REPORT

4. Moji is not a search engine, it’s a popular weather APP in China. It focuses on the UX of getting weather
information by mobile devices, and explore people’s potential obsession about weather. This APP is for
users who tend to track weather frequently, enjoy viewing photographs, or check life news daily.
MOJI WEATHER APP

5. MOBILE USER SCENARIOS & DESIGN FEATURES
Concise&Clear Information
Iwanttoknowthe
temperaturetoguess
whattoweartomorrow.
Iworryabouttheair
quality,butI’mnotsure
aboutthemeaningof
theindexnumbers.
Igetusedtocheck
weathereverymorning.
Iftheweatherchanges
alotfromyesterday,I’ll
informmyfriendsby
WeChat.
Onthestreet…
Oops,theairdoesn’t
lookgood,I’dliketo
checkPM2.5.
GoingtoBeijingfortwo
weeks,whatshouldI
wear?I’mcuriousabout
theweatherscenethere.
Idobelievethat节⽓气
ismoretrustworthythan
weatherreport.Howcan
Itrackiteasily?
ReadableataGlance
ChangeDaily&Surprise
ShareableInfotoCommunicate
DatasAssociatewithPlace
RelatedtoTravelInformation
BriefExplanation
Combinewith 节⽓气

6. Bing MOBILE WEATHER ANSWER DESIGN GOAL
According to the previous analysis, what makes Bing weather answer
stand out from others is concise information.
Turning weather answer into a shareable and eye-catching infographics
might attract more users to visit Bing.
ReadableataGlance
BuildCommunication
Bridging weather answer to more information, such as connect to Bing
KNOWS to introduce a term, or inspire some ideas by suggesting a link.

7. WEATHER
ANSWER’S
MOBILE DESIGN
on iPhone

8. MODULE DESIGN FOR BOTH PC & MOBILE
ReadableataGlanceConcise Information
Present the information priority through
scaling, colors and grouping elements in
the module. The size of weather answer
module can fit into general devices’
screens completely, which ensure that
users can immediately get information
from the first screen of SERP. If users
want to get further information, all the
square elements on the module are links,
just tap any of them.
By rearranging the grouped elements, the
design can work well on both PC and
mobile.

9. UI LAYOUT
Today’s Weather Answer
Background color changed by weather
conditions, and each weather icon has its
unique color. Users wouldn’t get further
information by tapping the main icon, but
once they tap it, they will find it animated
and interactive, such as jumping cloud,
rotating sun, or booming cloud. To
surprise users, Bing can update the icon
animations frequently.
CURRENT
Weather Answer for Following Days
Users can scroll right or left to find
another day’s brief weather answer. Tap
the day, the detailed information would
show above.

10. WEARGER ICONS &
COLOR FOR THAT WEATHER
CLOUDY
with little sunshine
CLOUDY
not heavy clouds
RAINY
downpour
SUNNY
warm and hot
CLOUDY
heavy clouds
RAINY
drizzle

11. INTERACTIVE WEATHER ICONS EXAMPLE
GENERAL HIDE
STEP OUT
A LITTLE
HEY!
OVER HERE

12. LINK & SHARE
What does the number mean?
Link to detailed weather page
www.zuimeitianqi.com
Share to Friends
Link to social APPs
What is PM2.5?
Link to Bing KNOWS
What does it mean?
Link to detailed weather page
www.zuimeitianqi.com

14. Thank You
Yian Lu吕易安