Tool
Video portal for training plastic surgeons in skin rejuvenation techniques, with instructor-led courses offering virtual classes/video-based lectures; fully immersive video streaming.
Business Challenges
- Teach customers how to use products effectively.
- Maintain the image of experts in their area of expertise.
- Build a community for repeat sales.
Problem
- The portal is obsolete and slow: the main page with video takes 10 seconds to open, site lacks stable video streams.
- Large videos are not always loaded; system cannot handle large audiences for online broadcasts.
- The customer’s image suffers when the portal is down.
Result
- Optimized the site: pages open instantly, large files are fully loaded, regardless of size and speed of the Internet; portal can now handle 10 thousand+ viewers for live broadcasts
- Set up integration with a unified authorization system and live broadcast service used by the customer
- Added posts, Zoom integration, advanced search, promotional advertising inserts
- Stayed within the customer’s budget
The company specializes in plastic surgery
The company performs operations in the area of aesthetic and plastic surgery in 11 clinics around the world. Under its own brand, the company produces threads for anti-aging procedures, such as skin tightening and firming. The company’s products are used by surgeons and cosmetologists in 50 countries around the world.
The company’s specialists develop original methods of thread lifting, and conduct training for doctors. To make learning more convenient, the company launched online services: a school with training courses, an information portal with support for specialists, and a video portal with lessons, master classes, webinar modules, online broadcasts, and recordings of conferences and webinars. With this help, doctors can:
- communicate, discuss products and methods, ask questions
- keep their knowledge up-to-date, improve their skills
- get acquainted with new products from the company, and learn how to perform procedures with their application
The portal helps the company to continue their relationship with customers after purchases, increasing the level of high-level service, gathering a professional community around itself, and maintaining their reputation as an industry leader.
Problem: the video portal is slow, and the company’s reputation suffers
The company came to OrbitSoft with a problem: the portal was obsolete, often crashed, consumed too many server resources, and generally worked very slowly. For example, it took 10 seconds to load pages with videos the first time, and 2 seconds from the cache. When a user opened the main page, they simply had to wait for the videos to appear.
The site was developed in the early 2010s. Over time, the volume of data in use increased significantly. The old architecture simply couldn’t handle the load. The poor performance of the portal negatively affected the reputation of the company. Doctors didn’t like the site’s slow performance and constant problems, they couldn’t get the desired training, and generally had a very negative experience.
The company decided to outsource the update of the portal to a software outsourcing development team.
Task: update the portal, remove breaks and errors
The video portal was developed in Ruby on Rails, but the company lost contact with the original developers. The company came to the conclusion that it made no sense to continue using Ruby: the language is cumbersome and is almost never used these days.
The company discussed a new technology stack with OrbitSoft and formulated the terms of reference:
- Rewrite the server part of the portal in PHP using the Symfony framework.
- Implement integration with the Passport authorization system and Wowza streaming service used by the customer.
- Add integration with Zoom, advanced search in all sections of the portal, text posts, and promotional video tie-ins.
- Change the front-end to Angular and mobile apps, along with the back-end.
The development of the portal took 9 months. The project was handled by a team of 6 people: a backend, layout designer, full stack, 2 mobile developers, and a project manager.
Optimized the portal
Basically, we were asked to re-build the platform from scratch. We completely redeveloped the backend of the portal, and redesigned the database structure and project architecture. We designed it in such a way that the customer, as the load increases, will be able to scale the project horizontally, including using a balancer.
The database was not designed optimally. We redesigned the table structure. This allowed us to speed up the return of content. Now videos appear on the page instantly.
Previously, the customer had all portal components stored together on the same server and they consumed the same resources. Accordingly, when the load increased, there were not enough resources available. For example, if a broadcast began in Wowza — the more viewers that were added, the more the front-end slowed down. When several thousand users joined, the whole system failed.
We needed to design a workflow that functioned correctly. We decomposed the portal components into 4 servers and data storage systems for 10 terabytes:
- 1st server: frontend and part of the backend — logic in PHP
- 2nd server: MySQL database
- 3rd server: streaming service Wowza
- 4th server: transcoding module
- Storage systems: downloaded videos, transcoded broadcasts, commercials, and images for posts.
We encountered difficulties when we needed to upload large videos to the portal, i.e., 5−7 gigabytes. Initially, we were going to accept entire files via standard HTTP. But the system is not designed for such volumes, and does not resume in the case of a connection break. At OrbitSoft we pride ourselves on our ability to build custom solutions. How we found a solution to this technical problem is described in another article.
Set up old integrations
The customer uses third-party services: the Passport authorization system, and the Wowza streaming service. When we redesigned the backend, we had to reconfigure data/system integration with it.
The Passport authorization system is a single-entry form for all customer services: an online store, an application, a school with training courses, and portals for doctors and patients. It works like an authorization through Google or Facebook: after creating an account, you can use your data to enter other online services. We linked the new portal to Passport. Now, previously registered users can access the Passport authorization system using their username and password.
The Wowza Streaming Engine is a system for transmitting and recording streaming video. The customer uses it to broadcast lessons online: the surgeon performs an operation, the cameras film him, Wowza records the video from the cameras and prepares it for viewing, and users watch the live broadcast on the video portal.
The previous integration with Wowza was developed in Java. This service tracked the beginning and end of the broadcast, created the cover, and transcoded the video to different resolutions and formats. But the service was error-prone. For example, when deleting a video, it often didn’t properly clean up after itself, leaving extraneous files.
We redeveloped the service in Golang: its faster than Java, and covers all project tasks. However, we started integrating the service with Wowza and we encountered a problem. The system has an SDK, but only in Java. And there is a REST API, but it doesn’t allow one to subscribe to events. So, how to connect Go service with Wowza, while keeping the entire volume of tasks?
We explain in another article how we bypassed the problem and set up integration.
Added integration with Zoom
The customer decided that, in addition to broadcasts in Wowza, they needed to save their Zoom broadcasts. We set up such integration. Now, portal administrators and users can call Zoom without opening the program itself. Here’s how it works:
- The administrator creates a broadcast from his part of the portal, describes it, sets a date, and presses the «Create» button. The back end of the portal creates a meeting in Zoom.
- Users see the announcement, click the «Subscribe» button.
- When an administrator starts a meeting, the backend sends a link to the meeting to users, and users can join.
- When a meeting ends, Zoom converts it to a video file and notifies the backend.
- The backend takes the video, passes it to the transcoding service, and then publishes it on the portal.
Expanded functionality of the portal, creating a well-optimized eLearning portal
Posts. On the old portal, the main content was video. The content of the video was not indexed by search engines, which makes SEO difficult. We’ve added a «Publications» section, with articles where we can include search terms. In this section, the customer publishes event announcements, and news about the company and products.
Advanced Search. Previously, search on the portal was only possible by title and only within a section. That is, in order to find a video tutorial on thread implantation, the user had to go to the «Video» section and be sure to write the word from the title in the search field, for example, «implantation». If you searched for the same thing in the «Broadcasts and Webinars» section, or according to the words from the video description, the portal did not find anything. Now user can search throughout the portal by words from the title, description of the video, and categories.
Categories act as tags: this allows the grouping of videos by surgical techniques, areas of application, and products used. Categories are needed for recommendations: when a user watches a video, the portal offers the user links to products from the video, and related videos, such as other videos from these categories.
Advertising. Previously, the portal did not have the ability to insert ads into videos. Now the customer can add a commercial before the video, in the middle, or at the end. For example, they can insert an advertisement for the threads with which the procedure is performed into a video tutorial on lip correction.
Updated frontend to Angular
Angular Material Library. To speed up the process, we used Google’s Angular Material. This is a library of ready-made interface components: buttons, menu items, registration forms, pop-ups, etc. The library was developed according to the principles of Material Design, a Google concept that explains how to create interfaces for mobile and web applications so that everything fits on the small screens of smartphones, and they are all designed to be convenient to use to control applications using one’s fingers.
Development goes faster with Angular Material:
- The designer saves time: he doesn’t need to invent and redraw the design of standard components, but inserts ready-made ones into the layout, and adjusts their color scheme according to the customer’s brand book.
- The front-end developer saves time: he doesn’t describe the functions of the components in the code, but adds a set of Angular Material components to the project, and includes the necessary ones on each of the pages.
Multilingual. Initially, the site was developed in English. To make the Russian version of the interface, we used the Angular mechanisms: we marked with a special tag the places where there is text, extracted it, and translated it into Russian. Angular picked up the translation and formed the Russian version of the interface. It took less time than manually adding the translation.
Notifications. In order for interested users to immediately learn about new videos and the launch of broadcasts on the portal, we set up notifications. When the administrator publishes a video, he can check the «Notify all users» box. Then those who allowed notifications in their account settings receive a notification: pop-up, system, or push.
Remade mobile app
To develop a new mobile application, we chose the Qt framework. Here’s why:
- Cross-platform framework. Qt is suitable for iOS and Android development. It contains sections of code with the general application logic, the same for each operating system. This allowed us to save the development budget: one team of developers was needed instead of two.
- Built on native function calls. This simplifies programming: if a developer encounters a problem that Qt can’t solve, he simply pastes in a piece of native code.
Of course, Qt has limitations in comparison to native languages. But in this project, all tasks were available: watching broadcasts, video tutorials, commenting, live chat support, reading news, and push notifications. Qt allowed us to economize on development budget costs, and at the same time cover all users of mobile devices.
Results
We completed the project in 9 months and stayed on budget. OrbitSoft is known for its data-driven decisions and budget awareness. A team of a back-end, a full-stack, two mobile developers, and a layout designer completely rewrote the website and mobile application of the video portal in 9 months without exceeding the budget requirements.
Portal optimized; bugs fixed:
- Previously, video pages loaded in 10 seconds, now it takes less than a second
- Large video files are uploaded to the server completely, regardless of size and speed of Internet
- The old portal could not handle several thousand users watching a live broadcast. Now a broadcast can be watched by more than 10 thousand people at the same time.
We built tech features that could perfect the portal in terms of usability and performance:
We set up integration with other customer services: a single authorization system and a service for live broadcasts.
Added new features: text posts, integration with Zoom, advanced search on the site, advertising in videos, and much more.
Now, in July 2022, the customer is transferring all content to the new version of the portal. The old version works for users. As soon as the site is relaunched, we will publish the application in stores. Users will receive it as an update.
The customer is extremely pleased with the results of the project, and plans to entrust OrbitSoft with the completion of their other services (for example, systems of uniform authorization).
