Insights from a Web3 Startup’s Design Process– An Interview Ft. Our Design Team
Design

Insights from a Web3 Startup’s Design Process– An Interview Ft. Our Design Team

Naga Pramod
Naga Pramod

This blog is an interview featuring Arcana’s design team– CDO Sharan Grandigae, Lead Expereince Designer Daiyaan Ansari, and 3D Illustrator Amit. This blog takes you through the design process, nuances involved, and the 3D work that went into making our beta testnet website. We’ve also inserted several illustrations to show you the exact BTS of various artwork you can see in our beta testnet website (https://testnet.arcana.network). Without further ado, let’s jump right in.

Who does what in terms of team roles in the design team?

Sharan: When it comes to the beta website in specific, there are three key people behind the major part of the effort. The first person would be Daiyaan, who takes care of the UI and UX design, illustrations, and conceptualization of the website before the design phase. Next, we have Amit, who handles 3D designs and their execution from scratch. All the 3D illustrations that you find on our testnet website, have been designed by Amit, with inputs from Daiyaan at various places. The iconography on the testnet and main websites is handled by Arush.

I take care of the quality control, offer feedback at various stages, and provide a general sense of direction to both Daiyaan and Amit throughout the design process.

Compared to the alpha testnet and beta testnet, what has been different from the design standpoint?

Daiyaan: When it came to the alpha testnet, illustrations weren’t a part of the scope for the current design team at large. We as a team mostly focused on the UI and UX part of things.

There was always this underlying level of dissatisfaction that I personally felt while working on the Quantum Descent website because I believed our team would have been able to do something better in terms of illustrations.

But when it came to beta testnet, illustrations also became a part of the design team’s scope. This time around, the team and I wanted to make sure that the beta testnet website was different (design-wise, visually) from the current website. In the larger scheme of things, the current beta website is an extension of our main website in terms of where the narrative is going and the design language is evolving. And for all of this to happen, Sharan’s mythology and writing about the Arcanum world was what made all the difference.

Some of the initial illustrations for conceptualizing the Arcanum world, and specifically, the landscape that stands as a backdrop for the beta testnet website.

Sharan: The story and characters of the Arcanum mythology played an important role in informing and guiding Daiyaan and Amit for conceptualizing and designing various illustrations and elements of the beta testnet website.

The transition from alpha to beta testnet is quite an instrumental one according to me. Over the period of time, the design team got to define the Arcanum world better, and add more details to it for designing a more coherent experience when compared to the past.

By the time of the initial alpha release (Quantum Descent), we had conceived of ‘Spatial Gloss’ and detailed it out as a design system. Although ‘Spatial Gloss’ defined several visual components, it did not have a story per se.

We were also working with an agency called Tenet and one of the designers from there that worked with us on the design system pushed the boundaries of our system and extended it in a way we hadn’t had the chance to as yet. Because until that point, we restricted ourselves to only spheres as a primary design element in our system. But the Tenet team introduced pillars and other shapes, opening us up to the prospect of trying other shapes. We later discontinued working with Tenet, sometime around the alpha testnet release, and shouldered the entire design responsibility ourselves. This was also the same time when I conducted a team writing session to add more details to the world of the Arcanum mythology. For me, it was interesting to see how the team interpreted things from a design and story perspective.

Each member of the team was to come up with characters, scenes, and imagery during these writing sessions. This exercise, as a whole, allowed the team to better express itself. Ultimately, the team writing sessions led to a more defined storyline and characters within the Arcanum mythology. I ended up taking various bits of everyone’s contributions and wove them into a singular narrative. And exercises such as this are important because they generate the interest, creativity, and excitement for the team to perform to its fullest potential.

From the product’s standpoint, what we do is build infrastructure elements. In that sense, there’s nothing much to be excited about there as it’s not visual and most consumers probably won’t come to use it themselves. But visualizing a world and conceptualizing a story is what makes things creative and exciting for the whole team.

“Our narrative now had that overlap between gameplay and hardcore technology which I think is where most devs are, where our mind is and there’s a huge overlap and a lot of developers are gamers too. We were trying to bridge both these ideas.”

We started by defining what the characters would look like. The characters haven't been revealed publicly yet. But once we started building out these characters, our co-founders and PM grew excited. Our CEO Mayur upped the ante and asked us to go full hi-res, and even shared references to great NFT art.

It is worth noting that there are some limitations with regards to revealing characters. That said, the world could, however, be revealed. As a matter of fact, if you go through the beta testnet website, you can find an easter egg– a character that we subtly placed in the visuals.

Amit: If you check the older versions of our illustrations of the Arcanum world, you would find issues with sizing, ambient lighting, and other aspects. This time around, we got most things right, and focused on finer details like getting the lighting right for even the smoke that you see in the visuals.

What areas of UI/UX design were particularly challenging for the team?

Daiyaan: Firstly, one of the most challenging areas for the design team was “readability.” We had to keep making changes to the illustrations because the content of the website wasn’t as readable as it should have been. We didn’t want to slap gradients and take away the entire quality of the illustrations. While we want people to enjoy the magnanimity and scale of the illustrations, we didn’t want the scroll to be longer. So achieving this sweet spot was a challenge in itself.

Sharan: I felt font-sizes were another aspect we faced issues with. The team further discovered that we were facing issues with designing for the website to be truly responsive. Broadly speaking, these were execution-level challenges. The team, nonetheless, ended up doing a fantastic job at execution too.

Ironically, the challenge now is to bring the main website up to the mark with the beta testnet website. While the main website is crisp and does the job well, it doesn’t narrate a story like the beta testnet website does. And that’s where we need to raise the bar next. Because it feels like our recent work on the beta website is of a higher standard than the main website.

And if we look back further, we felt the same when we designed the dashboard as well. When we were done with designing the main website for Arcana, we had the realization that the dashboard now pales in comparison to the design standards of the website as the dashboard design was the first one we developed.

“Each time you get a chance to start a new project, we kind of like up the ante. That becomes a challenge because there’s a huge backlog that gets created. You need to bring everything else up to that standard. The idea then is to just keep upgrading the rest. From an evolutionary point of view, it's a good thing for the team to keep demonstrating new capabilities. But from a brand perspective, it’s a problem, because you need to keep reinforcing one idea. But personally, I think it’s better to keep pushing the envelope even while making consistency a secondary consideration.”

What were some of the biggest Inspirations for the artwork on our website and how difficult was it to model everything in 3D?

Daiyaan: Last year, around this time, the Avatar team started releasing several sketches of their open world, characters, and so forth. I remember taking a look at all of those illustrations and being in awe of the world they could conceive and create. As someone who’s working on bringing a mythology, world, and a creation to life, I felt deeply inspired and motivated. And from an artwork and production design standpoint, Sam Jackson from Predator is another note-worthy inspiration.


Sharan: Moving on to the bit about 3D design, it could be summarized as a steep learning curve. The easy way out was to choose Low Poly. But the characters and their depth wouldn’t be truly represented by Low Poly. And we didn’t want to make that compromise. So we made the harder choice and tried making things as realistic as possible. It is also when we started facing hurdles– because to do things realistically, rendering materials and textures is a huge hurdle. For instance, if you’re designing a snow mountain, getting the snow and mountain, along with their colors and textures right, can be a challenging endeavor.

Next comes the lighting. The light being reflected from snow on the mountains can’t be harsh– it has to be soft. To get that bit right, we had to invest significant effort.

And from a craft perspective, it is a phenomenal jump from 2D to 3D. In the former, you just work with a particular key frame and design. But with 3D, the upfront effort is much higher as you have to work to make it look right from all the angles.

From the perspective of the business of design, there’s an inherent advantage to doing things the 3D way – we have access to a hundred different snapshots all at once. We can render as many snapshots as we want just by placing the camera in different spots within this world. When designing a website we need several pieces of artworks peppered throughout the page and this is what we were able to speed up with the 3D work.

These illustrations we have below give you a sneak peak into the various phases of designing the main landscape of the testnet website.

Revisions are a part and parcel of any creative process. Speaking about the design efforts for the beta testnet website in specific, how many revisions did you guys need and what was the main focus of the revisions?

Daiyaan: There were daily calls with Sharan for revisions. And he mostly helped the team stay grounded, and helped us draw a line in terms of how far along we could go with pushing the boundaries. He mostly helped us in deciding what to not include, because there were many things we could think of to include. Sodrawing the line and deciding on just a few elements to keep the narrative going forward is the main focus of the revisions.

Sharan: As a result of the standard of work being produced, I had to increase my standard of review and push the boundaries. From focusing on the elementary details, the team now moved to focusing on questions such as what gender could a certain character be? If you notice the existing character in our beta testnet website, you would realize that it is non gender specific.

Our ultimate motive is to keep it inclusive and non-divise. And in the bigger scheme of things, we don’t want to limit our imagination by boxing characters to certain roles because we haven’t created the full story yet and are writing it as we go along. The more restrictions and specifics we begin to add, we become opinionated and can box ourselves into telling a certain story. We instead, just want to see where the story will take us instead. So this became a factor during our daily reviews as well.

Since the Design team and Front-end developers have to work hand-in-hand, how did the collaboration take place in the context of beta testnet?

Daiyaan: Ajith and Shrinath from the front-end team have been of immense help to the design team throughout the process.

Once the other team you’re working with understands what you’re trying to do, they can truly offer their support to help us accomplish our goals easily. As a matter of fact, the front-end team gets our requirements and standards intuitively. It also helps that our front-end lead gets design at a deeper level and always goes beyond his call of duty to get things done right.

Another key area where the front-end team played a strong, support role is optimizing the loading time and making sure that our visuals are displayed in their full glory without having to make amends on the optimization front.


Check out our testnet website to learn more about the various illustrations discussed and displayed in the blog above, along with an "easter egg" our CDO Sharan mentioned.


Here are some more BTS inspirations and images courtesy of our Design team

The lightsaber here is an inspiration for the light beam (especially the texture, shape, and color) on the testnet website's illustration.
The light beam here is an inspiration for the one on our testnet website's illustration. This art here serves as a visual inspiration in terms of how to make it blend into the landscape.
The testnet website's main illustration around the final phase of the design process. Light beams and the landscapes above become more pronounced here.
The testnet website in all its glory, along with the illustrations discussed across the interview blog. 

About Arcana Network

Built for Ethereum and EVM-based chains, Arcana is the web3 infrastructure to easily onboard dApp users and enable user data privacy and ownership. Web3 developers use Arcana’s SDKs for a seamless, familiar user onboarding experience via social authentication and passwordless login. All user data is encrypted, secured with data access fully controlled by the users, and powered by blockchain.

Arcana has raised 2.7Mn USD from some of the leading investors and founders in the ecosystem such as Balaji Srinivasan, Founders of Polygon, Woodstock, Republic Crypto, and Digital Currency Group.

Want to know more about our latest testnet features? Book a demo.

Official Links: Website | Twitter | Discord| Telegram | TG Announcement | Medium | GitHub