UI/UX mobile app design for the “TransTechService”
Design 200+ screens for Android and iOS platforms in light and dark themes.
Made in 2020
Update the interfaces of existing applications. Develop and add new screens. Implement a dark theme for major mobile platforms.


The Customer already had mobile applications placed in stores. The first task was to create a screen design for the new “Bonus System” section. It was necessary to develop the UI-design of the application based on ready-made UX-mockups. At the same time, it was not necessary to be guided by the appearance of existing screens – they were also planned to be updated: to make them more modern and clear and to add functionality.

That is, we were not just creating another section, but defining a new design concept for the application. The screens should be made in two themes – light and dark.


Bonus system

So, the work started with the design of the loyalty program. The essence of the new section is to provide the client with an opportunity to quickly issue a virtual bonus card, displaying up-to-date information about accrued points and debit history.

The customer provided prototypes with his vision of the task’s realization.

Prototype from the Customer

We have analyzed them for usability and prepared suggestions for improvement:

  1. The page of a registered user should be different from the screen of an unregistered user. If a person is not authorized in the system, they should be offered the opportunity to fill out a questionnaire to receive an online bonus card. 
  2. It is necessary to think over the Questionnaire in such a way that the user is more willing to fill it out – not to overload it with questions, nobody likes to enter a large amount of data and perform many actions. If you divide the Questionnaire into personal information and other data (family, hobbies and social information), the probability that the user will go to all screens is small. Even if this information is mandatory, it will create inconvenience for the client and reduce the probability of bonus card registration. 
  3. It is necessary to decide which variant of the bonus card is preferable – a real “plastic” card or an online card.

The customer accepted the proposed changes, and we started working.

For a new user, they removed from the start screen the transitions to filling in personal data and left only one button: “Get Card”. This way, the user immediately understands what target action is expected of him.

Loyalty system design in mobile application

For those who already use a virtual bonus card, the start screen displays card data, the number of points, and accrual history. The link “Questionnaire” allows you to add or change personal information.

The division of data when filling out the Questionnaire has been removed. Such division creates inconvenience for the client: he has to go to the section, fill in the Questionnaire, click “Save,” and go back. And so for each item – 12 clicks. The probability that the user will fill in all the data in this case is small. After we removed data filling from the start screen and merged the Questionnaire, the number of clicks decreased to one!

Mobile application design: filling out the questionnaire

The customer chose to use a virtual card, as this option would be even more convenient for the user: they don’t need to carry a card. Plus, it is an additional incentive to have a mobile application installed.

Bonus system in the application

Other screens

We have worked on the new design of the catalog. Each car card displays the following information: model, year, mileage, drive system, transmission and body type.

Car dealer application development

Implemented a left-side menu for easier interaction with the app.

Menu in the mobile app

For the convenience of the user, when choosing a car, a filter with many criteria is used. For example: make, model, price range, year of manufacture, mileage, etc.

Design of directories in the mobile app

The selected filter settings can be saved.

Filter customization

You can use the mobile app to book a car and prepay for it.

Online booking in the app

The “TransTechService” company offers its clients the Trade-in service. We have prepared 4 screens for each step of the car valuation appointment.

Onboarding design in the mobile app

You can book a maintenance appointment via the app. To make an appointment, you need to specify the make of the car, the choice of maintenance type, mileage, equipment, and model. Then it automatically calculates which service number is required, it can be selected manually.

This is already usual work for us, we have already done similar functions in the iCherga and AvtomoykiRU applications.
Online service appointment

Before confirming the appointment, a screen with the list of services and the total cost of the service is displayed. When the user has made an appointment, a reminder of the appointment is displayed on the screen: service address, date and time.

User booking information

Dark Theme

After the light theme screens were implemented on both platforms (Android and iOS), we worked out the design of the application and in the dark theme.

Design a dark theme for a mobile app
Share on social networks: