This document describes a mobile celebrity search design exercise. It provides an overview of the current mobile search experience for a celebrity name and outlines user scenarios to identify pain points. It then proposes a redesign of the mobile search results page (SERP) to improve the user experience for finding information on celebrity events. The key changes in the redesign emphasize module titles, define color meanings, improve spacing, remove unnecessary links, and add a search keywords block to the news page to help users more easily explore related news topics.

1. DESIGN EXERCISE
Mobile Celebrity Search Design
Yian Lu吕易安

2. NOTICE as TRIGGER
I’ve heard of and spot some news
about ⺩王⼒力宏 from my friends, TV
programs, websites, etc. However, so
far, the information is fragmentary
and hash, and I want to know more
about the news events clearly.
ACTION to Bing IT OUT
I take out my mobile phone, open
one browser APP, and go to Bing
search engine. Because I’m not
sure the precise keyword of the
event, I key in “⺩王⼒力宏”, hope to
find the event on the result page.

3. UX DESIGN GOAL
Let user spot the latest and popular news or events, which might be
those the user has heard of recently, on the 1st and 2nd screen.
Help user explore more information of the event by bridging links to
various resources, such as blog, social platform or news media.

4. CURRENT MOBILE SERP OF 王力宏
Hot News show three latest news from news media
Bing Knows & Link Buttons overview the celebrity’s profile
Official Weibo shows the latest post
Instant Posts from other resource sites
Images
Music from Xiami
Movie
Video
Sina Weibo
Bing Knows
General Search Results
Related Search Keywords
The Sequence of Information Modules
Browser:
safari
Device:
iPhone 4S

5. CURRENT MOBILE SERP OF 王力宏
The Sequence of Information Modules
SERP
Hot News
Bing Knows
Link Buttons
Weibo
Instant Posts
Images
Music
Movie
Video
Sina Weibo
Bing Knows
General SR
To present the search results in a constructive way,
Bing categorizes and organizes those news and
events by specific topics.
Generally, users get the celebrity’s trending news
from the top four modules, and each module can
link to another page or information website.
Hot News
Search Bar

6. USER SCENARIOS
Hot News
Gotothis
media’ssiteIwanttofindtheevent,
getfurtherinformation.
SERP
Hot News
Bing Knows
Link Buttons
Weibo
Instant Posts
Images
Music
Movie
Hot News
Search Bar
Keyin“⺩王⼒力宏” Thisnewstitlelooks
justright,gocheckit!
Tapthenewslink
IthinkIcouldexplore
moreinformationhere.
Getnewsandevents
withoutBing.
BackBingtoviewwider
rangeofinformation.
SERP
I’mnotsureit’salatest
newsoranoldone.

7. Hot News
Tapthetitlekeyword
Gotothis
BingNews
Tap“X”back
Redtitleisalink?orI
shouldtap“Seemore”?
Gothroughthenever
endingnewspage…
USER SCENARIOS
SERP
Hot News
Bing Knows
Link Buttons
Weibo
Instant Posts
Images
Music
Movie
Hot News
Search BarIwanttofindtheevent,
getfurtherinformation.
Keyin“⺩王⼒力宏”
TheeventIheardofis
definitelyalatestnews. Noneofthethree,I’d
liketoseemorenews.
Oops…”Seemore”has
nothingtodowith⺩王.
Findoutsomenews
keywordformyevent,
shouldItypethewords
insearchbar?
Gotothis
media’ssite

8. USER SCENARIOS
Iwanttofindtheevent,
getfurtherinformation.
SERP
Hot News
Bing Knows
Link Buttons
Weibo
Instant Posts
Images
Music
Movie
Hot News
Search Bar
Keyin“⺩王⼒力宏”
I’mnotsureit’salatest
newsoranoldone.
Hot News
I’vequicklywentthrough
thenewsmoduleand
BingNewspage,nowI
confirmthatitisnota
recentevent.
Bing Knows Bing Knows
Accordingtothebrief,it
shouldbehisprofile.
TaptheBingKnowstitle

9. USER SCENARIOS
Iwanttofindtheevent,
getfurtherinformation.
SERP
Hot News
Bing Knows
Link Buttons
Weibo
Instant Posts
Images
Music
Movie
Hot News
Search Bar
Keyin“⺩王⼒力宏”
I’mnotsureit’salatest
newsoranoldone.
Hot News
I’vequicklywentthrough
thenewsmoduleand
BingNewspage,nowI
confirmthatitisnota
recentevent.
Weibo Instant Posts
Maybeviewinghisposts
tofindtheevent?
TaptheSinaWeibotitle
Yes,maybemyfriend
gotthenewsfromthe
communitymessages.
Taptherelatedpost

10. UX REDESIGN OF
CELEB EVENTS SEARCH
ON Bing MOBILE

11. MOBILE SERP DESIGN
WHOLE PAGE OVERVIEW
Emphasize the module tile
Define the color meaning:
Red to highlight search keywords
Green for resource site
Dark grey for title & main content
Light grey for secondary content
Position of additional link:
Resource site on the left
Remove “check more” link
Spare enough space between
modules, less division lines

12. MOBILE SERP DESIGN
HOT NEWS MODULE
CURRENT REDESIGN
Navigation tab changed once the keyword
has entered. If the user keys in a celebrity
name, then navigation shows news, images,
videos and Knows tabs, hide dictionary tab.
Keep the title eye-catching and arrange the
words closely to make it more like a button.
Showing three news with different topic. I
unify the hot news format, each one reveals
images, title, resource site, and time.
Remove “check more
stories”, tap title, link
to Bing News page.

13. MOBILE SERP DESIGN
Bing NEWS PAGE
CURRENT REDESIGN Adding search keywords into title to inform
users the page’s content.
In order to help users easily exploring more
celebrity’s trending events and news, I set a
new block above the page. The block
introduces popular news keywords related
to the celebrity, users can simply tap the
keywords to browse more specific news
information. This block also helps extend
the continuity of exploring information.

15. Thank You
Yian Lu吕易安