Redesign in Baidu Mobile Statistic

Baidu Mobile Statistic( is an analysis utility for app developers. The developer group can polish the applications by observing the metrics like MAU, retention or conversion.

We start a redesign work for this product since the information architecture is in a mess caused by adding lots of functions on the side navigation, without thinking about holistically. The poor logic of information confused our customers, resulting lower efficiency. What’s more, the design is out of time.

I write about the redesign thinking of some frequently-used components in this article.

Time Picker

The motion graphic shows the former design solutions. You can

  1. Select the exact date

2. Select the time period

3. Select the shortcut like today, yesterday, latest 7 days, latest 30days, etc.

4. Select the whole week

5. Compare two time periods

As we did user research and expert walkthrough, we thought polished micro-interaction design would make this component more efficient.

Here is the consideration during design

  1. In the new design, when you click the shortcut, the time picker component will close at once. On the other hand, you have to click the “OK” button to make sure if you select the specified date. And then why not move the shortcut out of the time pick and just show it above the table? This is more visible and efficient.
  2. In the new design, the arrow on the left of each week was removed, since this function was usually neglected and confusing.
  3. We consider a lot about the solution that when you check the comparing option, the under input box will be filled automatically with previous date period. We thought it would be efficient for users. However, we ran into the dilemma as thinking about the extreme cases. what if there was not enough valid days before the selected period? As the design rules, the dates before the day when the website was equipped Baidu Mobile Statistic SDK couldn’t be selected. So we decided to make the first valid day as the first day of the compared period. I didn’t think it was a good solution because it was not consistent and did not go well with users’ expectation. Moreover, there may be some days overlapping of the two periods, like 12/08/2017~19/08/2017 v.s. 08/08/2017~15/08/2017. The period of 12/08/2017~15/08/2017 was overlapping. I wonder whether it is meaningful in statistic. As a result, I thought the better solution was that once users ran into this extreme situation, the system did not fill the input box automatically.
invalid dates cannot be selected

4. How many months to be shown on the component? 2 or 3 months are the usually design solution. I chose 3-month since 3 month revealed the time continuity directly. Otherwise, you might control each month separately in 2-month solution.

5. How did the data show on graphic if the 2 compared periods were not in the same length? In the older system, the second period would be modified automatically to the same length as the first one once you click OK button. I thought this would make users feel out of control. So I thought it would be better to show the time period as users choose and the dates not selected shown without any data.

Heat Map

A heat map (or heatmap) is a graphical representation of data where the individual values contained in a matrix are represented as colors.

We discussed two designs about how colors represent percentage data. The first one was that every precise percentage corresponded to a kind of color. It represented data precisely, but the comparisons among the provinces were not obvious.

every precise percentage corresponded to a kind of color

Another was that the percentage rang(minimum to maximum) was separated into 5 levels which correspond to a kind of color. There were only 5 colors shown in the map. Data was put into approximate levels and the top ones were underlined. In some cases, you will see 20% and 5% are in the same color but 20% and 21% are totally different.

percentage rang was separated into 5 levels which correspond to a kind of color

I thought first design was better for our product. Although Graphic helps us understand data efficiently and directly, precise data is more significant in such an online statistical tool. And the rang from 0% to 100% was not so large that needed to divided. The second one would be viable for cases related to large amount.

Thank you for reading my poor English : )

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.