Club 2.0: Enhancing community engagement and retention

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

Why Club 2.0?

The goal

  1. Create a more intimate interaction between the creators and their paid subscribers.
  2. Create some private space to reduce disputes in the public feeds.
  3. Improve retention and engagement.

What’s the problem with club 1.0?

Club 1.0 was a very simple MVP, with not-so-friendly UX. There were lots of bugs and the features were limited.

Most importantly, the structure of club 1.0 could not support the paid subscription feature that we hoped to promote.

Club 2.0 was an important feature in 股市爆料同學會 APP. Check here to understand more basic information about it.

What have club 2.0 accomplished?

+200%
Club weekly posts
+130 (+76%)
Club weekly contributors
+50%
Retention rate compared to overall users

Key points of Club 2.0

To figure out the what club 2.0 key points should be, we interviewed some famous creators on our APP who had experience managing other social media club such as LINE OpenChat (社群) or Facebook Club.

Interviewees included: 肌肉書僮、趨勢King、(PTT股版) 金庸、林威毛、溫裕誠、AllmoneyRise

Designing from Club 1.0 to 2.0

Before the design: Reviewing the 1.0 structure & flowchart

Club 1.0 was an old design, we couldn’t even find the design files. To figure out all the user flows, I screenshotted every screen and drew connections between them.It helped the team to recap the structure of 1.0.

Club 1.0 structure & flow

Revision 1: Club & channel setting page

Key point: Instant, private interaction.
Key point: Multi-channel in one club.

What is a channel? There could be several channels inside a single club so that users could use each channel as a different topic

Setting page redesign
Setting up the club and the channel
Club 2.0 main flow

Revision 2: Member management page

Key point: Admin system.

Club member roles were separated into manager, admin and member, including premium and normal ones.

In the old 1.0 version, users needed to click “查看回答” to approve each applicant, which was quite exhausting.

Old 1.0 Management page

In the new version, users can quickly approve or deny applicants in the pending list.

The admin list was merged into the member list to simplify the segment tabs.

2.0 Management page redesign
Club 2.0 member management

How did the users actually react to club 2.0?

One month after we released club 2.0, we talked with 6 users, including 2 internal colleagues, 2 club 2.0 managers, and 2 pre-club 2.0 managers.

The purpose of the interview:

  1. To prioritize the phase 2 planning on club 2.0.
  2. To understand if users had faced difficulty using club 2.0.
  3. To test the usability of some design iterations.
One of the interview records. We used Google Meet to share the usability testing process with our teammates.

Interview feedbacks

Here were some points about club 2.0 that our interviewees mentioned the most :

Solution: Club 2.0 chat room
The chat room was the most cost-efficient and potential feature to boost our OKR, the in-app duration, and a good solution to create instant interaction.

Club 2.0 chat room

The goal

  1. Improving the instant interactions between club managers and their club members.
  2. Target: Increasing in-app duration.

APP chat room design

The club 2.0 chat room design referred to the following features:

Web chat room design

The chat room web design referred to the following features:

Redesigning the APP UI structure

Problem: In the original club design, it was difficult to show the top section as the chat room needed more space to scroll, and the scrolling direction was opposite with the normal channel.

The problem of the original layout

Discarded solution A:

Open the chat room in a new page.

Disadvantages
  1. With that design, users were unable to switch channels in the chat room, and the process of 'going back' was confusing.
  2. It didn't solve the problem of confusing information.
Advantages

Fastest and simplest.

Discarded solution B:

Creating a Club 2.0 main page.

Disadvantages

Users need to go through the home page before seeing the content, reducing the sense of immersion.

Advantages
  1. Logical and simple UI structure.
  2. Make the information and setting features clear.

Adopted solution:

Put the information and settings in a hamburger menu.

Advantages
  1. Remain most of the user flow of the original design, reducing the risk of unfamiliarity for users.
  2. Although the club and channel settings/information were put in a same page, most users could accomplish major tasks in the usability test.