Back Copy 3 back
ENTERTAINMENT

Joy Joi

image

JoyJoi, a handshaking virtual platform that transforms the idol meeting experience. The place where fans can meet their favourite idols in Japan in a simulated reality.

The first online fan platform of it’s kind built in Flutter – a solution that supports tens of thousands of users, connected at the same time, even in video calls.

//overview _

JoyJoi was born as an idea of Pulse by IGNIS, a mature company working in the entertainment industry. JoyJoi is helping idols and fans in Japan reach each other and meet via video call during the COVID-19 global pandemic. Since all event places have been closed in Japan since March 2020, Pulse by IGNIS decided to move forward and keep the connection between the fans and their group VoyzBoyz. It is a virtual handshaking platform where fans can purchase tickets to meet with their favourite idols from the band. The platform was made in a way to simulate reality fully.

The benefit of this is that the fans can have much more than just a handshake. On a handshaking event, the fan has far less time to get to know the idol and intrоduce themself and do a handshake. Still, they can buy tickets and talk to the idols for extended periods on the platform without being distracted from the noise the whole event brings. The experience is now much more personalized, and virtual 1:1 communication is a perfect substitute for in-person handshakes.

Our team was involved from the early planning stage of the project. Together with Pulse by Ignis, we jointly defined what the overall platform should look like and the roadmap of getting there from development to the initial launch of the platform.

This project involved: system architecture, product development and IT consulting, building web apps, custom APIs, hosting infrastructure, designing simple and easy to use UI and UX through systems that are highly complicated, project management, and QA.

Back Copy 3 Back Copy 3

// challenges_

Pulse had enormous plans for the group to organize big events/concerts around Japan, meet with fans and deliver the best songs on the market. Nobody around the globe expected was the global pandemics which this type of business was one of those that were hit the hardest.

Pulse saw the problems arising and immediately prepared a plan to connect the idols and the fans online. The company came up with a plan to simulate the events for a virtual handshake and give the fans the experience they would have gotten on the events while harnessing the benefits of the remote and digital experience.

Pulse needed a solution that would be stable, scalable, agile and easy to use. A solution that would be able to connect with ticket providers have multiple channels to connect to, support tens of thousands of users to connect simultaneously and support video calls.

This solution needed to happen instantly, and at that time, when nobody knew what would follow, it was challenging to gather a team of 10-20 professionals to build it. Pulse was ready in April 2020 to execute the plan but was running out of engineers.

Technical Challenges

The real-time(ness) and distributed nature of the system presented the most exciting challenges.

  • How do you quickly and reliably handle large amounts of messages per second while ensuring consistency and reliability for everyone? And provide observability to few?
  • How do you effectively inform hundreds of users (all part of one waiting room, simulating a real-life waiting line) at once to deliver the great news that their waiting time decreased by a few seconds in a handshaking session?

All of these challenges [and more] had potential solutions but required some thinking and sketching first. Still, we had to deliver the MVP as soon as possible, and continue building on top of it, so no cutting corners! Our team of engineers, led by Dejan Jankov, rose up to the challenge, and we came up with the following solution.

Back Copy 3
Back Copy 3

// solution_

The solution we've created was a custom-built platform that makes the virtual handshaking events with idols a unique, quick and seamless experience for the fans.

Backend

Web Factory's team developed the backend with the help of Spring Boot. As our framework of choice, we use standard components and practices regardless of the product domain. These common components include emailing and push notifications, identity and access management, JWT auth, and various other production-ready and development modules - which you can use as-is and customize them or copy and change (due to legal reasons). We used most of these to kickstart the development process.

Front-end

The front-end application follows the same practices as the backend regarding organization and terminology. We wrote a modular and flexible Angular 10+ application using TypeScript. Here, we have also included the back-office application (aka admin panel). The mobile application was developed using the cross-platform framework Flutter. It was a great experience. However, there were few things we had to do in native code in iOS and Android - namely, to handle the intricacies of the video call experience.

QA

The QA team was responsible for some significant test cases that made us think about approaching product and technical development. The automated test cases were part of the QA process, which was highly valued and appreciated by the Web Factory and Pulse by IGNIS teams.

Project kick-off with front-end and backend applications.

Initial team setup of 10 people

Timeline Synca card 4

Business analysis and product definition in a tight collaboration with Pulse

Wireframe proposals revision and improvements

in multiple iterations for achieving a very intuitive product.

Timeline Synca card 7

Introduction of mobile applications for the fans

Scope changes based on user base analysis

Team growth and forming a team dedicated for mobile. Moving forward with Flutter as a stable and new cross-platform

Development phase, QA testing & UI

Multiple testing sessions on Web Factory and Pulse’s side for gathering feedback for refinement

Stabilization phase, manual and automated testing. Production and Staging setup

Analysis of the feedback from the testing sessions, scope changes and implementation of improvements

Initial launch and first sessions on production with great results.

Stable and reliable system with ~99% rate in successful video calls for all users. Client extremely satisfied and confirmed to continue using the system for future sessions

Team Formation

The most important factor for the successful project was establishing a team which was carefully selected to match the project needs. The team of 15 amazing professionals that covered the PM, Development, UX/UI, DevOps and QA, made sure we delivered an outstanding product for Pulse.

// PROJECT MANAGEMENT // DEVELOPMENT [BACKEND; FRONTEND] // UI/UX AND DESIGN // DEVOPS // QA

//results _

We delivered a brand new product for Pulse in given circumstances, requiring the team to work quickly and in an agile fashion while maintaining very high-quality standards. More importantly, we built a strong team that has remained engaged and delivered exceptional value daily, with a desired outcome for the client – transforming their users’ experience.

The benefit of having access to and collaborating with domain experts while developing a solution is immense. And that was the case for this project. The product development was done as a collaboration between the Web Factory and Pulse by IGNIS teams.

This made it possible for engineers to translate the domain knowledge and rules into code. We have components, besides others, for scheduling [events], ticket verification, past appointments’ review, and most importantly for this product, handshaking – the core domain which drives the real-time 1on1 video experience that allows fans to interact with their idols. There was a very stable common ground on which both Web Factory and Pulse by IGNIS team stood, and we were confident the collaboration and development would go smoothly.

Dedicated team of 15 people

Architecture and solution provided in no time

AWS infrastructure setup

Front-end application developed for Admins, Idols, Fans, Managers. Backend system with API for frontend and mobile support

Multilayer security

UI/UX with product development developed together with Pulse. Full UI from Web Factory.

Mobile application developed in Flutter for cross platform usage

Application ready for cross country usage and multi million active users support

Amazing team! We were working on a challenging application never developed before for Idol groups in Japan, and what Web Factory did was superb. We created a platform with video calls from scratch on multiple platforms in less than 10 months

image

Toshitaka Hasegawa

INNOVATION DIRECTOR

JoyJoi Japan
>

Project highlights

1.

An instant technical team capable of developing front-end, backend and mobile solutions and delivering with a fast pace

2.

Complete product development together with Pulse by INGIS

3.

Delivery of MVP in 3 months with a team of 15 people, full product delivery in 10 months.

What about your story? Explore different customer touchpoints to digitalize! Drive brand loyalty by telling a digital story unlike any other before!