Smart Car Console - Design Development

After my wire framing/initial idea exploration and feedback session, I was comfortable to start attempting the design of the interface digitally. I had decided I will go with my initial idea of having 4 main categories/sections for the home screen, and work my way through the different functions and features of the console, attempting to design their use as simply as possible. From my feedback session, I had also decided I will aim of having each feature/function accessible in 3 steps. Of course, some features/functions are by nature more complex and will require more than 3 steps to create function for, however, I knew that if I set myself the goal of 3 steps for everything I will not over-design or over-complicate things more than they needed to be or that I aimed for them to be.

From my research into Monotype and typefaces most suitable for at-glance reading, a had first looked into a variety of Humanist typefaces that I could use for my design. The typeface I chose to use in the end is Lucida Sans Unicode. I chose this typeface because it had the tallest and widest visual, and I felt it would be the most appropriate for the clearest legibility.

Having already decided that I will work with a home screen of 4 categories, I went on to create guidelines for the icons and text that would sit within the four sections. The icon I choose were all the typical and common icons associated with the words/categories they are to represent. I did this because with user interfaces, familiarity is an important feature. The user will be far more comfortable with the system, and be more likely to know how to use it if they have already come across the function/icon/symbol before. Because of this, I used familiar and common icons throughout my whole design process.

Next I looked at colour schemes I could use throughout my design. As the aim of my interface was to be minimal I first tried a very plan white and grey combination. Although this was effective in being simplistic and minimal, I felt that it was too much so. Another aim I had for my interface was for it to be easy and quick to use, and the white and grey combination made the different categories too difficult to distinguish and understand, especially at a glance.

I then tried a combination of different tones of grey, as well as black and white for the text. Although this was an improvement in terms of legibility and distinction between the categories, I now felt that the monochromatic colours were simply too muted and neutral for at-a-glance comprehension and usability.

Moving away from monochromatic, I experimented with single colour variations. The red I felt was instantly more eye-catching and would give the user clear distinctions of selection, however, the red actually is too eye-catching as I believe it could be too distracting for the driver which in turn would be dangerous for them.

Instead of res, I then tried blue. The blue was a lot less attention grabbing or alarming as the red. The different tones were effective in showing the different category distinctions. However, throughout this stage of the design process I had come to realise and think of the bigger picture, that if I used the small colour scheme of various blues and white for the home screen, that would be the colour scheme I would have to carry throughout the rest of my design. As the interface of a car console is quite complex and holds many features, the whole interface being blue would become very boring and confusing.

Thinking back to my research into the Smart car brand and their existing interface designs, I got inspiration from the colours within the brand guidelines, and the use of colour within one of the interface designs. That design utilized different colours to distinguish between different categories within the menu. I realised that this would also be very appropriate and effective for my interface design and what I was aiming for it to do. The four colours would not only allow the user to distinguish between the categories and become familiar with the functions associated with each colour, but also ease their navigation throughout the system, as they would easily be able to know which category they are in at any given time by simple a quick glance to the screen.

Having established a colour scheme, I began designing some of features that would be part of the interface. Here I looked at radio and playlist selection. At first, the colour grey for the background seemed as if it would be an appropriate neutral colour to use, as it would not distract the driver from the information being presented. I also though that the small uses of the colour purple would also be enough to show the user that they are within the 'Music' category of their system. However, looking at the designs with the grey background it felt as if they had no cohesion, with each other or with the main home screen. The layout of these designs also added towards no cohesion, and was something that I needed to address.

Instead of the grey background, I experimented with making the background colour the same as the category colour, but simply at a lower opacity. This instantly not only looked visually more appealing, but also allowed all the elements on the page to pop out and stand out more, which means their legibility has also increased. The double use of the colour purple also now makes it doubtless that the user would be experiencing the 'Music' category of the interface.

Knowing that my console interface design will include a GPS, as well as Music, I knew that I will need a keyboard design that would allow the user to search for what they need. I wanted to make the design of the keyboard as simple and easy to use as possible. Therefore, I made sure to have as little amount of buttons as possible to allow for those buttons to have as much space as possible. The bigger the buttons, the easier they will be to locate and press, the therefore the better the user experience will be.

After designing the keyboard I tested it against the 'GPS' category colour green. Being simply black outlines instantly proved the keyboard to be quite illegible and blend in with the background.

Removing the black outlines, and instead making the keyboard white instantly proved to be the solution. The numbers, letters and symbols within the keyboard became much clearer and legible. At this moment I knew, that as well as black, white would be a key colour within my design that would help to bring legibility and clarity to my interface.