​Here are my analysis of specific optimization cases and summary of the optimized experience during my internship in Tencent.

A Growth System to Motivate Streamers
Goal   

After getting more followers, going live for a certain amount of time and other conditions, streamers can get the corresponding perks.

Visual
Problem

How to switch web design into H5?

ANalysis

Due to the limited screen size of phone, there are lots of constraints in transition from web to H5. One thing is the progress bar. On the vertical screen of the mobile phone, the progress bar is not completely displayed, and the spacing cannot be compressed very close, because we have to show the progress in bar. Also because there are levels that cannot be displayed, what should the arrow of its perks card point to is a question.

The other thing is the proportion of green. On the web is small because of the large screen. However, on the mobile phone, the same proportion of green elements will be too much.

SOlution

With the continuity principle, users can slide left to view the hidden progress bar, and then the arrow representing the current level will follow the level text, so that even if the level is hidden, the arrow will not point to the wrong direction.

And the achieved path progress bar disappears, leaving only the tick. Also shorten the length of the green button.

Web

H5

Problem

How to design the upgrade pop-up window with interest and sense of achievement?

ANalysis

Many of the upgrade pop-up windows use rocket elements, but it is a little too much. Then I thought we used the oblique cutting elements in many places. Also I think some animated effect of ribbons can make this process more engaging.

The important information structure of this upgrade pop-up window is who the streamer is including his/her avatar, name, level.

SOlution

I made a 3D-like oblique cut shadow as the font deformation of Level Up. The specialty of the ribbon is not the usual rectangular or folded paper shape, but various geometric shapes, corresponding to our visual IP. Also the animated effect of ribbons is added like popping out in real life.

I put the streamer's information on top-middle and give them a quite large space to stand out.

Stream Analytics page
Goal   

Streamers can know the stream stats, analytics, allocations and so on here to better understand their streams data.

Interaction
Problem

How to switch web design into H5 regarding on the calendar?

ANalysis

On the web, the interaction on selecting which stream to see analytics is by choosing By each stream button, then selecting the stream date, which can only show six stream dates horizontally. The interaction improvement on switching to H5 given to me by the interaction designer in our team is by simply copy-pasting this mechanic and adding a switch icon to switch between stream and period.     I think this interaction is not user-friendly while I am doing visual design. On the mobile screen, only three stream-dates can be displayed. It's too consuming for users to select the date. Also, the switch icon on the right-top is not intuitive. And adding (Each Stream) texts in the title to make the meaning of transition clear makes the spacing too narrow, which is not a good way as we are a multi-language system.

1

SOlution

Therefore, after I analyzed the pain points, I designed a drop-down box for this function on H5.     On the left side of the selector, I put the switch icon right beside By each stream text, which helps the users understand the transition is just for this area clearly, not the overall page if put on the right side of the page title. Moreover, I put the stream dates in the drop list, which more than 10 stream-dates can be displayed at once, and scrolling down action is easier for users to do compared to scrolling left. My design got approved by our team leader.

2

1

2

H5 - before improvement

Web - date-picker

H5 - after improvement

Web - Calendar

H5 - Calendar

Visual
Problem

How to save space and development cost on displaying the Stream Stats panel on web & H5

ANalysis

First, the early version of Stream Stats given to me    is a bit waste of space as this panel is non-interactive and doesn't have much information. Second, while transforming to H5, the first strategy of Stream Stats panel is like   . By taping on the filter bar, your raise up an action sheet and select the filter respectively. However, this costs extra development effort because we already have an adaptive matching version of H5. If we change the whole interaction, programmers need to re-code.

1

2

SOlution

The solution to the first problem    is this   : I refined this by designing one single card that includes overall information and separates the left and right information by dividing lines. In this way, I saved 40% space. Second, the solution to decreasing development cost is    : I removed the action sheet filter and add a Show more button to display the information other than six. Because it's unpractical to show dozens of stats at once on such a small screen. The time to develop saves sharply in this way.

3

4

1

1

Before improvement -1

3

After improvement -1

2

Before improvement -2

4

After improvement -2

Revenue Analytics page
Goal   

For streamers to know the details of their revenue and subscriptions. And they can cash out or exchange to elixir using the gems got from fans.

xinranzh@andrew.cmu.edu | Tel: 86-18038161913    +1-4125834745

©2019 by Zhan Xinran. All rights reserved.