Fudan Red Carpet Nomination App



Timeline
Mar - May, 2019
Client
Fudan Art Troupe
Role
Project Lead
UX Designer
Team
Simone Liu
Sihao Xie
Junte Ma
Ryan Lau 
Special Thanks
Ard Su 
Huijia Huang 
The Red-Carpet Nomination App is a nomination platform to nominate candidates and vote nominees for the annual grand Graduation Red Carpet event in Fudan University.

This year, we transplanted the original web-based platform to Wechat Mini App and renovated the whole user flow.

I built a product development team from scratch, spearheaded redesign strategies in prototypes and co-worked with client’s marketing team. 

* The App was only available from May 5 to May 22, 2019. Since the nomination was closed, you can only visit the 404 page. Sorry for the inconvenience.




INTRO

Graduation Red Carpet



Red Carpet is the last item to check off the graduation bucketlist in Fudan.
The nomination will take place solely online in May. In June, nominees will have the chance to walk down the Graduation Red Carpet in the beginning of the Graduation Gala, bathing in the admiring gazes from a stadium of all Fudan graduate students, faculties and their friends and families.



2019 Fudan Graduation Red-carpet Nominees





CHALLENGE

Optimize voting and nomination experience for both users and admins



Within such limited labor, time and budget, our goal is to optimize the user flow on both front and back ends, and maximize the role that platform plays in the whole nomination process.

The platform itself, not just a passive by-product that even barely met the basic needs of nomination as it was in the past years, is an active online place where dynamics are shared and created during nomination at the same time achieving every requirement it needs to serve.

- For nominators on the mobile end, the platform should be light to use, easy to track real-time changes in ranking, responsive to any input.
- For backstage admins on the web end, it should also be clear to observe, easy to edit, modify and download data.

Higher-level goals are:
1. Match the dynamics of the platform with the integrate timeline of the promotion month.
2. Encourage more participation and creativity in users by proper strategies.





IMPACT

A Highly-engaged Online Experience





15

days’ Launch

74,445

Users

Doubled

Total Users of Last Year







PROCESS OVERVIEW
Design By Iterations



The whole project development ranged from March 15 to May 23. I started a team within one week after the first call with Art Troupe. With a new team and limited time, we successfully pivoted different design stages through constant small iterations.


CONTEXT

The Original Platform



Though the original platform was designed web-based, users normally used it on the mobile end. The improper choice of platform and inconsiderate design decisions listed below resulted in unpleasant user experience.
Besides, the platform needed a clear back-end interface to review submissions and monitor abnormal activities.


INITIAL RESEARCH

Learn From Past Red-carpet Experience


After several talks and one interview with our stakeholders, Art Troupe students and faculties in charge, as well as some of the team who designed previous red-carpet web product, I gathered needs, got concerns from different parties, and fully understood some important mechanisms to prevent potential extreme occasions from past years.




SYNTHESIS

Mapping Key Points Along the Journey


After analyzing problems in the past web platform and collecting main considerations from stakeholders, I re-organized the priorities in functions and mapped out crucial points in the overall user flow. Besides, I took admin-end demands into consideration, bridging where the front end met the back end. 




I then showed the diagram above to the leader of the admin team, as well as the director of graduation red carpet. I detailed the discussion into low-fidelity prototypes, showed it to the stakeholders again and quickly shared it to my product team for a brief.


Low-fidelity Prototype



FINAL SOLUTION

A Live and Light Red-carpet Voting Experience


The project went on incremental iterations in the next 3 weeks. We revised ux logic, animation, typography, banner, color choices for several rounds. Before its launch, we asked 25 admin staff to use the Wechat Mini App and back-end interface separately to test. 
Unfortunately, in this documentation we lost any visual about the back-end interface. One thing for sure was that there was no confusion in the later use from admins after our tutorial workshop.




Vote With Clear Navigation



ALWAYS-ON SEARCH BAR
The search bar is always on the top of the navigation bar. A user can easily navigate themselves to searching nominees by name or ID.

LIVE STATISTICS
The live statistics section is placed below the banner with red underlines. It displays real-time nominees submissions and total votes. This aims at creating a live atmosphere in the App and encouraging users to go back even when they don’t want to nominate or vote specifically.

