Design of the PDT system for the company L’Etoile
Redesign of the ITECO company driver profile. Driver.
Redesign of the ITECO company driver profile. Driver.
Redesign of the ITECO company driver profile. Driver.
Task
The user profile needs to be revamped in one of ITECO's products. Driver. Manager's comment: the profile is too long, we would like to change the composition and refresh the design.
Task
The user profile needs to be revamped in one of ITECO's products. Driver. Manager's comment: the profile is too long, we would like to change the composition and refresh the design.
Task
The user profile needs to be revamped in one of ITECO's products. Driver. Manager's comment: the profile is too long, we would like to change the composition and refresh the design.
Tasks
1. Transfer the TSD system from the terminal to a mobile device
2. Identify and resolve issues with the user scenario
Goals
1. Increase employee productivity by using mobile devices instead of terminals.
2. Simplify and speed up the process of scanning and processing goods
Goal
The goal is to optimize the profile structure by reducing the number of scrolls and improving navigation to increase the speed of driver interaction with the interface.
Goal
The goal is to optimize the profile structure by reducing the number of scrolls and improving navigation to increase the speed of driver interaction with the interface.
Chapters
Chapters
Task
The user profile needs to be revamped in one of ITECO's products. Driver. Manager's comment: the profile is too long, we would like to change the composition and refresh the design.
Task
The user profile needs to be revamped in one of ITECO's products. Driver. Manager's comment: the profile is too long, we would like to change the composition and refresh the design.
Goal
The goal is to optimize the profile structure by reducing the number of scrolls and improving navigation to increase the speed of driver interaction with the interface.
Goal
The goal is to optimize the profile structure by reducing the number of scrolls and improving navigation to increase the speed of driver interaction with the interface.

