my role

I initiated and lead this project from team building to product validation as a product manager and UX designer.

Teamed with 2 developers and 1 UI designer over 10 weeks, I witnessed an inadequate product become an impactful success, setting a new standard for red-carpet engagement on campus.

Red-carpet Nomination Mini Platform

a comparison between 2017 and 2018 version

the prequel

The platform was outsourced originally and designed primarily for the web two years ago. Inconsistent and unfriendly user experience was its major pain point.

In 2019, the platform will be where the Fudan Graduation Gala red-carpet event nomination takes place from May 5th to May 22nd. It means we need to finish the project in 7 weeks.

the problem

How can we make a better online nomination experience for our users?

the solution

Our team presented a mini nomination platform[1] based on Wechat Mini-program[2] where more user activity and social sharing are encouraged.

Built on the principle of reliability, fairness and transparency, the platform optimized the experience of both voters and nominators and flavored the nomination process with narratives and social sharing.

We also made the back-end interface clearer and easier for admins to manage and monitor under both daily and extreme cases.

[1] This platform was only available online from May 5 to May 22, 2019.
[2] a framework supporting “sub-applications” within the WeChat ecosystem.



days’ launch


accumulated users


last year’s total

insights mapping

This journey map showed user journey under 2 main scenarios as well as the place where back-end and front-end interacted.

Research process

The research goal was to gather needs from different parties: school managers, client representatives and students. I talked to each, gathered needs and feedback into a matrix.

Voting and nomination as two main user scenarios, the platform should also take extreme cases, visual identity and back-end integration into account.

problem redefinition

HOW MIGHT WE make the voting experience more fair and engaging, and the nomination experience more simple and transparent in one app?


This initial wireframe included all important features in low-to-mid fidelity. After showing it to the team and stakeholders, more discussions were generated about the filter design and real-time statistics on the home page.


We went through two rounds of improvements: one before launch, one before closure. These two rounds helped us fix unexpected problems beforehand and evolve closely with the campaign.

Old: Nominee’s profile header


Nominees’ names used bold and big fonts, without a length limitation. During testing, some names appeared too long to read.


We solved this problem by wrapping names and numbers in a flexbox for width auto-adjustment to ensure the interface won’t break.

Updated: Nominee’s profile header

Old: Homepage filter and sorting


The left segmented control wrote sequential order but wasn’t clear about what that number meant. Users thought the grey text under the segmented control would change when they switched between the tabs. The right tab icon was confusing.


We replaced sequential order with nomination order, moved the grey text to the top, topped the search bar when scrolling down. We also changed the icon into a form shape so it matched with the content in that tab.

Updated: Homepage filter and sorting

Old: Nominee’s page sharing menu


Users will receive a pop-up window to share the nominee’s profile to Wechat moments[3]. But Wechat Mini-programs didn’t support that function technically.


We changed the sharing options to DMs and enabled users to download a promotional card to the album for later social sharing and redirecting back to the profile page by a QR code.

[3] WeChat Moments are status updates, pictures and videos that users can share with their friends (or a select group of friends) in their Moments feed.

Updated: Nominee’s page sharing menu

Thrived sharing under technical limitation

Hundreds of memes were created based on the original picture and spread on campus. How student communities thrived in voting using this feature surpassed our expectation.

Final design

Vote With Clear Navigation


The search bar is always on the top. The segmented control sticks to the top of the page when a user scrolls down the nominees list.

A user can easily navigate themselves to searching nominees by name or ID, or change the sorting even if they are in the middle or end of the list.


The live statistics section displays real-time nominees’ submissions and total votes with red underlines. It aims at creating a live atmosphere in the App and encouraging users to go back even without a specific goal.


The nominees are encoded into 2 sorting types: ID and popularity. A user can see the ID, nominee’s name and tag, and a vote button for every nominee. They’re adequately informed to cast a vote or to decide on whether they’re entering any profile page.

A Vivid Nominee Profile Page

The nominee profile page is plainly laid out from top to the bottom. The text size, negative spaces and colors give the interface a clear priority and implications of possible interaction.


We use Dinkie Bitmap typeface (cr. Wille Liu from 3type) for ID labels to replicate the appearance of a barcode.


Tags are limited to 15 words and serve as a one-line callout. Other than names and stories, tags gave nominees a chance to showcase their personalities.

Nominate With Ease

Nomination can never be this easy. The form is designed simple and straightforward. The use of placeholder and caption text prevents errors in advance. The page also provides a submission status page and enables notifications of users’ latest status of submissions.

Submission status page

No submission blank page

Nomination tab entry page

Nomination form

A Climax of Closure

We did a short version update for a closing event after the vote closed.

We gave out souvenirs to the first 200 users who voted up to 48 times. This event was a hit and propelled the red carpet into the next chapter.

Homepage with a lottery closing event

Homepage with an opened lottery


Creativity comes out of limitations.

We had two limitations. First was time and budget, second was technical limitations for social sharing.I learned correct scoping and essential trimming to deal with the first.

For the second, I was amazed at how our solution actually sparkles users’ creativity in a social setting. I wonder if there’re more chances for gamification to come in and surprise me in digital social interaction in the future.

Agile collaborative environment accelerates product development.

None of us had similar project experience. Within limited time, we collaborated closely together. The team multitasked a lot, for example design and development. Besides, leaning on iterations helped us pivot quickly to better iterations rather than debate within the team.

Be cautious of contextual factors when designing user experience.

Being in the community as a student was a huge privilege. It helped me understand the context well and gain user feedbacks easily. As an international student, this experience cannot apply in the U.S. setting, especially when voting is such a cultural event. As designers, we should be wary about our standpoints and the context including but not limited to culture.

Learn from users and product history as much as possible.

Our two iterations were products of learning from users. One thing I regret was not having collected feedback from users after the vote. Even if not for feature or usability testing purposes, I’d love to hear their stories during this nomination and voting process. That will help me better understand where I should put more attention on a social event later.