spot spot
Automotive Case Study: How we worked on MyMyCars | MMG Cases

Automotive Case Study: How we worked on MyMyCars | MMG Cases

Automotive Case Study: How we worked on MyMyCars | MMG Cases
Andrii Kuranov

Author:

Andrii Kuranov

Content Manager

Category: MMG Cases
5 min read

We continue the series of articles about our cases. The previous article about how we did the MyScore AS application for the fintech industry can be found here. As you may know, MassMedia Group works in many industries, and automotive retail is no exception. We’re going to be talking about how we’ve helped create an innovative solution in this industry. One day, a client from Ukraine asked us to create a cool modern platform for selling cars. According to them, at that time, a monopoly of one particular service dominated the Ukrainian car retail market. At the same time, the attitude towards customers on their website left much to be desired, many useful functions were absent, and the platform itself was full of paid features, although services in other countries offered these functions to users without any fees. Our client set the goal to correct this situation by creating a "service for users." When it came to choosing executors, the choice fell on us, because we are best suited to the customer's business approach and took on all the pain points of development. This allowed the client to concentrate on thinking of interesting ideas and marketing strategies while we were engaged in business logic and its implementation into the technological side.

Essentially, we needed to develop a single comprehensive solution for car owners. We talked to the client and analyzed the competitors, relying on the best examples of foreign analogues' services. In the end, we formed a list of key customer requirements:

  • It was necessary to develop a comprehensive application for car owners and dealerships;
  • The advertisement published by the user should contain high-quality content and all necessary data for comfortable viewing and selection of cars by other users;
  • The application should interact with financial institutions (insurance companies, banks, etc.);
  • The application should include various value-added services, such as functionality to purchase car reports;
  • The application should include a personal profile page with the ability to compare cars, add them to favorites, and other profile editing options;
  • The application should be able to generate custom lists of car favorites on the personal profile pages;
  • The application should have a news block for the development of the community of car enthusiasts on the site.

From this list, our work on the project began. therefore we decided to start this article with it as well. However, before we go to the meat of the project, let’s make an important statement. Even now, while this material is being written, the project’s team is deeply immersed. New functionality is being added to it, new features are being developed, and the business analyst is negotiating with the owner of the product about further prospects. In this article, we will talk about what is already done at the moment. Moreover, we will not just provide information, but ask for the opinion and impressions of people who were directly involved in the work on it. Well, that’s enough chitchat. Here we go!

 

Project Description

So what is the MyMyCars project?

MyMyCars is an online service for the sale and purchase of new and used cars. It can be used both by individuals and companies, such as dealers and traders. The service is customer-oriented and has many features designed to make using MyMyCars more convenient. For example, it has a special function for selecting a car for technically unskilled users, allowing you to select a car by such characteristics as color, body type, etc. There is also an option to order a service report for the car, in order to make sure that the seller was honest in specifying the information about the car.

yana
Yana
“One day our CTO came up to me and said, 'Yana, we have a new project planned and you'll like it.’ Frankly speaking, I got a bit suspicious. God knows what is there. Then I learned the ropes and understood that something really interesting was being planned. Many of the features were really unique for our market, and therefore we had to be pioneers. But this is even more interesting.” - PM/BA

 

Key Tasks

By holding a number of meetings with all parties involved in the project, we formed a number of key tasks:

  • Develop a rotation system

    The main point of the rotation system is to encourage users to fill in information about the ad. In this case, their ads are placed higher in a kind of rating and therefore are reflected in the search more often.

  • Implement a system that provides recommendations

    Usually the product you have just searched for is recommended everywhere on websites. We decided to develop a recommendation system that will not provide the same product from another seller, but similar vehicles with a number of characteristics.

  • Implement the possibility to order a car for test drive

    The user should be able to sign up for a car test drive. After filling out the form, the application should come to the personal cabinet of the user who published the announcement for approval.

  • Implement the function of displaying the sales leader

    Users on the main page of the website should be able to see the list of the best-selling cars among both new and used ones. Sorting of cars should be performed according to the type of bodywork.

  • Create a system for selecting cars with different filters

    Any user should be able to search cars according to the selected filters. All filters will be controlled through the administrative panel by site administrators.

  • Ensure the interaction and correction of information from the state databases

    Sometimes, when the information is loaded from the state database, it may be false because the database contains outdated information or does not have the required categories. Our task was to provide automatic correction of such information when searching through the website.

  • Implement a news blog for the website

    We needed to implement the MyMyCars blog on an existing website so that administrators could add news and articles. The purpose of this blog is to develop the motorists community on the resource. We also needed to add the ability for website administrators to create different categories and appropriate articles with the ability to add text, graphics, and video content.

