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.
year
2019
duration
10 weeks
Speciality
UX Design, Product Management, Marketing
client
Fudan University
role
Project Lead, UX Designer
team memebers
Sihao Xie, Junte Ma, Ryan Lau
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.
FACTS AND IMPACTS
15
days’ launch
74,445
accumulated users
2x
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?
INITIAL WIREFRAMING
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.
DESIGN ITERATIONS
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
Problem
Nominees’ names used bold and big fonts, without a length limitation. During testing, some names appeared too long to read.
Solution
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
Problem
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.
Solution
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
Problem
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.
Solution
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
TOPPED SEARCH BAR AND STICKY SEGMENTED CONTROL
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.
LIVE STATISTICS
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.
NOMINEES LIST
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.
ID LABEL
We use Dinkie Bitmap typeface (cr. Wille Liu from 3type) for ID labels to replicate the appearance of a barcode.
PERSONALITY TAGS
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
reflections
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.
