Airbnb Wechat personality quiz screen designs

Page 1

Wechat Personality Quiz Key Screen Designs 
 11th March 2016


Key Screens


1. Landing Page

2. First Question

3. First Answer

4. Second Question

哪 裡 是你內心瘋 狂向往的地方?

開始

你平時愛看 哪種類型的影片?

A: 愛情片

B: 文藝片

C: 推理片

D: 探險片

如果你可以穿 越到电影中旅行, 你希望身在何处?

A: 愛情片

A: 沙細水清的海灘邊

B: 歐式貴族的莊園

C: 花香鳥鳴的叢林

D: 遠離塵世的孤島


5. Results Page

6. Listing Image + CTA

7. CTA Details

8. Shared with Friend 你的好友: Joanna Zhu 内心最向往居住的是,

田園小屋

你的好友: Joanna Zhu 内心最 向往居住的是,

田園小屋

你內心最向往 的住所原來是, 田園小屋!你喜欢 在自己的世界中称 王,哪怕是旅途的 风尘都不能你 毫妥协.

她的奇妙旅程: 在觀看了一部文藝片電影之后 後 穿越到了歐式貴族的莊園從這 裏 裡開始了一場奇妙的旅行 . 旅行的路上, 欣賞著百花盛開花香滿 城 的美景像一個天生貴族一樣, 享受上流社 會 她的奇妙旅程: 的錦衣玉食更意想不到的是, TA邂逅了心中 的男神/女神得到了能夠號令天下的權 杖 旅行的路上, 欣賞著百花盛開花香滿城 的美景像一個天生貴族一樣, 享受上流社會 締造了專屬的行者傳奇.

嘿,你有个 梦想成真的机会待查收! 開啓啟奇妙旅程

開啓啟奇妙旅程

炫耀你的穿越剧

炫耀你的穿越剧

2016.04.05日前, 參與此測試並併註冊為爲Airbnb用戶, 既有機會獲穫免費實現您的奇妙旅程! 馬上注冊

的錦衣玉食更意想不到的是, TA邂逅了心中 的男神/女神得到了能夠號令天下的權杖 締造了專屬的行者傳奇. 我也要測試 我也要測試


Key Screens: Landing Page

Beautiful Panoramic Image
 that is onbrand and captivating. Quiz Title Visual

哪 裡 是你內心瘋 狂向往的地方?

Begin Button

Description of Quiz

開始

Airbnb logo (horizontal lockup)


Key Screens: First Question Quiz Progress Timeline
 (One bar = one question,
 increases as you progress
 through quiz.)

Belo moves with progress bar.

Simple icon animation in relation to each question.
 (Camera = What’s your fave movie?) Question

你平時愛看 哪種類型的影片?

Use brand colours we’ve provided
 in guideline for Background Answers

A: 愛情片

B: 文藝片

C: 推理片

D: 探險片


Key Screens: First Answer Quiz Progress Timeline
 (One bar = one question,
 increases as you progress
 through quiz.)

Belo moves with progress bar.

Beautiful Panoramic Image
 in relation to answer.
 (Intimate visual of couple 
 travelling = Romance Movies)

Rectangle graphic as divider between image and questions and answers.

Arrows to navigate to previous question or next.

A: 愛情片

Final Answer


Key Screens: Second Question Quiz Progress Timeline
 (One bar = one question,
 increases as you progress
 through quiz.)

Belo moves with progress bar.

Question

Answers Arrow to navigate back to previous question

如果你可以穿 越到电影中旅行, 你希望身在何处?

Simple icon animation in relation to each question.
 (Scenery = Where would you go?)

Different Background Colour
 for different question pages
 using Airbnb brand colours A: 沙細水清的海灘邊

B: 歐式貴族的莊園

C: 花香鳥鳴的叢林

D: 遠離塵世的孤島


Key Screens: Results Page Belo

Icon to depict that resulting
 listing has been selected.

你內心最向往 的住所原來是, 田園小屋!你喜欢 在自己的世界中称 王,哪怕是旅途的 风尘都不能你 毫妥协.

Button to view resulting listing image.

開啓啟奇妙旅程

Button to share results with friends.

炫耀你的穿越剧

Write up of results

Rausch background


Key Screens: Listing Room and CTA Belo

Beautiful panoramic image of the interior of resulting listing.

Rausch Background fades
 to Interior of Listing image

Rectangle graphic divider pops up.

開啓啟奇妙旅程 炫耀你的穿越剧

CTA buttons will float downwards from previous page.


Key Screens: CTA Details Belo

Beautiful panoramic image of resulting listing.

Rectangle graphic as divider between image and CTA details

嘿,你有个 梦想成真的机会待查收!

CTA Details

2016.04.05日前, 參與此測試並併註冊為爲Airbnb用戶, 既有機會獲穫免費實現您的奇妙旅程!

Arrow to navigate back to listing room image.

馬上注冊

Button that leads to sign up page


Key Screens: Shared with friend

Friend’s results

你的好友: Joanna Zhu 内心最向往居住的是,

田園小屋

Listing image

她的奇妙旅程: 旅行的路上, 欣賞著百花盛開花香滿城 的美景像一個天生貴族一樣, 享受上流社會 的錦衣玉食更意想不到的是, TA邂逅了心中 的男神/女神得到了能夠號令天下的權杖 締造了專屬的行者傳奇.

我也要測試

Airbnb logo (horizontal lockup)

Button to do quiz.


Design Guidelines


Guiding Principles


Quiz Title Visual


Typeface Use only Airbnb’s brand typefaces.

English Language

Chinese Language

Circular Air Pro Light

Circular Air Pro Bold Italic

LiHei Pro (儷黑 Pro)

Circular Air Pro Light Italic

Circular Air Pro Black

Circular Air Pro Medium

Circular Air Pro Black Italic

Circular Air Pro Medium

Circular Air Pro Extrablack

ItalicCircular Air Pro Bold

Primary Colours

The main colour palette for the quiz.

#495966

#F26664

#FFFFFF

Secondary Colours

Background colours and question pages.

#A35179

#3599A7

#83B47A

#A6945D

#E69F1B


Photography Panoramic, reflect brand narrative and principles and support quiz content.


re_Tokyo_Elliott_Dinner_20160223_0221.jpg

Live-There_Tokyo_Elliott_Dinner_20160223_0222.jpg

Photography Panoramic, reflect brand narrative and principles and support quiz content.


Photography Panoramic, reflect brand narrative and principles and support quiz content.



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.