RAVEN.GG — the new major player in the world of esports apparel
About the project
Raven is a leading brand when it comes to designing and manufacturing Esports apparel thanks to their innovation and strong ties with some of the biggest global Esports teams. What sets them apart is that they produce premium customized products, provide a unique customer service experience and continuously innovate their brand.
The client approached us looking for a complete redevelopment of their website. They’ve been using its core backend since 2014 and felt that the time has come to better reflect their established position in the market and their premium brand identity. Our task was to help Raven with those ambitious goals by enhancing their platform.
Services we provided:
TIME FRAME:17 Months
Redesigning the corporate website to make it more in line with the premium brand positioning.
Streamlining and automating the process of transferring customized items to be printed.
Simplifying the customization of clothing items with a purpose-built 3D tool.
The client’s existing e-commerce website was using WordPress, and all the databases with past orders and users were tied to it. Seeing that migrating the data to a non-WordPress site would have taken a long time, we have agreed to continue development with WordPress technology while re-creating everything else.
With Raven being such an impressive, ambitious, and, in many ways, unique project, we had a number of exciting and challenging tasks set before us.
Developing a custom 3D Builder and integrating it with the WordPress app, allowing users to customize their apparel.
Creating a marketplace where Esports teams and other brands can sell their own unique merchandise through the Raven platform.
Facilitating the work of the back office by automating the transfer of orders from the client to the factories.
Improving the user experience to increase conversion rates.
Development from scratch
Outside of the website redesign, one of the bigger ideas was to introduce the t-shirt 3D models that the users could customize heavily. This would allow small Esport teams to design their merch right on the spot. Alternatively, as a separate service, Raven’s in-house designers could also lend a hand with that.
At first, the client considered purchasing a premade solution from Sketchfab, but with the number of potential customers per month, this path was deemed uneconomical, and together we decided to write the Builder from scratch.
The users must be able to choose any clothing type (jerseys, pants, jackets, etc.) and interact with their 3D models in a 360 degrees view.
Each item must have its own set of patterns for the users to change independently.
Users should be able to upload any image from their computers as a print or logo for the clothing items. They then should be able to move the uploaded image around, resize, and fully rotate it.
Users should be able to save their created models and continue designing them at a later date. The option for sharing the designs on social media was also on the list.
Each pattern must support 3 to 5 colors, and the users should see the changes in real time.
Tools of the trade
The Builder is a one-page application that the users can interact with, and React is just the right technology for this kind of work. It allows us to render various windows and tabs on one page and to change the functionality seamlessly to the users without reloads and changes to the URLs.
The second equally important library we chose is Three.js, which covers 3D graphics and works very well in combination with React, greatly simplifying the development process. Three.js allows us to load 3D models, work with textures, adjust the lighting, create a scene, and much more.
Since the users can upload and attach their own images to the 3D models, we used the AWS S3 cloud storage, where all the user images are directly uploaded from the client application. This was necessary to save space on the server, as well as very convenient for retrieving those images when a user would choose to reopen their previously saved designs.
Realistic models creation
Once all that was figured out, it was time to create 3D models for each of the items to be sold. We have agreed to come up with five options: jerseys, hoodies, jackets, joggers, and sleeves, and those articles had to be modeled in separate 3D software.
Creating those 3D models was one of the more complicated tasks, and we had to involve 3D specialists to complete it. The resulting models had to be fully three-dimensional, and for each of them, we also had to apply appropriate fabric textures.
The challenge was to create a highly realistic model that would capture the human body’s contours, and the client was highly engaged in the process, continuously providing valuable feedback. It was a very involved process, and we had to go through many iterations to achieve the best result, perfecting and refining even the tiniest of details.
Setting the background
Once the models are created, they are saved in a special .glb format. It is well-optimized for the web, as browsers can easily interact with it and quickly render the models. Next, we created a virtual scene in the Three.js application where the models are displayed.
Adjusting the lighting correctly was another challenge to overcome. The daylight elements and point light affect how good and realistic the models would look. We had to painstakingly adjust the settings to get the best effect. Finally, we added cameras to the scene for image rendering.
Ensuring communication with WordPress
The next important task was to establish communication between the WordPress admin panel and the application built in React. The data related to the models, such as model files, patterns, colors, positions, possible variations, etc., must first be filled in the admin panel. All of this must be obtained in the React Builder and then processed and displayed on the user’s screen.
For this communication between the client application and the server, we have decided to create a special manifest file in JSON format that has the same structure for all the models but different settings.
Much like many other major sporting brands, Raven provided professional Esports teams with their own stores hosted on their website. Initially, it worked by creating a URL to the product catalog, pre-filtered by teams. While we were developing their platform, the client came up with a great idea — to create a Marketplace — a unique feature that would significantly improve the platform and increase the brand’s market reach.
As a result, we have introduced the following logic for creating custom stores on Raven’s platform: an Esport team’s representative needs to first register a user account on the website, and then they would be able to add and put their custom designs on sale. What’s notable about Raven is that users can both create their own apparel designs in the sophisticated Builder or have one of Raven’s many world-class designers do it for them. It is worth mentioning that only the products created in the 3D Builder or by Raven’s own staff can be added to a Marketplace store, so this entire idea relies heavily on the 3D Builder we’ve developed.
A look at the 3D Builder
We’ve added five editable clothing types.
Once the project is loaded, a user will see their model of choice.
Users can choose different patterns for the models, pre-added in the admin panel.
Each pattern has its own color palette, which allows users to add individual layers to it.
Each pattern is prepared separately, resembling unfolded 2D fabric. In 3D, this is often referred to as the UV map.
Some models can have variable parts, i.e., for a jersey model, users can choose different collars.
The image upload function allows users to add their own custom prints and logos to the models — positioning, stretching, shrinking, and rotating them.
Additionally, the client asked us to add a list of flags to be placed on the sleeves.
The users can also add text to the back of the model, applying various colors and fonts.
Finally, there are the settings where the users can specify size, quantity, fit, and choose the sleeve type.
Excellent outcome for an ambitious project
Raven’s platform was an impressively large and genuinely complex project, and we surely had our work cut out for us. With that being said, all those months of brainstorming, design, modeling, and, of course, rigorous development have borne fruit. It takes one short encounter with the Raven platform to feel the overall quality and attention to detail.
We are immensely proud of how we met and overcame all the challenges, helping Raven become the leader in their respective industry, not only when it comes to sales but also in aesthetics, the cool factor, and the general brand perception.
Join Halo Lab’s newsletter!
Get weekly updates on the newest stories, posts and case studies right in your mailbox.
Thanks for your subscribtion!
You won't regret it. See you soon.
Ready to discuss
your project with us?
Thank you for your submission!
We’ll contact you as soon
Our clients say
“Halo Lab delivered a unique and original design that makes my company stand out from the competition — they didn’t provide a template-based design or something trendy. Their development is world-class and perfection itself.”