Design of the PDT system for the company LEtoile

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.

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.

Персональное

Портфолио

Персональное

Портфолио

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

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.

Персональное

Портфолио

Create a free website with Framer, the website builder loved by startups, designers and agencies.