Data-driven design cases for enhancing product usability and user experience

My Role

Roles
Web/APP Designer
UX Researcher
Team
Julia, Sydney, Terry (PM)
Tianyu (UIUX)
Asher, Larry (Android)
Ann, Julia (iOS)
Timeline
2022/6/1-now

Summary

股市爆料同學會 is a social media platform focusing on Taiwan stocks, and its APP was released in 2020. Our users were mostly 30-60 years old and had investment experience.

I started to design this product on June 2022. Our team was running on the 2-week sprint, so the following steps would be my design routine.

The Product Flywheel

Our product flywheel was based on the interactions between creators and readers, and our OKRs were consistently aligned with the flywheel.

For less than 1 year, we had tried at least 50 iterations in an attempt to reach the quarterly OKR.

In this chapter, I will share with you some design cases that I find interesting.

Case 1 : Motivate users to add stocks to their watchlist by A/B Testing and experience improvement

Goals

Increase the number of “successfully add to watchlist.

**Note: We have previously found a positive correlation between adding stocks to the watchlist and the retention rate, as users receive more relevant articles that align with their interests.

A/B Testing - Redesign the “add to watchlist” button

In our A/B testing, we replaced the 'add to watchlist' icon with call-to-action words and tested the bellowing two variants:

  • B: Red background, white button, to remain the original background color in the control group.
  • C: White background, red button, that aligned better with our product's design guidelines.

We chose variant C due to its higher CTR and 'Add to watchlist' percentage.

Redesign the “select list” modal to improve the user experience

During our usability testing, we discovered that the original “select list” modal made the new users confused.

The original version
The revised version

Case 2 : Using threaded comments to boost user engagement

Goals

  1. Increase the average number of comments per user.
  2. Encourage more users to leave comments.
  3. Resolve the issue of the author being unable to respond to their readers’ inquiries.

Wireframe & Analysis

Our team decided to make a basic thread with only one hierarchy and no tagging.

I took the interfaces of Dcard, Instagram, YouTube, Facebook, and Twitter as references, and ultimately chose Facebook and Instagram for the bellowing two reasons:

  1. Our users are mostly 30-60 years old and are familiar with Facebook.
  2. Since we only have one hierarchy, the reading interaction on Instagram was more similar to our product.
Reference

Design

Since our plan at that time did not include a tagging feature for names, I combined design elements from Facebook and Instagram to create a version that best suited our product.

Result

4 months after the feature was launched, the average number of comments per user has increased from 12 to 18 (+51%). Moreover, the number of users leaving comments has increased by 6.74%, and threaded comments make up around 20% of all comments.

+51%
Comments by per user
+6.74%
Users who left comments
20%
Threaded comments of all comments

Case 3 : Encourage users to enable push notifications through intuitive design

In the previous A/B Testing

Our team tried using an explanatory pop-up to encourage users to enable push notifications, but it actually decreased the conversion rate by 4%. I assumed this may be because it required an extra click, which made the process more complicated for users.

The new design

Therefore, in the new design, I used animation to highlight the action button, making the call-to-action as intuitive as possible.

Result

+9.1%
Enable notifications CTR

Case 4: Improving the reports and news page view and reading experience

Goals

For the reports and news article:

  1. Increase the page view / per visit.
  2. Increase the article impression / per visit.
  3. Improve the reading experience.

Design

The old version
the revised version

Results

+380%
Article impression
+228%
Article view / per visit

Case 5 : Including titles in articles to increase the overall article CTR

Problem

During past interviews, users frequently complained about the inefficient and cluttered browsing experience in our APP. Some content creators we interviewed also believe that titles can attract readers to click.

Goal

Increase the article CTR.

Design for the posting page

Discarded solution
Adopted solution

Results

To prevent some users from abusing the title function and lowering the quality of  content, currently, less than 40% of users are able to use titles.We will keep monitoring the data performance to decide whether to lower the criteria.

+7.2%
Page view / per visit
+200%
CTR of articles with a title compared to others