Introduction
Discord, an extremely popular social platform that, as of last year, has garnered over 300 million users with over $150 million in revenue in 2021 alone, is used across multiple industries such as entertainment, sports, education and more.
As an avid user of Discord, I’ve seen the platform growing throughout the many years of using it. I’ve also noticed a growing number of servers selling their own products, including tutorials, personal projects and even merchandise for their own brand. However, it is a confusing process since Discord doesn’t have an official shopping platform for users to buy and sell safely and efficiently. In addition, I’ve seen users complain about their negative shopping experience on specific servers I join on Discord, as well as seeing users complain about it on social media platforms. Therefore, I wonder if there’s a way to optimize the user experience on Discord for the better?
Team
Solo Project
Role
UI/UX
Tools
Figma, Photoshop
Year
2022
Platform
Desktop
Before
After
Problem Statement
Discord users' pain points within the current design include points such as: they can't shop easily on the platform due to inconvenient transactions, the risk of being scammed by unverified sellers, and not being able to access enough product details when considering a purchase.
Therefore, by redesigning a safe shopping experience on Discord, I will create a more positive brand image for Discord in general, and this outlook may attract more users to the server/ website.
Users can easily purchase products they want from Discord’s verified sellers without worrying about being scammed. As a result, the new shopping experience is now as convenient as other E-commerce sites, but just with more choices, accessibility, trackability, and with more transparency.
This will also increase Discord’s annual revenue by including a percentage transaction fee for each transaction.
Project Overview
This project to design a shopping features on Discord, providing a safe shopping experience for users.
Although some Discord users have already started buying products through the shopping or purchase channels listed on the server they join, not all users have had safe and smooth transactions.
Designing shopping features on Discord allows users to buy products from verified sellers and avoid unnecessary traffic, users will easily be able to skim through sellers' profiles to see who is legitimate. Will also allow dissuade buyers to buy from unverified sellers, reducing scammers and illegal/unverified products.
My responsibility as a UI/UX designer on the project is to redesign shopping features on Discord, while keeping the components, colors, layouts, and typography consistent, while following the brand guide.
It is a month-long solo project that started in the middle of May, 2022.
Target Audience
There are around 150 million monthly users on Discord, and as the platform continues to grow, there is a new trend where people sell digital items or attach their business links on their servers. The designed shopping feature is for users who want to buy merchandise from verified creators, such as digital assets, clothes, or any product really. This feature will provide a more convenient, smooth and official shopping experience for Discord users.
Business Problem
Shoppers are struggling to find legitimate sellers, access detailed information when purchasing items, and with inconvenient transaction on Discord; this leads to:
1. Increased chances of being scammed when purchasing items.
2. Risk of users' Discord accounts being hacked due to carelessness in leaking personal information to unverified sellers.
3. Users having a negative experience, such as sellers not responding after a payment was made.
Goals
User Goals
As a shopper, I want to be able to easily buy products on Discord without worrying about being scammed, and optimizing usability.
Business Goals
As a company, I want to ensure shoppers have a positive shopping experiences on Discord. The primary metric I'll be looking at is the number of completed transactions, by creating a streamlined shopping experience for users on Discord.
(how many clicks/ how long it takes people to make a purchase, bounce rate, visits per page)
Comparative & Competitive Analysis
After I came up this initial idea, I began researching similar social media platforms, such as Youtube, Instagram, Facebook, Wechat, and so on. They are all user-generated social media platforms to support creators or sell products on their channels/accounts.
Youtube will have links to their creators shop as well as some YouTubers will have an external link to their own merchandise website.
The same is true for Instagram and Facebook, although for both of these, they are relatively new features and have similar shopping experiences for product displays and checkout processes.
After researching these social media platforms, I realized that most shopping systems are very similar as the process of online shopping is already very mature. So I began to create wireframes and ensure users have a smooth shopping experience on Discord. The new shopping features include the option to filter content, add similar products to the cart, and be trackable after purchasing. My design provides a positive shopping experience for users and seller, and support sellers' business on Discord.
Wireframe
I started on the wireframing process and included are the basic steps of a shopping experience, taken from Best in Class examples such as Amazon and Shopify.
UI/Visual Design
For the UI and visual design I adhered to the style guide provided by Discord’s brand guidelines, including color, typography, and component styles.
Functionality
A shopping tab on the home page helps users quickly access shops on Discord, with items that are always available through Discord, while puling all servers with verified sellers’ products also showing in this tab.
The shopping Tab
Help shoppers easily find stores from different subscribed servers on Discord.
Verified Sellers
By providing an official discord shopping platform, it filters out unverified sellers, which provides a worry-free shopping experience for users.
Hero Image
Introduces featured items, such as gaming, software, digital devices, art products (digital assets, files), fashion, and so on. In addition, users can navigate content efficiently by clicking on pagination under a hero image.
Filter by
Narrow in on products category, best sellers, channels, prices, or type keywords in the search bar to quickly find an item
Server Logo and Name
Appears under individual products images, helping shoppers quickly identify the item source or brand.
Product Details Page
Shoppers will see product details such as images, descriptions, prices, and more.
Add to Cart
Clear primary call to action button to add products to the shopping cart.
Image Navigation
Navigate images by clicking on thumbnails on the left side or pagination at the bottom of the
hero image.
Favorite / Save for Later
Give the option for shoppers to save favorite products and buy it later.
People Also Viewed
View other friends' interesting products related to the current product.
Share
Share product links to their friends on Discord or copy product links and paste them on other social media platforms.
Shopping Cart
Give shoppers an overview of final purchase products and prices.
Server Name & Logo
Help shoppers identify the products they added to their cart from different servers.
Summary
View total items, and prices added to the shopping cart.
Product quantity
Confirm or edit the quantity of the items.
Edit Items
Add an item to favorite or delete it.
Promotion Code
Provide shoppers with a discount when applying a promotion code during a checkout.
Checkout
Finalize transaction process.
Order History
Help shoppers track their account's order history.
View Order Details
Review order details, including item's tracking number, delivery address, and the option to return, replace, or reorder.
Checkout
Facilitate a smooth checkout experience, without users being scammed or tricked into having illegitimate transactions.
Checkout
Help to set preferred way of receiving products either by choosing a shipping address or pick up location.
Payment Method
Help shoppers make a secure payment on the Discord site, and avoid purchasing on third-party sites.
Set Payment Options
Select payment methods verified by Discord, such as Paypal, Apple Pay, Klarna, and more.
Review
Receive order confirmation on Discord and a separate receipt through the email address
The goal of Discord's official checkout process is to make users feel reassured when shopping on Discord. Shoppers can easily add their bank accounts on the site, instead of purchasing on third-party websites or unknown sites.
Result
The shopping feature designs helps users quickly and safely access verified stores and sellers across different servers. After completing their purchase, shoppers can efficiently track the item's status or contact the sellers if necessary. The overall shopping experience’s design accelerates a smooth flow for users. My business goal is to optimize usability and provide a positive experience for users.
Future Iterations
I plan to conduct further user interviews for usability as well as user feedback sessions to iterate on additional features and improvements on current features.
Future planned features include a full UI/UX design of the seller’s side, and how they can upload and market their own assets.
The second planned feature include the ability to friends’ wishlists and favorites lists.
Another planned future feature is a more streamlined gifting system allowing friends to share their favorite content creator’s merchandise and games.
Finally, I want to expand the target audience into a broader base by including more types of digital items and better communication between sellers and buyers.
All current and future features aim to support and protect buyers while ensuring that sellers have an efficient way to not only sell their assets, but also communicate and market their merchandise.
