The first part of the development stage for my autonomous vehicle UI was to do some sketching. I wanted to try and get as many ideas down as possible to see what direction I could take the UI in. Considering my user story and the competitor research I done, I tried to get a basic layout of how the app would look and work. The UI will have 3 base screens, which are: Home, Car Performance, and Media. The more confidence I got in the sketches, the more detailed and larger I would make them. The first ones started really small this was simply to get my ideas onto paper. I then added some more detail, still exploring to see what would work or not. I finally used a sharpie to get a clear layout down, with annotations to explain what the sketch was showing.
I then made a sitemap for the UI. We had to consider all of the different screens and sections that would be in the UI. Using pen and paper I jotted down what I think would be included in the UI, and places these in 3 main screens. These were Home, Car Performance, and media. It was interesting and helpful to see all the different elements that are included on each screen in this way. It made me realise how many different things the user can do with each screen and the capabilities of the product. This set me up well before I moved into designing the interface.
The next thing that I had to consider was what sort of colour I would be using in my UI. I wanted the theme of it to be futuristic and modern, with also taking into consideration that this product is for car enthusiasts who are into the performance of the car. With all this considered, I researched what colours were considered futuristic. Research showed that blue was heavily associated with the future so I will definitely be implementing blue in the colour scheme somehow. For the background I used a dark blue gradient and this would be the main colour throughout the UI. For typography I used white as this had a great colour contrast ratio against the background. As an accent colour I used a light blue and this will be used whenever I want the users attention to be drawn towards something.
For typography, this was a very important aspect of the design and visual grammar of the UI. I wanted to ensure that I choosing one that was futuristic yet legible and readable. Although I was designing for car enthusiasts, I still had to ensure that the UI was accessible to all users. After doing some research I found a typeface that I thought would work really well with the UI. This typeface is called ‘IvyEpic’. This typeface was very versatile as it looked great in a range of different formats including extra light and bold. Throughout the design I primarily use all bold, and this was to give the app more of a futuristic feel and I think that it does this very well.
I then created some mid-fi screens to further develop on from my sketches. When doing this I wanted to get all the elements that would on the screen in super stripped back and basic form. Using only monochrome colours, I was able to quickly display what the interface would look like. This was good for functionality checks, to ensure that the UI would work before adding the final design onto it was great to see how the UI was coming along and I think that overall I am very pleased with how it is turning out so far. The UI layout was to stay roughly the same throughout, but some content inside changing depending what the screen was. I done this by keeping a menu on the right hand side (drivers side), except on the media page where there is option to make the full screen be covered by the entertainment. These screens will change and develop as the project continues, but I am liking the direction it is going.
Home
Car Performance
Media
An important part of the visual grammar of this project is the iconography used. I started off by sketching the icons that I would need for the UI. The main ones were the navigation, but there were also other icons that are need for a car UI, so this involved me looking at different car part icons according to what specific part of the car. After sketching some icons and trying to create a few, I realised that there was going to be a lot of icons in the overall UI since there would be a lot in the car performance page as well as the navigation. Because of this I decided to use icons from the Figma community, as this would save me a lot of time since we only had a few weeks to design the UI. I got a lot of the icons from the plugin Iconify, as well as a community file. Considering this, I still had to make sure that the icons were consistent throughout, and I ensured this by making sure that they are all filled, as well as all being white and the same size when appropriate.
Next up was designing the actual UI and what the user would see and how they would interact with the product. Designing the UI was probably the longest step of the process as there was a lot of detail and small things that were quite challenging with this project but needed to be done for the UI to be functional and to look good. I decided to use cards as buttons throughout the UI, and this meant that there was consistency throughout and the user would get feel confident as to what is a button and what isn’t. If they were able to navigate and use one page then they would have no problem with the other pages. To create the cards I used components on Figma, and this meant that I could drag and drop the cards wherever I wanted, and I didn’t have to create a new one each time.