Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Exercise_Weather Search Experience of Bing

291 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

Design Exercise_Weather Search Experience of Bing

  1. 1. DESIGN EXERCISE Weather Search Experience Yian Lu吕易安
  2. 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. 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. 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. 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. 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. 7. WEATHER ANSWER’S MOBILE DESIGN on iPhone
  8. 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. 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. 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. 11. INTERACTIVE WEATHER ICONS EXAMPLE GENERAL HIDE STEP OUT A LITTLE HEY! OVER HERE
  12. 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
  13. 13. Thank You Yian Lu吕易安

×