About Urban Dictionary
About the Urban Dictionary store
The problem
Rounding up the problems on the Urban Dictionary store, the goal of this redesign was ultimately to uncover and solve issues that were inhibiting discovery and conversion.
To improve discovery and conversion, I explored:
Improving store visuals
Improving search flows
Improving product customization
Improving upselling on the main site
Less than 2% of users were visiting the store
With less than 2% of Urban Dictionary’s users visiting the store, it’s safe to assume that most users weren’t even aware that the store exists.
The only entry points from the main site to the store were
(1) the Store link on the top navbar, and
(2) the “Get the word mug” banners under each definition.
Less than 1% of store visitors were adding to cart
Among the <2% visiting the store, less than 1% were adding items to cart. And out of that small percentage, only about half were checking out.
Search results were ineffective
On Urban Dictionary, the same word can have more than one definition — sometimes even a few thousands. The old search function didn't include search suggestions or definition previews, and this was a problem.
When users type in the search bar, there was no way for them to know if a word exists on Urban Dictionary, or tell which definition each product represented after hitting Search, unless they clicked on the product.
The solution
View products by category and product type
Preview back views and variations without leaving the home page
Use blank templates to customize a product from scratch
Search and view different definitions for the same word
Select a different definition on the customization page
Dynamic store sidebar mini-app on the Urban Dictionary main site
View products by category and product type
Apart from daily featured words, there was little curation on the store home page. There wasn't much that encouraged users to explore or gave them the opportunity to stumble upon something they like.
To fix this, I added product tabs that segmented items into product types — All, Mugs, Tees, Sweatshirts, and Caps.
Preview back views and variations without leaving the home page
Most of the appeal of an Urban Dictionary product lies in the definition of the word printed on them. And on half of the items sold on the store — mugs and tees — definitions are printed on the back of the product.
On the old UI, a user had to click into a product page and scroll down to find the back view preview image. To cut this flow short, I proposed dynamic product preview cards that would display the back view of a product when hovered over.
I also designed the cards to display the different variations on a product when a user hovers over each variation circle. This way, the user can have a full view of the product without having to leave the page at all.
Use blank templates to customize a product from scratch
On the Urban Dictionary store, a user can get existing words and definitions from UD printed on a product of their choice. When they click on a product, they can also make edits in the pre-filled Word and Definition input fields, if they'd like.
However, they wouldn't know that unless they tried to press Backspace or type in the input fields themselves.
To make this clearer, I included a blank template card on each product tab. This filters out the users who are looking to print their own words and definitions on a product, and brings them straight to a blank product customization page.
Search and view different definitions for the same word
To remove the need for users to blindly click into each search result in order to see if they like a definition, I designed a search results page that included definitions and previews of each product type, on each search result.
Select a different definition on the customization page
I added a Select definition button on the Definition section to give the user more flexibility in customization.
When a user second guesses the definition of the word they've selected, they will now have the option to browse through and select other definitions on Urban Dictionary of the same word without leaving the page.
Dynamic store sidebar mini-app on the Urban Dictionary main site
I explored a dynamic sidebar mini-app dedicated to the Urban Dictionary store, that displays product previews of words on Urban Dictionary. Whichever word the user scrolls to or clicks on will be displayed on the card.
The user will also be able to add these items to cart, visit their cart, or checkout immediately with the Buy Now button.