Discuss the project
poster

Online quiz for selecting and recommending skincare products

FrontendBackendPHPLaravelE-commerceDevelopmentVue.js
October 23, 2023

DEADLINE: August 2023

PROJECT TEAM: 3 developers

TECHNOLOGIES: PHP 8.2, Laravel, PostgreSQL, HTML5, CSS, JavaScript, Vue, Git, Docker, Docker Compose

PROJECT COST: < 500,000 rubles

CLIENT

A large Russian chain of cosmetics and perfume stores, holding leading positions in the market. Actively promotes its brand and increases loyalty to suppliers' products. Organizes and participates in events, using modern and unconventional solutions to attract potential buyers. The company approached us for one of such marketing tools. 

GOAL

To implement an interactive web application with an online quiz and email distribution of results.

MAIN TASKS

  1. Design interface based on designer's layouts.
  2. Adaptation of the service for iPadOS.
  3. Email layout for messages.
  4. Development of functionality for the recommendation system.
  5. Creation of an administrative panel. 

SOLUTIONS

The client provided design layouts in Figma, a list of quiz questions in Excel, and explained their vision for development. We carefully reviewed the information, implemented the layout, and devised methods to digitize the required processes.

The quiz participant should find everything simple, fast, and clear. They answer 5 questions about their preferences and, at the end, receive a selection of suitable cosmetic products. Each product comes with a detailed description, usage instructions, and a barcode for easy identification in the store's mobile app. To retain their individual recommendations, the user inputs their email, and a list with links to the company's website is sent to them.

LAYOUT

The online quiz is an interactive tool for the marketing campaign and is broadcasted from iPad screens. We adapted the interface for iPadOS, precisely placing its elements to ensure correct display on tablets. 

A special task with a star became the email layout of messages sent to the surveyed individuals. We had to find a substitute for an external font used in the layouts to ensure it displayed correctly by default on all devices. We selected alternatives similar to the original and finalized the font in coordination with the designer.

FUNCTIONALITY

The quiz sequence was proposed by the client. Our responsibility was to ensure that the user ultimately received the correct list of products. The selection had to align with the preferences specified in the survey. To achieve this, we developed a recommendation system algorithm based on the chosen test parameters. We also took into account that some questions could have multiple answers. 


When a user completes the quiz, they are offered the option to receive a personalized selection of products via email. The potential buyer's provided email is automatically added to the company server's database.

ADMIN PANEL

To enable our client to edit products and update company information, we created a user-friendly administrative panel. It allows independent addition and deletion of information about cosmetic products, linking them to questions, and configuring links.

Developing the admin panel and making adjustments to the online quiz without the involvement of developers is a pragmatic solution. It provides the flexibility to update data and use the web application in other advertising campaigns.

RESULTS

The development of the online quiz took 10 working days. Thanks to effective communication with our client, we were able to fulfill all their requirements quickly and accurately.

  1. We crafted a visually pleasing interface with correct display on iPad, addressing details like font selection and eliminating hanging prepositions, tailoring all design elements to iPadOS.
  2. Implemented functionality for recommending cosmetic products, email distribution, and data collection.
  3. Created an administrative panel with the ability to make changes to the web application.

The client received a flexible marketing tool for their event and provided positive feedback after its implementation. 

logo-background