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

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.

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.

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.

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.

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.

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.

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

“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.” - Project Manager / Business Analyst

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

“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:

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:

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

“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.

Roman

“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.” - Lead front-end 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.

Roman

“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.” - Lead front-end 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

“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

“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!!!

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.