hero-bg

RAVEN.GG — the new major player in the world of esports apparel

2020-2021
INDUSTRY: E-commerce, Esports

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.

raven

Services we provided:

Web design Front-end development Back-end development Product development Software testing

TIME FRAME:

17 Months

Business challenge

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

raven

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.

raven

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.

raven
raven

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.

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

raven

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.

React

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.

raven

Three.js

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.

raven

AWS

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.

raven
raven
raven
raven

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.

raven

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.

raven

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.

raven

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.

raven
raven
raven

Have a similar project or idea? Let's discuss the details.

contact us

Ready to discuss
your project with us?

Thank you for your submission!
We’ll contact you as soon
as possible.

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

Ronan Casey

Founder at Baamboozle