Urban Dictionary share widget

Urban Dictionary share widget

Urban Dictionary share widget

Urban Dictionary share widget

UI/UX Designer @ Urban Dictionary

UI/UX Designer @ Urban Dictionary

UI/UX Designer @ Urban Dictionary

I designed a share widget that allows users to share Urban Dictionary definitions anywhere — by saving definitions as images, embedding them, or sharing them as links.

I designed a share widget that allows users to share Urban Dictionary definitions anywhere — by saving definitions as images, embedding them, or sharing them as links.

I designed a share widget that allows users to share Urban Dictionary definitions anywhere — by saving definitions as images, embedding them, or sharing them as links.

About Urban Dictionary

About Urban Dictionary

Urban Dictionary, founded in 1999 by Aaron Peckham, is a crowdsourced English-language online dictionary for slang words and phrases.


As a UI/UX Designer at Urban Dictionary, I worked with Aaron on improving the main site to enable better external sharing and discovery to the Urban Dictionary store and sub-sites.

The problem with limited sharing options

On the previous definition cards, there were only two sharing options — share as a Tweet, and share as a Facebook post. Clicking on either one would open a new tab on Twitter or Facebook, with the link to the definition inserted into the post creation input field.


The problem with this was that people weren't able to share definitions if they wanted to share them outside of Facebook or Twitter. To get the link to a definition, they would have to click on either the Twitter or Facebook share buttons and copy the link generated.

Project objectives

Project objectives

Project objectives

The goal of this project was to expand the share function on the Urban Dictionary main site, to ultimately encourage more sharing activity among users across social media platforms and websites.

A task breakdown:

Enable sharing definitions across any social platform

Enable embedding definitions on webpages

Gathering insight and exploring our options

To fully understand what the current industry standards are and what the best way would be to display all sharing options, I first gathered insight into how other sites are enabling sharing of their content.

While looking at all the different ways the internet handles the sharing function, I noticed that all content-oriented apps and websites have essentially 3 share options — Copy link, Embed, and Share to (other platforms).


The only difference I noticed was that some sites would offer the option to share directly to specific social sites, while others simply emphasised on allowing users to copy links that they can share anywhere.

Based on these observations, I listed all the share options worth exploring and drafted a few solutions that would encompass all of these share options in different types of modals.

  1. Ellipsis button + List dropdown that contains all action items for a definition, including share options and Flag.

  1. Share button + List dropdown that contains only share-related action items for a definition.

  1. Share button + Popup modal that contains only share-related action items surrounding the definition, with social icon buttons and a link preview.

The explorations that won

While I was conducting short user tests with a few Urban Dictionary users, I noticed that their eyes lit up when they got to the explorations with visuals and coloured icons. I eventually decided on the more visual-heavy exploration because it was also the option that incited the most positive responses and excitement. And since sharing is all about feeling that extra push to get the word out there, this choice made sense.

Features snapshot

Features snapshot

Features snapshot

Copy link and save as image to share anywhere

Easy social sharing with social icon buttons

Copy embed code on web view

Simplified view with native sharing on mobile

Post templates to encourage more discovery

Copy link and save as image to share anywhere

Copy link and save as image to share anywhere

For users to have the freedom to share a definition anywhere, they would have to either retrieve a shareable link to the content or save the content locally for manual sharing.


The added functionality to save as image inspired an image preview on the share modal to let users know that when they share, they are sharing the image in the preview.

Easy social sharing with social icon buttons

Easy social sharing with social icon buttons

Although users would be able to share definitions anywhere with shareable links and images, we still wanted to provide easy and direct ways to share definitions to the most popular social platforms.

Copy embed code on web view

Copy embed code on web view

To provide the option to share a definition on custom webpages, I included the option to copy the embed code of a definition in the same modal.

Simplified view with native sharing on mobile

Simplified view with native sharing on mobile

Translating the design to mobile required for the content to fit a narrow vertical layout and also deliberation on what to prioritise.


Knowing that people use social media on mobile way more than on web, it was crucial to spotlight the social icon buttons. To also tailor the sharing experience to each user, I enabled a Share via option that would open up the user's native share sheet.


To keep things simple, I removed the embed button from the mobile widget and omitted the link preview, stripping it down to only the Save as image and Copy link buttons.

Post templates to encourage more discovery

Post templates to encourage more discovery

The purpose of defining a post template for each share was to leverage social media SEO, to bring more people to Urban Dictionary. Previously, when a user shared a definition through the Twitter or Facebook share button, they would see a plain link in the post input field.

To help people find Urban Dictionary through others, I crafted a template with mentions of important keywords so that when someone searches a word with the keywords "meaning" or "Urban Dictionary" on Twitter, Facebook, or Google, they would be able to find posts from others containing the definition.

© Zoe Chin 2023