Raven.gg — the leading brand for custom esports clothing design

About the project

The client

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.

{{GO TO WEBSITE}}

{{services-provided}}

{{tech}}

Business challenge

1. 01 Redesigning the corporate website to make it more in line with the premium brand positioning.
2. 02 Streamlining and automating the process of transferring customized items to be printed.
3. 03 Simplifying the customization of clothing items with a purpose-built 3D tool.

PROJECT DETAILS

Starting point

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.

Product scope

• 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.

Custom builder

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.

Builder requirements

• 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.
• Clothing models should support the addition of any text, such as names, surnames, nicknames, or numbers. Different fonts should also be applicable to the texts.
• 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.
• The custom designs must be saved as print-ready SVG files in the admin panel with all the appropriate textures, colors, logos, and texts applied to enable quick order processing and manufacturing.
• Each pattern must support 3 to 5 colors, and the users should see the changes in real time.
• Some types of clothing, such as jerseys, must support having different collar types and sleeve lengths.
• The following parameters must be added: item size, number of units, fit, and the total price.

Tech stack

Tools of the trade

The entire site was previously written with the help of WordPress and classic JavaScript, and these technologies would not allow us to perform the task at hand as quickly and nicely as we wanted to. Before we could begin developing the Builder, we had to decide which technologies to use for such an application and how to integrate them all together with WordPress.

{{steps}}

3D modeling

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.

Virtual scene

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.

Integration

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.

E-commerce

Raven Marketplace

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.

{{slider}}

• 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.

{{slider2}}

• 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.

Conclusion

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.

What’s a Rich Text element?

What’s a Rich Text element? sdffgdfgfghfgh

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

• Sdfdfg
• Dfgdfgfdg
• dfgdfgfd
• Dfgdfg

dfgdf gdfg dfgdfgidfgiudf gdf ugidfugidf ugid

• dfgfdg
• dfgdfg
  dghjghj
• dfgdfg
• dfgdfg

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

1. 01 dfgdfgd
2. 01 dfgfdg
3. 01 dfgdfg
4. 01 dfgdfg

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.