yana
Yana
“The team was captured by the work in the beginning because each participant understood the huge responsibility. We understood that this is not just a platform for selling cars, but an application that covers all areas related to cars. So there were a lot of ideas and concepts that caused a long discussion during the brainstorming session. We tried to find the best solution. And I think we nailed it. We have implemented a quality application that can compete with the leaders of the automotive market from the very first days of launch.” - PM/BA

The tasks have been sorted out; it's high time to move on to their implementation!

 

Creation Process

 

Stage 1 - Discovery

Discovery is the stage where we conduct an initial analysis of customer requirements and form the terms of reference.

During this stage, we discussed with the client ideas, requirements, and desired competitive advantages. First of all, we carried out complex work on competitor analysis. We thoroughly studied global practices and set features in such services.

But don’t think that we were just walking down a beaten track. We also had our know-how. For example, during one of the meetings we thought about how to implement the car search by category, so it would be convenient for as many users as possible. Then our business development manager Olena, together with the client, came to an interesting conclusion. Neither Olena nor many of her acquaintances had any idea what the engine volume is or why it is important for the car. That's how we invented what we inside the team called "car selection for girls system." (Girls who are fluent in cars, no hard feelings.) Its essence is to create a user-friendly interface for users who don't know the technical specifications but have an idea of the purpose of the car, for example: "for the city" or "for the family". In general, at this stage, we have collected a list of key functions and figured out how all this can be improved.

As a result, we approved a strategy for the creation, development, and implementation of the platform, evaluated the necessary resources and work to be done in the process, and drew up a development schedule. The customer liked what they saw, so we approved a number of important formalities, such as the cost of work and additional legal and business requirements of the customer, then signed the contract and proceeded!

olena
Lena
“We have analyzed many similar sites, both Ukrainian and foreign ones, generated ideas for implementation, checked what opportunities this or that feature provides, and what advantages/disadvantages of competitors with similar functionality have. With this, we went to the client for discussion (they came to our office personally or we talked online). They listened to our vision and corrected it in accordance with their vision, and as a result the optimal variant of platform development that combines business logic and the possibility of technical implementation was obtained. After this stage, we had a strict picture of what exactly was needed in each block.” - Account Manager

 

Stage 2 - Design&Prototyping

Design&Prototyping is the stage where platform planning and prototyping takes place. All the collected and approved information was documented in the terms of reference with the drawing of prototypes. Of course, all this was first agreed upon within the team. Once everything was approved with each other, the decision was given to the client. If we draw parallels with the construction of a house, it is similar to creating a building plan. After the approval of the terms of reference, WBS (Work Breakdown Specification - a list of work tasks and subtasks of the project) and roadmap (review of goals and milestones of the project) took place. They were presented inside the team and then presented to the client.

All the above may seem a bit trivial, but we just want to emphasize how important it is to work synchronously, coherently, and according to all the rules.

Also, at this stage we have compiled a strategy of work on the project, during which the work was divided into several milestones, aka blocks. It was done in order to ensure correct project logic, so that critical features were implemented first. It also allows the client to better track the effectiveness of the project and see the progress of the milestones. And in the end, development by blocks relieves the customer of the financial burden.

We’ve chosen next technology stack:

  • Typescript;
  • PHP;
  • Symfony 4 (PHP 7.3.10);
  • Node.js;
  • Vue 2.6;
  • Docker virtual environment;
  • Nginx
  • Nest;
  • ElasticSearch;
  • HTTP REST API;
  • PostgreSQL 12.0;
  • Redis.

 

dmytro
Dmytro
“All technologies were selected for a large project, which will be supported and expanded. On the front-end side we used Vue and Typescript; on the back-end side we used Symfony. The advantage of TypeScript is that it standardizes the code, makes the project "readable," and makes it easier to extend. This solution will remain relevant for a long time and is the choice of true developers.” - Front-end developer

