RUOXI LI


Interaction Design —

     A Piece of Space
     Microsoft Bing
     Autodesk
     Cat Sex Toy
     Eco in Malan Lake
     Wisper

     TH Foodlab
     Houdini
     The Sims Alexacurrent


Game Design — 

     The Last Stop
     The Unfathomed Voyager
     Grandpa’s Lost Legacy

     Cupid’s Office


Animations, Videos and Sounds —

     The Loop
     The Invention of Solitude
     Ghosty McGhostface
     Emotions Visualization
     360° Film | Friendship


Others —

    Sound Design

    Concrete Poetry
    Handmade Spoons

    Ink Wash Painting


About —

Ruoxi Li is an interaction designer and trans-disciplinary artist with passion in games, technology, sounds, andthe nature of materiality.
Her research interests range from User Experience Design, Product Design andAR/VR Technology.



Mark


WORK AT MICROSOFT

Intern Work
2018 March - 2018 July
#UserExperience #UserInterface #Research



INTRO

Selected UX work for Bing News Vertical during my internship. I mainly participated in two products and four projects, which are -

01 Microsoft Edge Research
02 Bing Design Human Interface Guidelines Update
03 Bing News Design Sprint
04 Unifying Experience Design for New Feature - Follow




↳ Bing News Design Sprint 

   

Bing News vertical is a vertical search engine and an aggregator specifically for news articles. The one week design sprint for Bing News vertical is to help spark innovation, encourage user-centered thinking and align team under a shared vision through design, prototyping and testing ideas with users.

Goals
   01    Answer current questions for News vertical.
02    Have a holistic understanding on current trends and challenges of Online Journalism.
03    Eplore the future of news, design for the future of news.

Contribution & The Challenge
   Refreshed our For You page so that users could engage more and enjoy more, even form a habit and come back to For You frequently.


For You page is the default page when users enter Bing news. Our current For You page only provide users with personalized content, which is based on their interests and behaviors.




︎ The Current For You








︎ The Redesigned For You


"It is amazing that the amount of news that happens in the world everyday always just exactly fits the newspaper."

The words said by Jerry Seinfeld doesn't fit anymore for today. The online journalism has now been in existence for a generation. More information, more immediately and richer formates on more devides and to many hundreds of millions more people exist than ever before. There is an increasing need for new systems that help us understand information, improve communication and allow us to create meaningful change. The online news is in Beta.

Based on the understanding of our current environment and users, the new For You page is designed to be more personalized, more structured, more engaging and more immersive.















↳ Bing News Follow



Follow is a new feature for Bing News Vertical. Users can follow their interested topics when they are searching on SEARCH page, or browsing on FOR YOU and TOPIC VIEW page.



︎ The Challenge



01  Find a solution that offer consistent and unifying experience to users for different devices (desktop + mobile) and different pages including search (Search + Trusted News) and browse (Topic View + For You)
02  Design under the current Bing news' grid system.
03  Design under constraints : limited image resolution, legal requirements, development limitation.



︎ The Design Solution: One Unified Follow Experience


The ultimate design solution is to provide users one unifited follow experience for both desktop and mobile version.

Desktop and Mobile specs



Browse



Search











↳ The iteration process


In the design process, the possibilities of visual elements, position of follow, user flow and user experience are fully explored and iterated. In addition to the ultimate design solution, three other options are also offered for Follow.



︎ Other Option 02


Two Follow Experiences : A fixed position follow/share floating chevron on the left topic page, which allows users to take action whenever they wish. A promotional follow card based on your interest on FOR YOU page.


PRO:
Follow current topic vs follow a recommended category are significantly different. The floating tab below the page allows users to follow the topic whenever they wish without scrolling all the way back.
CON:
The floating does not communicate well on the page, it doesn’t work well on mobile. It would also be challenging if more actions are available in the future.




Desktop and Mobile specs



Browse



Search









︎ Other Option 03


Two Follow Experiences : A follow button right to the category bar, which allow users to take action whenever then wish. A promotional follow card based on your interests is recommended on FOR YOU page.


PRO:
Follow current topic vs follow a recommended category are significantly different. The follow tab allows users to follow the topic whenever they wish without scrolling all the way back.
CON:
The tab is very confusing, it does not communicate well on what exactly is the user going to follow. It limited the ability to show more categories. It doesn’t work well on mobile. It would also be challenging if more actions are available in the future.



Desktop and Mobile specs



Browse



Search









︎ Other Option 04


Two Follow Experiences : A star icon is on the favicon of the trending topic which the user is viewing. Users can also hover on other trending topics and follow. A promotional follow card based on your interests is recommended on FOR YOU page.


Desktop and Mobile specs



Browse



Search







︎ Other explorations 



Mark