We had to build a website that voiced our brand values and emotions but with limited resources and an eye for perfection. From brainstorming to planning and designing the website was a terrific learning experience for us. Here we discuss our learnings; What worked? What didn't work?

Planning

From doodling ideas to creating abstract solutions, all plannings are discussed here.

What worked?

Starting with a central emotion

From the very beginning, we were very clear on our website's emotion: the emotion of togetherness and bonding.

Regardless of what part we worked on, the final emotion was a clear north star that helped us land on the same island. It also reduced the communication overhead in a cross-functional team.

However, we lacked a central call to action initially, where the next point comes in.

Working with Experts

To begin with, thank you very much, Anjan and Prashant Dai, for helping us.

Anjan is a seasoned designer and was instrumental in solidifying our nebulous concepts and helping us navigate through the mazes of good user experience. It was him who first asked us, "Who is this website for?" Since traffic from game players on this website is negligible, the website is not for our end users. Hence, the website is for internal team members, present and future. This revelation helped us a lot.

Prashant Dai wears many hats, but he is an avid programmer during weekends. He urged us to use the Ghost CMS and the API-based content. And boy, are we loving it?

Good ideas can come from anywhere.

Having a cross-functional team of designers, artists, content writers, and developers led to a lot of chaos in the process. The developer didn't like some part of the design, the designer didn't like some part of the content, and the developer didn't like some animations.

But since we were in the same room, it was difficult to turn the 'didn't like' into resentment. That was because we talked about it and found practical solutions on the spot. Sure, things kept changing continuously, and things seemed chaotic, but isn't that how cool things are built.

Team "Card Flip" Animation — Animation for "Our Team"

For example, the content on our careers page first read, "Come let's deepen online interactions through social gaming." Rinoj nodded his head in disagreement at the length of the text. After fifteen minutes of brainstorming, we came upon the current text.

What didn't work?

Compromising

This is how our original website looked,

and then we redesigned it to this.

And as we refined Bhoos' positioning from a company that makes card games to a gaming company that brings friends and family together through card games, we needed new designs.

However, initially, we were reluctant to change the whole thing, which led to at least 3 weeks of effort, which we were not happy with. Finally, we decided to completely let go of the old design and start from scratch. Goodbye, three weeks!!

Having a single person do two things at once.

In the beginning, Niranjan was handling both the frontend part of the website while doing his primary responsibility of taking care of the deployment side of things for Bhoos' mobile app. However, the website tasks would take longer than expected, and collaboration was limited.

In hindsight, we should only have freed him up from his deployment duties before engaging him on the frontend part. It could have saved us a lot of time. However, given that deployment tasks aren't something that can be stopped arbitrarily, there was little we could have done about that.

However, when Dhondup came in for this project full-time, things started to happen much faster.

Batch process

Even after engaging with Dhondup, we followed the traditional content - design - development flow. Being in the same room would sometimes break this flow, as we would change things on the spot. We took breaks in this clean flow as an exception to be tolerated. We subconsciously tried to stick with the step-wise flow. The result was a flurry of changes at the end of the week.

Suppose we had worked on this project more parallelly, taken feedback more often, and pushed preliminary designs into development. In that case, we could have decreased the time required to create the final output. Alternatively, we could have perhaps created a more refined output within the same 1-month duration.

Design

From listing out goals to visualizing the actual user experience, all design challenges are discussed here.

What worked?

Knowing our goals

Anjan Dai guided us to our goals which helped us pin down our website's CTA. Discussions with him kept our designs aligned with our target audience. After several discussions and issues, we finally knew what our website should feel like.

Brainstorming

Before even beginning to design, we always started with our three main W's; what, why, who, for every page. This process made our design work efficient and kept everything and everyone from designers, artists, and content writers aligned.

Collaborative Environment

The top fold animation that you see on our home page came from a series of discussions to and fro with developers, content writers, and designers. It took us some time to develop an idea to connect design with our brand emotions. The collaborative effort helped us nail down our values via that animation.

What didn't work?

Art and Design

Once Kaena came in, our creative approach took a whole new level. However, we didn't merge art and design immediately which we kind of regret now. Why didn't we do that? We did try to combine art with design while planning for the Smart Bots Coding Challenge, but the time crunch forced us to go simple. It still looks lit, tho!

Brainstorming designs for Coding Challenge — Our effort at combining art with design

Smart Bots Coding Challenge 2022 — Simple yet visually appealing

The Lack of Brand Voice

We had good designs with unique artworks and immersive animations. However, we lacked a brand voice. It would've played a massive part in the design process if we could've discovered our brand voice sooner. We realized that the designs are easy to compose and communicate with a strong brand voice. The website sounds plain, and in the days to come, I am sure it will sound fantastic.

Testing Tasting Testing

After at least three weeks of design and development, we had a website ready. However, tbh it sucked. It looked more like a…. well, not a website. We lacked testing. We could've gone around asking members in our office about things they liked or disliked about our website. Someone could've pointed out an intrinsic detail that we probably missed. It would've saved our time and effort. This is the reason why nowadays, we vote for everything we do. If the majority wants to have pasta at lunch, it's a pasta-la-vista day!

Art

From sketching out ideas to choosing color palette, all art challenges are discussed here.

What worked?

Translating emotions to illustrations

We needed illustrations in different pages of our website. Each page had distinct goals but was tied together by a single emotion i.e; togetherness. This emotion helped us translate the idea to an illustration. Without being clear on the emotion, it would have taken us a long time.

Honest Feedbacks

At Bhoos, feedbacks are shot straight on your face. However, It re-aligns your ideas and helps you stay on track.

For instance, as you can see in the 1st illustration, the character looks like he is holding a gun, GUN!? GUNNNNNN!!!!!!???, wait, aren't we a social gaming company? We didn't realize it at first because we were so focused on the entire illustration, until our teammates pulled our legs for resembling mobile as a gun.

Adding life to characters — From holding what looks like a gun to holding a phone. Result of honest feedbacks.

What didn't work?

Experimentation

We explored different styles of art once we finalized an illustration. However, none seemed to work as much as the simple version did. We experimented and explored until we decided that simple was the way to go. Aligning color palettes with our brand emotions was quite a challenge too.

Things always do not go as planned

The animation of the top fold didn't go as planned. We discussed many ideas and chose an animation sequence, but we couldn't follow as we planned; in the end, some scenes were cut out. Our final top fold is saved in our folder as "Top Fold Sure Final - 31"

Our dedication to build up a website that makes us feel proud is mostly transpiring. The great deals of learnings that we absorbed from our failures, fellow Bhoos family and external references helped us shape our website.

We still have a long way to go, a broader goal to accomplish, but we hope to pass with a more incredible benchmark with each hurdle that we come through.

We will fall and rise again with our most potent weapon -Team Bhoos.

Contributed by: Ashish Shrestha (Planning), Rinoj and Pravin (Design), and Kaena (Art).

Rinoj Nakarmi