Project Overview

Jiangsu Broadcasting Corporation is a leading media company in China. In 2013, the Digital Media Center of JSBC decided to design and develop its news App, Litchi News.

This app offers breaking news streams, interactive features, video, online columns and articles covering politics, economics, social problems, arts, culture, technology and more. And users can set up the topic menu based on their preference. Besides that, users can browse “Suggested for You,” a feature of providing news stories catered to their most recent searches. Moreover unique gesture motions and audio news feature brings an enhanced user experience to our target-users.

After rounds of research, brainstorming, designing, and discussion, we were able to distill a final list of requirements  and design for version 1.0. The App was launched on App Store (iOS version) and Android Market (Android Version) in August 2013. In the following two years, I was responsible for providing digital product solutions for the upgrades of Litchi News based on users’ feedbacks and exploring new features for the App.

Till 2017, Litchi News was downloaded 5 million times on Android and iOS platforms. It was named as one of China's Top 10 News app in 2015 according to iResearch Corporation.

Due to my contract with JSBC, I can't put all the details of my work online. However the case study showed the general design process and some research results and design layouts.

Note: All these researches were conducted in Chinese. For case study purpose, I transformed these researches into English.

Team

Our team consisted of more than 20 people from different departments, including software engineers, journalists, graphic designers, product managers and UX designers.

My Responsibilities

Research & Insights

➭ I conducted primary research about more than 30 news apps in China.

➭ I gathered and analyzed user user surveys and user interviews and translate these research into real features.

Conceptualize & Design

➭ We generated insights from research and use them to guide our design.

➭ We collaborated and delivered personas, storyboards, user flows, IA, etc.  I created the wireframes for user testing. Then I collaborated with a group of graphic designers to work on a full set of UI design. 

Project Management

➭ I learnt to aligned the product vision with corporation's vision and goals.

➭ I participated in weekly meetings with product managers, lead software engineers, lead graphic designer, and the executive editor. I helped to clear and track the progress of the app.

➭ I worked  with software engineers and learnt their language (coding) for better communication.

How to differentiate Litchi News from other news apps in China?

More and more people get news on news websites and apps these days. There are tons of different news apps in China,  like Tencent News, Easenet News, etc. All these news apps have their unique features to attract users. It was important for us to figure out our users and their needs. Then we can ideate and narrow down our design options for our target market. We conducted user interviews and secondary research to better understand our users and scope the problem.

How to create deeper relationships with our users?

The other challenge was to evolve with our users. Litchi News would offer a more personalized news feeding experience for our user. Moreover, with the functionality - audio news, we intended to create more convenient experience for our target user - people on the go. We hoped to create deeper relationships with our users with such special features.

Competitive Research

Since 2010, individual mobile news consumption has grown rapidly. I was assigned to accomplish the competitive research in order to overcome the challenge of creating deeper relationships with users and entering the highly competitive digital news segment in China. I downloaded almost all the news Apps in China and compared the topics they focused on, special features they had, and their design principles and UI design.

User Research

Our team tightly defined our target users as people liviing in Jiangsu area or Eastern China who enjoy the TV program braodcasted by JSBC and interested in reading local news with their smart phones. Having such specific audience was helpful throughout the entire design process of Litchi News. We conducted both user surveys and user interviews. Based on the quantitative and qualitative research, we had better understanding of our users and knew more about the problems we are trying to solve.

Based on the research above, we started to create personas fit our audience description.

With our personas, , we created a few storyboards for our core customers to present how they used the news app and where they used the news app. 

Based on our findings from research and the constraints given by the competition, we began to brainstorm ideas. After several rounds of synthesizing, we narrowed down to the following 5 design directions:

⇥ Simple and concise interface: clean layout provides better reading experience for users
⇥ Personalized topics: users can personalize the topics they are interested in and save news they consider important
⇥ One-hand navigation: we want to make sure, users can easily navigate our app with one hand
⇥ Special feature for elder group: based on our research, a large amount of our users were over 50. Users can adjust the font size easily by themselves
⇥ News broadcasting mode: if users hands are occupied, they can just click one button and listen the news

With a clear definition of target users, we started the project with the dividing news, photos, and videos into different categories. A sliding menu structure was chosen to allow users to find sections quickly and minimize the presence of UI elements on each page.

One of the most important parts of our design was to decide what content and how the content would display in the news app. Different users may acquire different content type. We used the qualitative data of our user surveys to support our decisions on content. Mapping the information architecture allowed us to discuss which asset types should be supported in each category and to devise a taxonomy of page layouts.

With the AI and a lot of discussions, Litchi News began to take shape. Here I accounted for new users and existing users and gave basic form to the topic system that would power the app. In order to make this app different from other news apps, I incorporated a quick way to let users define the navigation bar of news topics by themselves. These screens provide the basis for that interaction:

Wireframe

For displaying content, I began to wireframe the various page templates. We chose familiar design patterns as a starting point to ensure that tasks within the app were learnable and efficient. We considered different layouts including different visual variety, headline/image treatments, and the number of cells-to-screen ratios.

User Testing

Then we threw this version of wireframe into user testing. We collected the feedbacks from our testers.

Feedback 1:

Users considered the display looks good, but they were worried about the data usage problem. They wished there would be less images or smaller images.

Iteration 1:

Our final decision was based on user feedbacks and the mobile network operator situation in China since the speed of cellular data is limited and users are not able to connect to Wifi all the time. We make users can control if they want the app to download images or not to save their data usage.

Feedback 2:

Users found it hard to reach the hamburger button in the upper-left corner with one hand.

Iteration 2:

We canceled the hamburger button. Instead, we moved the menu to the bottom of the screen. So users can easily navigate with one hand.

Feedback 3:

Users found it is hard to reach the header image in the article page and swipe it.

Iteration 3:

We put the images among the articles, users just need to slide down to check the news. They do not need to change their navigation gestures consistently.

We iterated and refined the design based several rounds of user testing. And the final design consisted of the following features:

✓ This was the first time I designed a digital product from zero. I had to learn everything  by myself. Luckily I can find all the resources and materials I needed online. Besides that, my colleagues and supervisor taught me a lot about user survey, user interviews, and UI design.

✓ I learnt how to present my ideas in front of team members and stakeholders.

✓ I learnt how to balance business goals and user experience and when to make trade off.

✓ I became a better communicator when collaborating with colleagues from different departments.