Created a shopping website that increased product sales by 383%, increased website conversion rates by 450%, and hit over $160,000 in sales.
VALORANT Banners
Timeline
Dec 2020 - Dec 2023
Platform
Desktop and Mobile Website
Role
CEO, Product Designer,
UX Researcher
Toolkit
Figma, Maze, Photoshop,
Procreate
Brief
BACKGROUND
The VALORANT Banners is an online business that sells customized physical tapestries to gamers.
​
This business and personal project started out of boredom in beginning of the quarantine days. In June 2020, VALORANT, Riot Games' brand new first-person shooter video game came out as an industry changing game. Although the gaming industry had been primarily dominated by male players, VALORANT’s inviting art-style and culturally curious character backgrounds made this game very inviting, inclusive, and relatable to queer and female players.
However, since the game was brand new, there was no artwork for fans to be used as wallpapers and posters. I specifically was in search of a wallpaper for my phone, so I designed one. Spontaneously, I posted it on the social media platform, TikTok, where it blew up. Hundreds of commenters asked for me to turn it into a physical product so that they could buy them and hang them up in their rooms. I did exactly that and that’s how the VALORANT Banners were started. Here's a quick overview of this project!​​
TEAM
As the CEO of this small business, I took on many roles, like marketing, supplying, materials, production, and execution, but this case study primarily focuses on my role as the designer behind the website and product’s creation. I worked alongside one front-end developer and two back-end developers who I communicated with to ensure the product’s success. Behind the scenes, many of my amazing friends took on roles to help fulfill orders and package products!
WHAT MAKES THEM SPECIAL?
High customizability!
These banners were a hit because of its customizability and its connection to the buyer. Everytime a player starts up the game, they're met with a lobby screen that showcases a personalized card. It displays their in-game name (IGN), a title (an accessory that players could equip), and a rank (an indicator of their skill in the game). More importantly, players could also choose a character art piece that housed all the customizations. This level of customizations was something that people have never seen before, which made the product stand out even more.
Potential in a product that really resonates with players!
As mentioned in the timeline, this all started as me wanting to make a wallpaper for myself, but with so many positive comments from people, I realized that I could design everyone's favorite characters and allow users to buy a banner for themselves! So, I got to work, designing the rest of the character roster, making sure that every character's cultural background or significance was emphasized! (For example, the guy with the Eiffel Tower in the background is French!)
PROBLEMS WITH INITIAL SALES
As I began the business, Etsy was a top choice for me as its easy set up allowed me to make a shop to call home in a couple minutes. Visitors to my Etsy shop came through from TikTok, as I created many videos to showcase the product, but Etsy had its challenges. ​
1. Etsy's fees are expensive!
Etsy’s commission fees are very expensive and offer very little to its sellers! There was no way to mass update customers, message centers were inefficient due to the high volume of orders, so buyers were often left in the dark regarding their order details.​
2. For a highly customizable product, Etsy's interface just didn't have the seller customization I needed.
For a product that allowed users to customize a character, a name, a title, and a rank, Etsy just didn't have the same level of customization. Because of limited seller control on Etsy, I took it upon myself to develop a website to better showcase and sell these banners.
Research
CONFIRMING THE PROBLEM
As a seller, I knew what I had to do to create a better selling experience, BUT to get a comprehensive list and a better idea of what features to create for our buyers, I sent out a survey to our past customers and community members (which includes people who have considered purchasing, but never made their final purchase) asking about their shopping experience. To my surprise, I received over 200 responses! Using this new information, I created an affinity map, grouping information to better define our users’ needs and frustrations.
GOALS
Help shoppers better understand the product they’re purchasing.
Because the banners were so highly customizable, allowing users to see the final product of their customizations would be crucial.
Improve communication between buyer and seller.
With so many orders and customizations, an easy way for buyers to communicate with the seller would make for a better customer experience.
Create a VALORANT-like atmosphere for shoppers.
Work with a color palette and stylization that aligns with VALORANT's UI to better signify what the product was.
Process
USER FLOW
Based on these goals, I started creating a user flow that would meet our users needs. This would help us set the groundwork for what features to put on each of the pages.
LOW-FI WIREFRAMES
Our first order of business was to create low-fidelity mockups of our intended features. I wanted to complete these as soon as possible so that I could start experimenting with design systems and begin testing with users.
MID-FI WIREFRAMES
From our low-fi wireframes, I began working out the details of our product. Looking back at my designs, I'm really wondering to myself, "Cory, what were you thinking with all the random shapes!" Let's fix these design issues with some more user interviews!
USABILITY TESTING & FEEDBACK IMPLEMENTATION
Once we had our mid-fi wireframes in place, I began testing our product to see if it would meet our users needs and noted down changes that we would need to make to better achieve our goals. Here's some of the changes that we made!
1. Increase the speed in which users select products.
Although users really liked the feature to visualize their final product, during user testing, I realized that users took a long time to select their features because they needed to read through the text to make their selections. I went back to add visuals to help with the scanning process and noticed task completion times decrease!
2. Reduce visual clutter and stay near the original game's stylization of a clean UI.
According to our interviews, my pages had way too many visual stimulants, so to counter this, we removed a majority of the distractions and kept the focus to two things: the product images and a “SHOP NOW” button.
3. Bring forward the most important aspects of the business.
Users loved the product visualization so much that I realized that putting the product visualization on the home page would allow users to begin visualizing their product even earlier on, leading to more potential sales.
Final Designs
HIGH-FI WIREFRAMES
As we finished implementing a lot of the changes from our mid-fidelity designs, I began roughing out the sharp edges and came to this much cleaner final design.
HIGH-FIDELITY "POINT-OF-VIEW" PROTOTYPES
1. POV: You're a customer ordering a product.
2. POV: You're a returning customer looking for details on your order.
DESIGN SYSTEM
As I wanted to stick close to a VALORANT-like atmosphere, I chose the black, white, and red combination to better emphasize that the product was related to VALORANT without breaking Riot Games' legalities, as written in their "Riot Games Legal Jibber-Jabber." I also produced images of my favorite characters working on the banners to add more personality to the site!
Impact
RESULTS
Sales were stagnant during my use of the Etsy shop, but as we transitioned over to the new website, we saw major growth in sales and products being sold. Our website conversion rates went up and more visiting customers were leaving the store with a purchase. Despite the product's increase in price from $70 to $100 after 2021, then from $100 to $150 after 2022, product sales increased by 383.3% and stayed steady, bringing our total sales to over $160,000.
INCREASES IN SALES & WEBSITE CONVERSION RATES
To my relief, the website launch was a success and sales were being driven up as each batch of banners were being sold. We went from selling 30 banners in our first batch to selling 200 banners in each batch consistently!
NEXT STEPS
As of today, the website, Reversah.com, that hosted the VALORANT Banners website has been deactivated as I closed down the shop to focus more on school, additional extracurriculars, and new personal projects. This project saw huge growth during my gap year, where I pursued this website redesign and ran the business from my parents’ garage. As I returned to school, I realized that running a business would take a lot of my time, so I opted to participate in more school clubs and events where I could have more opportunities to meet more incredible people to inspire me.
CONCLUSION
I would love to thank the whole team, my friends and my family, who helped me package the orders for hours and especially to my web developers for making my crazy ideas possible.
This website has taught me a lot about having patience as customer support, the stresses behind running a business, and the limitations of coding. Many times, I had thoughts to implement crazy ideas, but I realized that it was beyond our skill set. In the future, however, I'd love to return to those ideas and implement them in other projects to better the world and communities around me.
Moreover, these are the banners that started my journey in the content creation world that led me to create a following of more than 200,000 on all my platforms. I've been invited to events like FaZe Clan's FaZe1 The Warehouse Challenge, Season 4 of Streamer Camp, and even been flown out to Riot Games' (the creators of VALORANT!) headquarters as one of thirty creators to play-test their brand-new agent, Clove, as a part of the A25 Summit event.
Being flown out to Riot Games HQ,
the company that makes VALORANT!
I got to meet Clove, VALORANT's
brand-new agent.
Time to play-test Clove, one of the gaming industry's first non-binary characters!