Task
The user profile needs to be revamped in one of ITECO's products. Driver. Manager's comment: the profile is too long, we would like to change the composition and refresh the design.
Goal
The goal is to optimize the profile structure by reducing the number of scrolls and improving navigation to increase the speed of driver interaction with the interface.
About the company
L'Etoile is the largest chain of perfume and cosmetics stores in Russia, with over 1000 locations across the country. Founded in 1997, it offers products from global brands such as Dior, Chanel, and Givenchy. L'Etoile is known for its high level of service, exclusive collaborations, and its own loyalty program, attracting millions of customers.
About the company
L'Etoile is the largest chain of perfume and cosmetics stores in Russia, with over 1000 locations across the country. Founded in 1997, it offers products from global brands such as Dior, Chanel, and Givenchy. L'Etoile is known for its high level of service, exclusive collaborations, and its own loyalty program, attracting millions of customers.
Chapter 2 - WireFrame
Chapter 1 - Research
Chapter 1 - Research
Chapter 1 - Research
Main Screen
Scanning of the application
List of acts
Selection of the act
Condition of the product
Choice of State
Scanning
Yes
No
Do we need to edit the quantity?
Editing
Product list
Product list
Product selection
Scanned goods
Scanning of the application
List of acts
Selection of the act
Choice of State
Scanning
Do we need to edit the quantity?
Yes
No
Editing
Scanned goods
User scenario
Communication with the manager
Communication with the manager
The user taps on the terminal screen, selects their gender, goes through the instructions, and takes a photo. Then the photo uploads, the user scans the QR code, and downloads the photo.
Before moving on to the design phase, I clarified with the managers why it was necessary to change the profile structure: what problems users are facing, which metrics are declining, and what goals are set for the redesign. In response, I received the following: "The main problem is the further scaling of the section. In the future, new blocks will be added, and the profile will become longer. In addition, we are planning a complete redesign of the application with updates to colors and fonts."
Before moving on to the design phase, I clarified with the managers why it was necessary to change the profile structure: what problems users are facing, which metrics are declining, and what goals are set for the redesign. In response, I received the following: "The main problem is the further scaling of the section. In the future, new blocks will be added, and the profile will become longer. In addition, we are planning a complete redesign of the application with updates to colors and fonts."
Communication with the manager
Comment
Comment
Before moving on to the design, I clarified with the managers why there was a need to change the profile structure: what problems users are facing, which metrics are declining, and what goals are set for the redesign. In response, I received the following:
“The main issue is the further scaling of the section. In the future, new blocks will be added, and the profile will become longer. Additionally, we are planning a complete redesign of the application with updates to colors and fonts. As for users, everything seems fine; we need to confirm with them.”
After discussing with the manager, I decided to analyze the solutions of competitors in both our field and related areas (an example comparison is below).
After discussing with the manager, I decided to analyze the solutions of competitors in both our field and related areas (an example comparison is below).
Comment
Next, I analyzed the competitors' solutions from our field and other areas.
After discussing with the manager, the job stories were dropped. It became clear that users can only change their information through the dispatcher - this is not indicated anywhere in the interface. Additionally, drivers cannot add their own cards, as the company collaborates with partners and issues their cards. However, several questions related to passes and personal data remain open, and I suggested talking to the drivers.
ITECO Profile Analysis
Comment
Results of conversations with drivers
After discussing with the manager, the job stories were dropped. It became clear that users can only change their information through the dispatcher - this is not indicated anywhere in the interface. Additionally, drivers cannot add their own cards, as the company collaborates with partners and issues their cards. However, several questions related to passes and personal data remain open, and I suggested talking to the drivers.
Drivers rarely use passes and do not use their data in the application at all. Therefore, the pass block can either remain in its current place or be moved to horizontal scrolling, and the profile block can be removed to the second contour, leaving either email or phone in the first contour. The most important blocks, such as: Dispatcher marks, sensor data, and events on occupational safety and road safety should remain in the first contour.
Results of profile analysis
Comment
In all applications, user information is hidden in the second contour. This helps to reduce scrolling and prioritize more important user scenarios. For example, in Wildberries - switching to favorites, and in HH - viewing responses.
Formulated a job story and hypotheses
Comment
Formulated a job story and hypotheses
ITECO Profile Analysis
After discussing with the manager, the job stories were dropped. It became clear that users can only change their information through the dispatcher - this is not indicated anywhere in the interface. Additionally, drivers cannot add their own cards, as the company collaborates with partners and issues their cards. However, several questions related to passes and personal data remain open, and I suggested talking to the drivers.
Comment
Formulated a job story and hypotheses
Results of conversations with drivers
Drivers rarely use passes and do not use their data in the application at all. Therefore, the pass block can either remain in its current place or be moved to horizontal scrolling, and the profile block can be removed to the second contour, leaving either email or phone in the first contour. The most important blocks, such as: Dispatcher marks, sensor data, and events on occupational safety and road safety should remain in the first contour.
Comment
Conversation with drivers
Conversation with drivers
After discussing with the manager, the job stories were dropped. It became clear that users can only change their information through the dispatcher - this is not indicated anywhere in the interface. Additionally, drivers cannot add their own cards, as the company collaborates with partners and issues their cards. However, several questions related to passes and personal data remain open, and I suggested talking to the drivers.
I spoke with 3 drivers, asked them the same questions, and the answers were more or less the same. A short example of a conversation with a driver: Me: The passes are at the very end of the profile, so they are not that important? Do I need to present them at the border control? Driver: No, you don't need to show the passes at the border control. I rarely look at the passes because I usually don't need them in my day-to-day work. Passes are most often used for access to specific areas or for carrying out administrative procedures. Me: How often do you have to use your data? Do you need to show it to someone? Driver: Honestly, I don't even remember using it at all. When I got a job, they took my data in the office, and it automatically ended up in the app. Regarding whether it needs to be shown - sometimes when receiving cargo, they require filling out a form, which usually needs a phone number, first and last name, and rarely passport details. I know my phone number by heart, and my passport is always with me. Me: What exactly do you use from the profile section? Driver: I use the dispatchers' notes to understand which flights are already confirmed and which tasks need to be completed next. I use sensor data and occupational safety events.
I spoke with 3 drivers, asked them the same questions, and the answers were more or less the same. A short example of a conversation with a driver: Me: The passes are at the very end of the profile, so they are not that important? Do I need to present them at the border control? Driver: No, you don't need to show the passes at the border control. I rarely look at the passes because I usually don't need them in my day-to-day work. Passes are most often used for access to specific areas or for carrying out administrative procedures. Me: How often do you have to use your data? Do you need to show it to someone? Driver: Honestly, I don't even remember using it at all. When I got a job, they took my data in the office, and it automatically ended up in the app. Regarding whether it needs to be shown - sometimes when receiving cargo, they require filling out a form, which usually needs a phone number, first and last name, and rarely passport details. I know my phone number by heart, and my passport is always with me. Me: What exactly do you use from the profile section? Driver: I use the dispatchers' notes to understand which flights are already confirmed and which tasks need to be completed next. I use sensor data and occupational safety events.









