Penn Green Collision- UI Design
A website UI Design for Penn green car dealership and servicing.
Brief
This work was for a client that came to me for creating their website UI, The business mainly focused on selling new and used cars, while they also had a added feature that was basically car services and repairing. After talking to the client, I realised that they did not wanted to continue with their car servicing feature and wanted to exclusively focus on dealership as whole. I focused myself on this part and understood the process of how they get buyers and what is their main goal by having a website, After discussion their main goal was to generate buyers from their website and get them to contact them. They already had a basic working website which was just to “show that they exist online” — said the client so they were very flexible with changing the colours and recreating their logo.
Envision
Understanding the project is the most important aspect of creating a great UI design, The website needed to have a UI which would not only look modern and sleek , but also generate buyers orders and influence them about the trustworthy-ness of the company. Once I had received this project , I needed to find out how their current website looks and what all contents they want to be displayed on their website and what is their USP, learning and understanding about their business gave me a clear vision of what is exactly that they are trying to achieve as a company through this website. I also researched some other websites which were doing similar business (won’t call it competitor analysis because my main focus was to understand what is the key elements and affordances these times of businesses like to have on their website).
Project Needs
Once I had the information about how the project, some by asking client questions like “How do you think your relationship with the buyer is after they purchase the car” or “Did any of your buyer or how many of them contacted you after visiting your current website” The answers I got helped me in creating a brand image of the business and empathise with the buyer who visit the website or purchase a car from them. Now I had to list down what the project will actually require, this could include maybe deciding on a colour scheme, collecting icons, splash images and more.
- I started with getting some inspiration from, as mentioned earlier, other similar business websites. I also glanced through behance and some major car companies websites (namely mclaren , alfa romeo)
- For the colour scheme , I wanted to keep it very professional and minimal so using a lot of colours was not a good option. I went ahead with a two tone dark colour palette with an accent colour which was majorly used in the buttons and clickable elements on the website.
- Iconography was another major component for the project, but because I had not started with the website design yet, I did not decide on what icons I will be using. But I knew icons will play a major role for adding more character to the website.
- I created a mood-board for the website to basically display what I was feeling about the brand after the envision phase. This did not just include the websites that I was taking inspiration from but also some images that I thought sparks a connection with the feel or the brand image I was going for. This also included some unsplash images that I thought might be used in the website.
Designing the website
Following design principles
I initially made sure that the current website was following the UX design guidelines and basic rules that are followed in the community and are correct way of designing a website, as this was not just a UI Redesign project but a new website building one, I made sure to correct the errors I saw in the current website but also know that I might be implementing it differently altogether in the website I design, for an example, I saw that the contact us option was basically placed with the navigation bar (header section) options and the call for rental option made the navigation bar broader that required, this was bad from both UX and UI perspective as users are not very habitual of seeing the contact us option there, and also visually a broader header section does not look very pleasing to the user.
Designing the website as per my vision
I started with the design (after the wireframing process), I still had a major issue with the brand identity, that was the logo. Basically after seeing the logo I felt that it was poorly designed. the colours were not that great and the logo was not professional looking at all, so taking advantage of the flexibility I had, I went ahead and redesigned the logo completely to a minimal text only design which is clear on website thus making it easily readable. I had already thought of the colour scheme and it was also different from their current website colour scheme. The new website majorly included these sections, some of these given to me by client and others I thought of adding because I thought it increased the trustworthiness of the website.
- A Hero section
- A Vehicle section
- Compare vehicle
- About us
- Our services (My suggestion)
- Testimonials (My suggestion)
- Requests
- footer section
My approach was to start with making a great hero section and follow along with focusing on a particular section at a time. I understood that in this business, gaining trust of the user and showing them that we are trustworthy and a set of professionals who will help you in what you want to get and provide you with a great service.
The new logo
Final touches to the design
After designing each section at a time and focusing on it, I wanted to see how the website looks as a whole, after talking to some of my friends who are into designing and generally showing my design to people, I understood that there were certain parts where I had a lot on the screen, mostly bombarding users with lot of text is not a good idea. Minimizing that, Making some colour adjustments on the hero section search part where the drop down text was not very clear. These kind of changes made the whole website feel good as whole. This is how the final result looked.
Desktop
Mobile
Conclusion
The client was very satisfied with the work and the new logo. I tried to keep it simple and only had one goal in mind, to design a good looking UI which will build trust in the user and therefore make the user contact the business to generate sales. Keeping business goals in mind is key as a great UI which in the end does not do what the end goal of the business is, then it is redundant.
I hope you enjoyed reading this! Cheers.
