Product Designer
Hi! My name is Nataliia. I'm a product designer with 4+ years of experience. I've designed interfaces for a B2B company that helps forex brokers manage risk and trading flows (FX SaaS). Before that — websites and mobile apps in logistics and a digital agency.
Website for a transport company
Project summary
Collected cargo is a company which is engaged in cargo transportation in Russia and neighboring countries. Before the redesign, the site allowed the user to view prices, calculate the cost of freight transportation and place a call back to the manager.
The calculator had two formats. An express calculator on the home page and a separate section on the site, which was supposed to help get a more correct price calculation.
The calculator had two formats. An express calculator on the home page and a separate section on the site, which was supposed to help get a more correct price calculation.
Collected Cargo is a subsidiary
of Gruzovichkof
of Gruzovichkof
Tasks
Improve usability of the product and reduce non-targeted applications.
Visual Benchmarking
An analysis of competitors' calculators shows how companies communicate with customers, what functionality they use. This forms a certain user behavior.
The user may have problems using a new calculator if previous experience is not taken into account at the first stage.
User feedback
No understanding of how pricing is formed...
CJM
This tables helps to understand at what stages the user has difficulties in using the interface. It was interesting for me to simulate the behavior of users and in the new calculator to take into account all the comments. Journey step — the user's steps on the way to successfully completing a task. Thoughts and feelings combined make it possible to understand what state the user is in when using our interface.
Feelings combined make it possible to understand what state the user is in when using our interface. Insights are ideas that I found interesting to develop the calculator.user may have problems using a new calculator if previous experience is not taken into account at the first stage.
CJM: individual users
The needs of users
CJM: business users
The needs of users
Wireframes & sketches
Desktop
The calculator consists of several blocks to make it easier for the user to navigate. The block Your order is stuck when scrolling and shows the price change.
I made a description for each type of package. There is a separate rate for users who don't want to choose a pack.
In the order review there is an option to download a pdf. This is a useful feature for managers.
Mobile version
Users who order from mobile devices account for 20% of regular orders. That's why I developed a mobile version of the app.
Development
We had to give up some design decisions in the first iteration because development time was limited.
I used Notion to record comments for the developers in one place and see the work process.
I used Notion to record comments for the developers in one place and see the work process.
Сalculator feedback
The program was making several requests at once and loading data took a long time and made the whole process of creating a order for the user slower. We made a feedback button that tells you the statuses of the calculator.
Button preloader
The checkout button prompts the user in which data there is an error.
Results of the redesign
The decision to order affects not only the design of the calculator interface, but also the final price of freight, the speed of the calculator and the limitations associated with frames.
Product team
Product manager — Alexey Martinovich, Product owner — Dmitriy Kochetkov, Art-director — Artur Farrahov, Develop Lead — Valery Strebkova, Designer — Natallia Porokhina.