Communication with the manager
Before moving on to the design phase, I clarified with the managers why it was necessary to change the profile structure: what problems users are facing, which metrics are declining, and what goals are set for the redesign. In response, I received the following: "The main problem is the further scaling of the section. In the future, new blocks will be added, and the profile will become longer. In addition, we are planning a complete redesign of the application with updates to colors and fonts."
Comment
After discussing with the manager, I decided to analyze the solutions of competitors in both our field and related areas (an example comparison is below).






Results of profile analysis
In all applications, user information is hidden in the second contour. This helps to reduce scrolling and prioritize more important user scenarios. For example, in Wildberries - switching to favorites, and in HH - viewing responses.
Comment
ITECO Profile Analysis
Comment
Formulated a job story and hypotheses
Comment
After discussing with the manager, the job stories were dropped. It became clear that users can only change their information through the dispatcher - this is not indicated anywhere in the interface. Additionally, drivers cannot add their own cards, as the company collaborates with partners and issues their cards. However, several questions related to passes and personal data remain open, and I suggested talking to the drivers.
Results of conversations with drivers
Drivers rarely use passes and do not use their data in the application at all. Therefore, the pass block can either remain in its current place or be moved to horizontal scrolling, and the profile block can be removed to the second contour, leaving either email or phone in the first contour. The most important blocks, such as: Dispatcher marks, sensor data, and events on occupational safety and road safety should remain in the first contour.
Conversation with drivers
I spoke with 3 drivers, asked them the same questions, and the answers were more or less the same. A short example of a conversation with a driver: Me: The passes are at the very end of the profile, so they are not that important? Do I need to present them at the border control? Driver: No, you don't need to show the passes at the border control. I rarely look at the passes because I usually don't need them in my day-to-day work. Passes are most often used for access to specific areas or for carrying out administrative procedures. Me: How often do you have to use your data? Do you need to show it to someone? Driver: Honestly, I don't even remember using it at all. When I got a job, they took my data in the office, and it automatically ended up in the app. Regarding whether it needs to be shown - sometimes when receiving cargo, they require filling out a form, which usually needs a phone number, first and last name, and rarely passport details. I know my phone number by heart, and my passport is always with me. Me: What exactly do you use from the profile section? Driver: I use the dispatchers' notes to understand which flights are already confirmed and which tasks need to be completed next. I use sensor data and occupational safety events.
Chapter 3 - Technical Part






