When an Automotive Software Company recently merged with a Dealership Company, they came to improving to build a software solution that gives car dealers an all-in-on platform to manage their dealerships. They envisioned a product that would take both aspects from the nearly merged companies' products and have a seamless enterprise dashboard that is intuitive, simple, and clean. The problem is creating a solution with that much information could overwhelming if not designed properly. The original team for the project was myself and our Principle Designer, Brian Kinnett (due to the success of the project, we would later add two of my design colleagues to work on marketing and a branch-off product, as well as two full-stack developers). Originally, Brian primarily worked on the Product Management side while also doing the logo designs, while I worked on the wireframes and interface. Being the UX/UI Designer on this project, I had to imagine a design that would allow for a large amount of tasks to be done without taking us every inch of viewable space on the screen.
When discussing the visual hierarchy, we found that the appointments, the leads, and the general overview of tasks that needed to be adhered to were the elements that users would need to see right away. While those were our top priority list items, users would also:
I began with the thought of creating a card system, showing the general overview of four of the sections as well as stats regarding it. To keep track of appointments, users would be given a calendar that shows them what appointments they had for the day, by the hour. Because the dashboard would have so many things listed, my initial thought was to have subtle colors: bright enough to notice any changes/alerts, but it couldn't be obtrusive in the amount shown. This gave me the idea of having subtle colorful lines at the top of each card so users would know what items needed their attention. For the information that wasn't immediately important, we added them to accordions so that users wouldn't have to see all information at once but instead see notifications near the title of the accordions if something needed attention.
The selling point of the design is the cards that are at the top of the page. The highlighted colors at the top of the card were made a lot slimmer than portrayed in the wireframes to avoid being obtrusive. A lot of the site is using white and dark blue, while the highlighted notifications, such are in vibrant colors.
To avoid over crowding the pages with too much information at once, thus overwhelming the user, we decided to add accordions that can be opened to see the full information about the particular topic. Using accordions gives user "breathing room" and permits them decide what they would like to see first, based on the notifications on each accordion title.
Some of the requirements was that the user is able to do a global search for a car based on their VIN, be able to navigate to other products, and see notifications. They would also need to be able to change dealerships that they are viewing and general design functions like the ability to log out. Through the navigation bar, users are able to do all of those things while not being overpowered by the functionality. We drew inspirations from Google's Play Music and how they added differentiation to each navigation item based on the animation and location. View the navigation functionality on the prototype.
The project was well received and thanks to the hard work of the entire team, The Automotive Software company is one of most trusted clients. We've gone on to produce more designs and development work for them. In the rendition of this design, they decided to go with a lighter palette, with the top navigation being white. They have also added a couple of new features.
