What are unique usernames and why is it important?

On Mercai, users can set up their ‘display names’, a highly customizable name for users (they can use emojis and special characters). However, display name allows duplicates, meaning that if enabled mentioning feature, a user will probably see at least two thousands of ‘John Smith’ out there. And this is why having ‘unique usernames’ is so important.

Here are some other reasons why having username is important:

• Enhance user interaction

  • Common interactions such as mentioning and searching users

• Maintain user brand identity and be easily recognizable across platforms

  • URL can be format into ‘mercari.com/username’ to allow easy sharing

  • Youtube, Instagram, x, Mercari etc. can all be using the same @username

• Security

  • Since username is unique for each individual and cannot easily be duplicated, it avoids impersonification.

Project constraints

• Timeline constraint

  • Need to ship the design by early April to meet an influencer event hosted by Mercari

• Engineer resources limited

  • With only 1 backend and 2 frontend engineers and tight turnaround time, a lot of UX decisions need to be compromised

Competitive analysis

I kicked off the project with competitive analysis. I wanted to understand how the apps present the identifier’s prominency. After looking at platforms like Youtube, X, Instagram, Facebook, and Linkedin, my key takeaway is that each platform has their own reasoning to spotlight display name or username. My assumption is that this is based on each platform’s goal to social interaction. The stronger social and casual interaction, the more likely username has stronger prominence.

The balance between display name vs username

It was clear to me that the first thing we need to do is to define the functionality of each identifier. That way, I can make a deliberate decision on which identifier to surface when designing. To do that, I worked with a content designer and a PM to holistically investigate the platform and map out the below display scenarios.

Here are the areas that we collectively decided to surface username:

• User profile

• Messages

• Comments

• Mentions

• Item detail page, seller information section

• Signup onboarding

• User search (remove scoped for this project due to limited resources)

Explore identifiers’ visual hierarchy

My goal for exploration was to set the precedence for identifiers’ visual hierarchy. This is the principle that was previously set:

• Display name remains the main identifier on Mercari due to the familiarity and strong association between users.

• Username name will be secondary identifier
  

To honor the principle, visually I split the identifiers into two lines and decrease username one font smaller. The considerations are:

• Better readability, especially when scanning content

• Establish a clear and scalable layout across various surfaced screens

Mentioning interaction exploration

Mention interaction has to be follow common behavior. With some explorations and internal team feedback, here are some design takeaways:

• App mentioning interaction

  • Having user list within bottom sheet ensures relevant information stays in the same panel

  • Modal creates unnecessary layers

• Fixed positioning for desktop interaction

  • User can always expect to have the user list at the same place

  • Visually less disruptive when user is typing longer content with dynamic positioning

  • Easier to implement from development perspective

Great visual balance with current layout

With so many information existing on the platform, I was able to achieve a good visual balance by meticulously thought through the font and environment where username will surface.

Clear mention interaction across devices

No matter which device you’re on, the mention interaction is clear. The interaction follows the common mention interaction on other social apps, users can just adapt very easily.

Plays well with other comment features

I took legacy comment features, such as sharing url link and using hashtag, into visual design consideration. I made sure username visually can live with these other features, and not have duplicate styles.