Mini Program design to improve user engagement
Project Type: Team Work
Role: UI UX Designer
Design background
From 2017 to 2018, I worked as a Product Designer for Bytedance on a product named TopBuzz, which is an all-in-one personalized mobile and web content discovery and creation platform. I had the opportunity to create experiences that touch millions of users in North America.
For platforms like TopBuzz, the core is its content, which connects 2 major user types: readers & creators. We got lots of feedbacks from creators that they struggled with content ideas and were in need of platform guidances. In 2017, Jokes content showed a rapid growth, even surpassing the most popular content type like entertainment and politics. So our team decided to launch an experimental campaign using “Jokes” as the topic, in the hope that we could reuse this component in the future.
Work process
Working with 1 PM and 3 engineers, I led the design of a reusable and resilient mini program feature that supported campaigns and encouraged audiences and creators to contribute more valuable content to this platform
Three primary questions informed my design strategies:
Q 1: How could the users get access to an event?
Q 2: What information does a participant need to know before the event?
Q 3: How could a user know if they win in the event?
Scenario mapping
By scenario mapping, I figured out 3 major function sessions needed for this component:
1: A Banner would be designed to show users where the entrance is.
2: Basic introduction of the event and a real time list displaying the process of it.
3: There would be a winner list replacing the real time list when the event ends.
Challenges
Choosing a right entry point for the mini program was hard at the beginning. We considered two options:
Option1: Banner on the Main Feed Page/Home Page.
Pros & Cons: Attracting most traffic to the event; Causing visual disruption to users; May affect the rest contents on this page.
Option2: Banner appears after clicking Me Tab.
Pros & Cons: Hard to notice this event for users; Easy to modify and control for designers; Less information on this page and more space for design
After A/B test, we opted for the second one due to its controllable quality and appropriate usage of Me Tab space. A notification will be shown on Me Tab during event to increase traffic to the mini program.
UX flow
There were two types of users targeted by this mini program: existing TopBuzz users and potential ones. By mapping the user journey, we noticed two very clear timelines throughout the events. And we also designed the sharing function to attract potential users’ engagement in this flow.
Design concepts
High fidelity wireframes & user flow
Responsive web interface
Social media interfaces
To create a better vibe for the event participants, social media promotion was launched as well.
Design recap
Problem 1: Users can’t share event links to FB and Twitter with right format.
What I learned: Always finish design several days before deadline so engineers can fix unexpected bugs.
Problem 2: Wordings are important to this type of design.
What I learned: Double check all the copywriting with content writers before export to FE engineers.
Problem 3: Countdown component was planned but didn’t implement at last.
What I learned: Complicated components will increase loading time and technical difficulty. Better evaluation of developing cost is needed.
Feature review
This Mini Program was designed and launched within two weeks. Since launch, it boosted 5000 + new postings and 10,000 + clicks on TopBuzz, which demonstrated a high ROI for this platform.
Because of the positive feedbacks from users, we subsequently launched a bunch of campaigns under this scheme, such as Christmas event and Super Bowl event. This whole min program design provided a modular for TopBuzz app and enabled the team to launch other kinds of campaigns better and faster.