Then we created a detailed plan for the development and further launch of the platform and started work on the first block. After some time and some liters (or gallons if you please) of coffee, a set of platform prototypes was ready for basic understanding, where what will be placed. In general it looked like this:

project-prototype

another-project-prototype

One should also understand that in the course of work on the project design, logos and other graphic components underwent changes.

We were more than happy with the result because it was a serious step forward. The client shared our joy. And so we started to discuss and agree on further product development with the addition of new features. Oh, there is no limit to perfection.

oksana
Oksana
“As a designer, I was interested, although in fact it was not always easy. This is a fairly large-scale project, and the main task was to make the site, despite its multifunctionality, clear and easy to use. At this stage, I got acquainted with the project, did UX research, and then started drawing prototypes to represent all the functionality. The result is a modern, bright, and easy to use product that is gaining momentum every day.” - UI|UX Designer

 

Stage 3 - Development

Development is a stage of product creation itself, where we develop an architecture with a built-in scalability and a complete IT product with UI/UX in mind, which we test and deploy. This is accompanied by our expertise, processing of complex situations, and suggestions of our own solutions for improvements. At the end of the process, the software is set up, the client is trained, and documentation for the IT product is generated and transferred. During this stage, all tasks were broken down into sprints using Scrum methodology. After the approval of prototypes and technical specifications, the solution architect created the project architecture, while lead developers created and approved the database architecture.

Architectural development is a very important and laborious process, as here is formed the "skeleton" of the application, which will later hold all the features. Any doubts we approached this stage with all responsibility?

In the end, we once again discussed with the client the priorities of tasks in order to start working on the most important parts of the functionality first, and we started coding.

 
“As programmers, we aimed at making a cool project. The result was more than promising, as it contains a lot of useful solutions that we have implemented. Sometimes it was difficult to implement one or another feature without breaking the business logic, but in the end we’ve managed to solve everything at its best. The main thing is to make every opinion be heard. Frankly speaking, I don't even remember which of the implemented features I pushed and which one the guys pushed. It's just that all decisions were made collectively. Everyone has to be heard.” - Roman, Developer

We approached the organization of the work process with all meticulousness. Tasks were broken down into sprints, 2 times a day (morning and evening) the team held daily meetings, and at least once a week we met with the client for further planning and retrospective. In the end, we showed the client a demo version of the developed functionality. Something worked perfectly, something, after a direct test in the field, was decided to be removed. In addition, we established a productive interaction with an external devops team responsible for the product functioning on the client's servers. We were able to establish high-quality communication with them and subsequently worked perfectly well together. But we shouldn't think that everything went very smoothly.

 
“Did we have any difficulties? Frankly speaking, for us it was quite a hang-up to set up SEO-optimization. The fact is that we have here Single Page Application (SPA), which is not very friendly with SEO. To make it clearer, the SPA always changes the content and search engines have nothing to hang on. We have solved this problem. There were some disputes. A lot of arguments. In the end we decided to pre-render. Briefly, it is a mechanism that generates a static html file, not a dynamic one. In this way, the search engine can "scan" the information from the site to demonstrate it in the output.” - Roman, Developer

Having a developed demo on hand, we began to develop and refine all aspects of the product. We continued to implement additional features, thoroughly tested the platform for bugs and roughness, and coded, coded, coded as if there was no tomorrow.

Some tasks required special attention, for example, the development of a rotation system.

Initially, the client said something like: "it is necessary to make users fill in their offers". No sooner said than done; this rotation system was invented. The function of the system is to encourage users to fill in the information about the offer. In this case, their offers have a higher rating and are most often reflected in the search. We have defined the characteristics typical for all cars. Based on this list of characteristics, their priority was determined and coefficients were set in order to understand the extent to which an ad is filled in. In this way, users will be able to see first the ads filled according to all standards.

Some tasks were dictated by the need for some quality-of-life improvements, for example, the development of a recommendation system. Have you noticed that if you are looking for a VW Golf, you will be haunted by advertising of this very machine? Seems like choice without choice, isn't it? To avoid such situations, we met with the customer and decided to develop a recommendation system that provides analogues of the car. That is, cars with the same characteristics, but from other manufacturers, such as Renault, Peugeot, Mercedes. Thus, a person knows that he can choose from something else, rather than stop at VW Golf counting on a certain budget.

