Kinoland Case Study

- CASE OF STUDY -

Kinoland is a Progressive Web Application (PWA) created for the chain of cinemas.

Multi-Programming SolutionsBlogCasesKinoland

What is Kinoland

Kinoland is a Progressive Web Application (PWA) created for the chain of cinemas. The app is intended to make the user experience smooth and friendly while tickets purchasing.

The Project

Business situation

When the client contacted us to get the solution, he asked for a native application for his project. We recommended to change the conception to PWA because:

cost of native app development and distribution is supposed to be higher;
native app’s poor conversion and friction;
rise of user engagement in web applications;
opportunity to build the app for both PC and smartphones;
it can work offline or on slow networks;
it doesn’t require a full installation.

Challenge

The Client came without Software Requirements Specification prepared, and insisted on starting working on the project without it. Such approach entailed the following:

drafting of technical descriptions took more time than expected;
accurate estimation couldn't be provided;
testing and approval processes were protracted doe to absence of specs.

Being a non-technical person, the Client:

wasn't aware of the details of the development lifecycle;
needed to be instructed in all development and testing stages.

There was an additional workload for the Team due to:

the project manager needed more time to compile, approve the transmission the technical tasks to the designer on two languages (English and Russian), aa the designer is English-speaking (Uruguay), and the Client is Russian-speaking;
the back-end developer on the Сlient side wasn’t enough qualified and needed assistance of our developers. As a result, the development of some features needed more time and involvement of the developers than expected

Technical challenge

sliders and other dynamic elements start working only when Angular is completely uploaded;

Angular project building takes a lot of time, especially when the project “gets bigger”;
Angular Universal covers the project-size problem but needs more powerful server to omit page loading issues;
Angular development causes a lack of SEO transparency;
interactive animations and sliders “slow down” the page uploading speed.

Work process

After discussing the requirements we were ready to start the whole working process. First of all the team extremely needed to:

organize a development process;
keep in touch with a part of a team from client’s side;
take over calls with Client;
perform business analysis.

The Solution

Before proposing solution to the Client we analyzed the project needs from features and technology perspectives, estimated a ballpark number. After that, we sent a proposal that completely satisfied the Client's needs. Next, we carried out a whole complex of works on project management, business analysis, frontend, backend development and testing.

Now we:

work closely with our Client to keep improving the product
develop new features for the Kinoland PWA

Team Model

Daria Lvovich

QA Engineer

Cecilia Rodriguez Silva

UI/UX Designer

Maksym Teslenko

DevOps Engineer

Alexander Pogrebnjak

Frontend Developer

Daria Holovnina

Project Manager, BA

Sergey Samoylov

Angular Developer

Technologies

Angular
HTML, JS, CSS
Angular Universal on Node.js
.Net

Goals Achieved

Results

Kinoland Angular PWA is SEO-friendly thanks to using Angular Universal

The PWA was developed with a modest budget and saved up to 75% of the costs of a native app (both development and maintenance).
Kinoland PWA enabled users with various devices use the app simply and smoothly.
The app has a user-friendly UX design in the movie style.
Loading time of Kinoland increased in 2-3 times which takes responsive and web stores on.
The Kinoland app has reasonable user experience on both desktop and mobile devices.
The app takes up 80-90% less storage than usual ones.
Kinoland PWA has faster loading time, therefore reduces server load. The Kinoland is guaranteed not to crash or slow down when traffic is getting intensive.

Kinoland Features

I am big and I am a banner

Big banner on the Home Page with premier - film. User is able to choose cinema schedule right on this banner and buy tickets in a few clicks.
Pre-sale option banner which allows putting emphasis on specific movie.
Video trailer banner which facilitates of user’s interest increasing towards specific film.

Cool things which help you to choose “right” movie quickly and simply

Schedule both for particular cinemas and movies which include calendar and time options. User can easily search both for specific movie session OR session in particular cinema.
"Prices start from" XX label which is shown while hovering the time of the film session.
Movie release labels which allow user to have an ability to be the first who is going to watch this movie or not to miss last chance to watch it.

Here is some stuff on Home Page...

There are 3 blocks with films: Now Showing, Coming Soon, Pre-sale tickets.
News block about latest promotions and events .

Promo codes

Usual promo codes

Bonus balance

Every time user buys a ticket for money, special bonuses are awarded to Bonus Balance. Once user has enough bonuses - he can buy tickets for it.

User can simply login to app just via putting his phone number in the field 1 and enter sent code in the field 2 after. If he misses… not a big deal, there are several attempts to do it!