GuguBird: A Customized News Reader

News reading is among the top of services people use daily. However, the usability of normal news reader apps are questionable. "Why do we have to browse news category by category? Why can't the app know my preferences and recommends the very news I like?" I led a cross-discipline team and we answered these two questions with our innovative product, GuguBird. With this app we beat the other 400 teams and won the first prize in an app development competition.



During a campus promotion event in Tsinghua University, my friend Ruizhi and I heard that the Panguso company was holding the Mobile Search Inno­va­tion Com­pe­ti­tion and we decided to participate. The Pan­guso is a lead­ing search engine com­pany in China with a strong con­nec­tion to the most famous Chi­nese news media, The chal­lenge of the com­pe­ti­tion was to develop the next gen­er­a­tion news mobile application. So we build up a team for this competition and I was selected as the team leader.

Jul. 2012 - Oct. 2012


3 Industrial Engineering students, 1 Journalism student, 1 Art & Design student, 1 Automation student

Won the first prize. I was standing in the middle of the team.


  • Team leader
  • Preliminary idea generation
  • Preliminary function designs with low-fidelity prototypes
  • High-fidelity prototype (iOS) development and testing
  • Presentation in the competition "Mobile Search Inno­va­tion Com­pe­ti­tion", Panguso Company, 2012



In order to bet­ter under­stand our users and scope the prob­lem, we started with user interviews/ observations and sec­ondary research. Through the research, we found that:

  • people only use short and segmented time for news reading;
  • mul­ti­task­ing was often involved;
  • cur­rent apps didn’t offer enough customization options;
  • cur­rent apps offered overloaded con­tents with low rel­e­vance to per­sonal interests;

There is a white space in user-centered news feeding.


Based on our find­ings from research and the con­straints given by the com­pe­ti­tion, we began to brain­storm ideas. After sev­eral rounds of syn­the­siz­ing, we nar­rowed down to the fol­low­ing three design directions:

  1. Sim­ple and con­cise interface;
  2. Per­son­al­ized news feed;
  3. Intu­itive gesture-based navigation.


Pro­to­type! The fol­low­ing low fidelity pro­to­types were made to demon­strate the key fea­tures and basic flow of our app. This pro­to­type was done in Balsamiq.

The first screen shows the account info.

The second screen shows the gesture: swapping right to mark the news "not interesting".

The third screen shows the gesture: swapping left to see in details.

Shows the transitions among each screen


We tested our pro­to­types with users and col­lected feed­backs. From these feed­backs, we cre­ated the fol­low­ing high fidelity inter­face mock­ups to give users the look and feel of our app. This inter­face mockup was done in Photoshop.

High-fidelity prototype, first made in Photoshop, later realized by the iOS App


  • No big categories for news App anymore! Only one streamline showing interesting news.
  • Intu­itive ges­ture: swapping left to read in details, swapping right to mark it as "not interested"
  • Unique algo­rithm: automatically learns user behavior and interests and only the user-interested news are provided.
  • Enhanced user-experience: one-hand oper­a­tion; news reading with low-speed Internet connection; later-on registration, …

Learn­ings & achievements

  • Project management from the initial idea generation to the final product
  • Working in a diverse-background team: coordination
  • How to code basic iOS applications, especially transition effects
  • Use of UI design tools: for the wireframe (low-fidelity prototype)
  • First prize of the Mobile Search Inno­va­tion Com­pe­ti­tion, top 1 of 400 design teams.

Back to portfolio

Welcome to your comments!

© Chen Liao, Last update on May 19th, 2017