dmytro
Dmytro
“We have also made a mini-ORM system with which we always have some public data, which significantly reduces the load on the server and optimizes processes. The site has information that changes little when working on different pages. We have implemented a solution that transfers this data to the user's side and there is no need to contact the server every time for this data, which reduces the load time and the site is faster!” - Front-end developer 

If you are vaguely oriented in technical terms, we asked our leading developer Ihor to explain why this feature is useful. He said the following:

ihor
Ihor
“The advantage over competitors is that this project is a SPA (Single Page Application). In fact, because of this the first visit of the user to the site a little longer than usual, but further navigation is almost instantaneous. There is no need to download new markup, because only dynamic data is loaded.” - Lead Developer

Thank you, Ihor. Now, let's move on to the results.

 

Results

At the moment, we continue development of the project. Currently, we have already implemented 6 blocks and continue to work actively on the 7th one. Here what is ready:

  • We have implemented a system to add cars to favorites and compare them, as well as a system to select a car for the convenience of users. We have also implemented a system of recommendations for users to have more choice.
  • We have implemented a system for adding cars to favorites and comparing them, which allows the user to choose from more cars.
  • The application has a rotation system, thanks to which the user of the resource gets more information about cars.
  • The application has a news display function for the blog, so that users can read about cars between the selection, purchase, and sale of cars. XZibit would be proud of us.
  • It is possible to order a test drive, so you can try out a stallion you like in action.
  • We have introduced a system of recommendations for users who are not particularly knowledgeable about cars specifications.
  • The display of the sales leaders has been implemented so that the top sellers could be immediately visible.
  • We have implemented the ability to create profiles for both ordinary users and business.
  • The functionality changes slightly according to the choice for a better user experience.
  • We have implemented a personnel management system for site administrators.
  • We added a receiving of car reports option.
  • We have implemented the ability to add offers and view the added offers for both dealerships, traders, and regular users.
  • We have added business management functions for dealers and traders.
  • We added the ability to receive site statistics for added users or offers for any period of time has been implemented.

Read no more; it’s better to see with your own eyes!!!

mymycars-home-page

Home page

rotation-system-example

Page of ads, rotation, and recommendation systems

car-pick-up-feature-example

Car pickup system

personal-user-account-example

Personal user account

And this is just the beginning! Many new interesting features are currently being worked on.

 

Business Value

So, let’s sum it up. We have created an application, which can become a worthy competitor to the existing solutions on the of Ukrainian automobile retail market. Before the appearance of MyMyCars, the market was in fact monopolized, but now there is a new strong player. The number of site users, along with ads and grateful feedback from them, is growing daily. At the time of the writing of this post, the number of registered users exceeded 50 thousand and the number of car sales announcements exceeded 25 thousand. In the future, it is planned to fully develop the project and add new functionality.

We wish the project to flourish and from ourselves guarantee to make everything we can for this. After all, a reliable IT partner can be the key to success of the client's company.

Frequently Asked Questions

What is MyMyCars?

Answer:

MyMyCars is an online service for the sale and purchase of new and used cars. It can be used both by individuals and companies, such as dealers and traders. The service is customer-oriented and has many features designed to make using MyMyCars more convenient. For example, it has a special function of selecting a car for technically unskilled users, allowing you to select a car by such characteristics as color, body type, etc.

Why has this project been developed?

Answer:

Our client has set the goal to disrupt the monopoly on the car retail market by creating a "service for users". And when it came to choosing executors, the choice fell on us, because we are best suited to the customer's business approach and took on all the pain points of development.

What is the technology stack for this project?

Answer:

We’ve chosen next technology stack: Typescript; PHP; Symfony 4 (PHP 7.3.10); Node.js; Vue 2.6; Docker virtual environment; Nginx; Nest; ElasticSearch; HTTP REST API; PostgreSQL 12.0; Redis.

Which challenges did you confront during the development of this project?

Answer:

Some tasks required special attention, for example the development of a rotation system. Initially, the client said something like "it is necessary to make users fill in the ads". No sooner said than done, this rotation system was invented. The function of the system is to encourage users to fill in the information about the offer. In this case their offers have a higher rating and are most often reflected in the search.

What are the overall results?

Answer:

The number of site users, along with ads and grateful feedback from them, is growing daily. At the time of writing this post the number of registered users exceeded 50 thousand and the number of car sales announcements exceeded 25 thousand. In the future it is planned to fully develop the project and add new functionality.