Comment
A mini UI kit was assembled and auto-layouts were set up. Thanks to the auto-layouts, it was possible to implement a 'flexible' layout and assess how the interface behaves on different screen sizes.
Comment
Tokens and variables were configured. If the company decides not to update its colors and fonts, they can be changed in just a couple of clicks. Variables for light and dark themes have also been added.
Comment
The manager warned in advance that users can change the font size, so the layout needs to be designed to look correct at different scales. Using variables and tokens, I created three responsive size states.
Total
Comment
Thanks to the new composition, the screen was reduced by 44%, making the interface more compact and convenient. The other sections of the profile have also been updated.
In addition, after adding the block with information about the dispatcher, drivers can immediately see who is responsible for their data and can instantly call if necessary. This has sped up the acquisition of important information and made communication simpler.
Total
Comment
Thanks to the new composition, the screen was reduced by 44%, making the interface more compact and convenient. The other sections of the profile have also been updated.
In addition, after adding the block with information about the dispatcher, drivers can immediately see who is responsible for their data and can instantly call if necessary. This has sped up the acquisition of important information and made communication simpler.
Chapter 2 - Old Design vs New










Comment
Old profile with sections such as: dispatcher notes, meter data, and OT and BDD.
Comment
Comparison between the main profile screens
Comment
Comparison of other screens
Comment
A screen with contact information has been added
Comment
All screens
WirFrames for terminal
Chapter 2 - Old Design vs New
Chapter 2 - Old Design vs New
Chapter 3 - Technical Part



















Results of conversations with drivers
Comment
Comment
Drivers rarely use passes and do not use their data in the application at all. Therefore, the pass block can either remain in its current place or be moved to horizontal scrolling, and the profile block can be removed to the second contour, leaving either email or phone in the first contour. The most important blocks, such as: Dispatcher marks, sensor data, and events on occupational safety and road safety should remain in the first contour.
Old profile with sections such as: dispatcher notes, meter data, and OT and BDD.
Old profile with sections such as: dispatcher notes, meter data, and OT and BDD.
Comment
Old profile with sections such as: dispatcher notes, meter data, and OT and BDD.
Comparison between the main profile screens
Comparison between the main profile screens
Comment
Comparison between the main profile screens
Comparison of other screens
Comparison of other screens
Comment
Comparison of other screens
A screen with contact information has been added
A screen with contact information has been added
Comment
A screen with contact information has been added
All screens
All screens
Comment
All screens
Comment
Tokens and variables were configured. If the company decides not to update its colors and fonts, they can be changed in just a couple of clicks. Variables for light and dark themes have also been added.
Comment
The manager warned in advance that users can change the font size, so the layout needs to be designed to look correct at different scales. Using variables and tokens, I created three responsive size states.





Персональное
Портфолио
Персональное
Портфолио
Other projects
Chapter 3 - Technical Part
Comment
A mini UI kit was assembled and auto-layouts were set up. Thanks to the auto-layouts, it was possible to implement a 'flexible' layout and assess how the interface behaves on different screen sizes.


Comment
Tokens and variables were configured. If the company decides not to update its colors and fonts, they can be changed in just a couple of clicks. Variables for light and dark themes have also been added.


Comment
The manager warned in advance that users can change the font size, so the layout needs to be designed to look correct at different scales. Using variables and tokens, I created three responsive size states.
Other projects
Other projects
Персональное
Портфолио
Персональное
Портфолио
Total
Total
Comment
Comment
Thanks to the new composition, the screen was reduced by 44%, making the interface more compact and convenient. The other sections of the profile have also been updated.
In addition, after adding the block with information about the dispatcher, drivers can immediately see who is responsible for their data and can instantly call if necessary. This has sped up the acquisition of important information and made communication simpler.






