Background UI Design Process User Interface Graphic Design

Background

The system was developed in order to enable Garages to establish a customer club and provide “smart cards” to their members - car owners. The Smart cards contain information about the car, e.g. service records. The system consists of an optical card reader and an application which enables the users - garage clerks - to issue new cards, update data and offer benefits to members.
The overall application and its windows were pre-designed by the company itself, without final graphic design (the original windows are displayed in figure 1).






UI Design Process

The UI professional of Pamam studied and analyzed the functional requirements, the user tasks and the characteristics of the environment. Then, using a workflow description tool (Visio) she analyzed and described the entities and workflows of the system. Main issues defined by the analysis:

	The application is a secondary tool and will always be open alongside other primary applications. Its main window should be open all the time without interfering with the primary application.
	The system does not serve an essential task of the user, and may be totally ignored. Ease and efficiency of use is critical for the acceptance of the product.
	The Analysis of the users’ workflows has shown that the information and functionality of the application could be organized in a much simpler structure.

User Interface The application contains two windows: The Main window is a small screen that remains open all the time. It only contains the logo, two buttons and a status line. The “Card” window is a dialog which contains all the car data, divided into four tabs. The Common workflow for a user will be: The user puts a card in the Card reader, and presses “New Card” or “Open Card” >> In the Card window the user reads or updates data >> When finished he presses “Write and Close”. Main changes:

	Only two windows, instead of six!
	The main window is in Toolbar style - thus saving screen area and enabling the application to be open in conjunction with the primary application.
	A very simple and self explanatory workflow.

Graphic Design


The goals of Auto Smart graphical design were to put a strong emphasis on the commercial identity and branding of the product, as well as creating a clear, easy to use and intuitive look that will encourage users to use the application.
These goals were achieved by using a unique set of colors based on the pre-designed company logo, focusing on the similarity between the different parts of the system, creating intuitive and appealing icons while relying on straightforward, common language and standards.