NOMINEES LIST
The nominees list is topped with a segmented control to switch between two different sortings: ID and ranking. A user can see the ID, name, tag and the vote button for every nominee. Without going into the profile page, they’re prepared to cast a vote or to decide on whether they’re entering certain profile page.

STICKY SEGMENTED CONTROL
The segmented control sticks to the top of the nominees list section when a user scrolls down the nominees list. They can change the sorting or go back to the top of the list even they have scrolled down quite a bit.





Know Nominees Better in a Well-organized Storytelling Narrative



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. The typography and type setting adapt to  Chinese characters, Latin letters and Emojis.

ID LABEL
We use Dinkie Bitmap typeface (cr. Wille Liu from 3type) for ID labels to replicate the appearance of a barcode. These labels appear distinguishable from other fonts in the app. 

TAGS
Tags are limited to 15 words and aim to give a one-line callout to the nominees. Tags are the only visual element displayed on the homepage to impress the voters without entering the detailed profile pages.


Share With Fun and Creativity



Sharing is a bit complicated under the WeChat environment. WeChat users are only allowed to share Mini Apps to DM chats (聊天窗口) instead of Moments (朋友圈). To encourage online social sharing, the crucial part in any voting campaigns, we create another method – sharing with a pic. When a user presses the ‘share’ button, a share sheet pops up listing two options: “Share with Friends” that goes to DM chats, and “Save Poster for Moments” that generates an image into the user’s album for later cross-platform sharing. 


Nominate With Ease

Nomination is the easiest in the history. The visual style of the nomination form aligns with the system to match user’s existed mental model. Placeholders explain what should be written in each line.
After submission, a user will have the chance to go to a status page showing your previous submissions and their current status. The user will receive a notification when a change in status happen.


A Second Climax of Participation After the Vote Ends


As the vote closed. We are giving away a limited number of souvenirs as a thank you gift to our users. The first 200 users that have casted 48 votes will receive the gift. We released the announcement 24 hours before the vote closed to prevent any cheating behavior.

All-compassing Usability


Bold and big fonts often come with issues in some extreme conditions. Whether it’s a super long name or a 6-digit number, our product performs the best under every condition. Flexbox enables an auto-adjustment to the width of each element based on priority to ensure the interface won’t break.
Nominee Profile Page



Legibility in Simplicity


The visual system follows our pursuit of simplicity. Indicating a graduation cap, the logo conveys clearly with an eye-catching red background.The banner conveys essential information in conformity with the whole visual style.
App Banner & Logo (Click Arrows to Switch)



TAKEAWAYS

Constant incremental iterations are key to success against multiple limitations.

The team was new. None of us had done a project like this before. Time was limited. We barely had any budget. The first thing I did was scoping to make sure the stakeholder didnt require tons of interfaces and heavy functions. Through multiple iterations, we managed to pivot from one milestone to the other. Leaning more on iterations also helped us spend less time debating within our product team but absorbing direct response from outside. 
One thing I regret was not having collected feedback from Mini App users during and after the vote. We did do one round of iteration and debugging, but since the stakeholder was pretty satisfied, I forgot to ask users if there were any trivial confusion or redundance in using this Mini App. 

Digital experience aims to serve offline human interaction.

This red-carpet nomination campaign contextually was the first shoot for the 2019 graduation season, supposed to heat up the graduation atmosphere across the campus. I was more than surprised to see how creatively votes campaigned for their nominees in Wechat Moments and group chats re-creating the images we designed. Besides, the word limitation of tags sparked impressive one-line features. 
This year unprecedentedly we added an ending event at the last day of nomination. Ard Su designed four illustrations for graduation which were then printed into acrylic decorations. Every user who voted equal to or more than 48 times would have the chance to press this ‘lottery’ button. Based on ‘First come first serve’ principle, we distributed 200 samples to all Fudan students and faculties. 

A product works better in collaboration and under context. 

The biggest advantage for me in this project was: I was a Fudan student. This means I knew how graduation events could be like, how everyone thought of them, how to reach potential users and get my users for testing. Also, as I knew most staff in our client Fudan Art Troupe, I could talk to them easily and ensure every communication was in the same page. Even I could apply my own ideas of making an ending campaign to the marketing team.