Redesign of the ITECO company driver profile. Driver.
About the company
L'Etoile is the largest chain of perfume and cosmetics stores in Russia, with over 1000 locations across the country. Founded in 1997, it offers products from global brands such as Dior, Chanel, and Givenchy. L'Etoile is known for its high level of service, exclusive collaborations, and its own loyalty program, attracting millions of customers.
Task
It is necessary to revise the user profile in one of ITECO's products. Driver. Manager's comment: the profile is too long, I would like to change the composition.
Goal
The goal is to optimize the profile structure by reducing the number of scrolls and improving navigation to increase the speed of driver interaction with the interface.
About the company
L'Etoile is the largest chain of perfume and cosmetics stores in Russia, with over 1000 locations across the country. Founded in 1997, it offers products from global brands such as Dior, Chanel, and Givenchy. L'Etoile is known for its high level of service, exclusive collaborations, and its own loyalty program, attracting millions of customers.
Chapter 1 - Research
Communication with the manager
Before proceeding to the design, I clarified with the managers why there was a need to change the profile structure: what problems users have, which metrics are declining, and what goals are set for the redesign. In response, I received the following:
“The main problem is the further scaling of the section. In the future, new blocks will be added, and the profile will become longer. Additionally, we are planning a complete redesign of the application with an update of colors and fonts.”
Comment
After discussing with the manager, I decided to analyze the solutions of competitors in both our field and related areas (an example comparison is below).

Results of profile analysis
In all applications, user information is hidden in the second contour. This helps to reduce scrolling and prioritize more important user scenarios. For example, in Wildberries - switching to favorites, and in HH - viewing responses.
Comment
ITECO Profile Analysis


Comment
Formulated a job story and hypotheses

Comment
After discussing with the manager, the job stories were dropped. It became clear that users can only change their information through the dispatcher - this is not indicated anywhere in the interface. Additionally, drivers cannot add their own cards, as the company collaborates with partners and issues their cards. However, several questions related to passes and personal data remain open, and I suggested talking to the drivers.
Conversation with drivers
I talked to 3 drivers, asked them the same questions and the answers were more or less the same. A short example of a conversation with a driver
I: The passes are at the very end of the profile, so they are not that important? Do I need to provide them at the border control?
Driver: No, you do not need to show the passes at the border control. I rarely look at the passes because usually, I do not need them in my daily work. Passes are most often used for access to specific areas or for administrative procedures
I: How often do you have to use your data? Do you need to show it to someone?
Driver: Honestly, I don't even remember using it at all. When I got a job, they took my data at the office and it automatically ended up in the application. As for whether it needs to be shown - sometimes, when receiving a cargo, they require filling out a form, which usually asks for a phone number, first name and last name, and rarely passport details. I already know my phone number by heart, and I always have my passport with me
I: What exactly do you use from the profile section?
Driver: I use the dispatcher notes to understand which flights are already confirmed and which tasks need to be completed next. I use the sensor data and occupational safety events
Results of conversations with drivers
Drivers rarely use passes and do not use their data in the application at all. Therefore, the pass block can either remain in its current place or be moved to horizontal scrolling, and the profile block can be removed to the second contour, leaving either email or phone in the first contour. The most important blocks, such as: Dispatcher marks, sensor data, and events on occupational safety and road safety should remain in the first contour.
Chapter 2 - Old Design vs New
Comment
Old profile with sections such as: dispatcher notes, meter data, and OT and BDD.

Comment
Comparison between the main profile screens

Comment
Comparison of other screens

Comment
A screen with contact information has been added

Comment
All screens

Chapter 3 - Technical Part
Comment
A mini UI kit was assembled and auto-layouts were set up. Thanks to the auto-layouts, it was possible to implement a 'flexible' layout and assess how the interface behaves on different screen sizes.

Comment
Tokens and variables were configured. If the company decides not to update its colors and fonts, they can be changed in just a couple of clicks. Variables for light and dark themes have also been added.

Comment
The manager warned in advance that users can change the font size, so the layout needs to be designed to look correct at different scales. Using variables and tokens, I created three responsive size states.

Total
Comment
Thanks to the new composition, the screen was reduced by 44%, making the interface more compact and convenient. The other sections of the profile have also been updated.
Moreover, after adding the block with information about the dispatcher, drivers can immediately see who is responsible for their data and can instantly call if necessary. This has sped up the receipt of important information and made communication easier.
Other projects
Персональное
Портфолио

