Car web app dashboard

HGregoire User Dashboard UI & UX Design

Description.

Canada’s leading auto retailer, HGregoire, trusted me in creating a modern user interface and dashboard for their business. This project included comprehensive product design, UI, and UX.

The user interface had to be user-friendly, and designs needed to be created for desktop, mobile, and tablet.

Client:
HGregoire
Services:
UI Design, UX Design
Project Link:
In Development
Car UI

the problem

HGregoire is a leading auto retailer with a high number of locations throughout Canada. For most auto retailers, selling is very manual and visits often lead to lots of paperwork. HGregoire, however, wanted to create a new experience.

The HGregoire team approached me with an incredible vision: To offer their customers the ability to begin the buying process online.

Prospective customers could also easily schedule appointments online.

This app would be used on web, mobile, and tablet, at people’s homes and on-the-go.

In addition, it was important that when customers started the process online, sales reps in-store could quickly and easily pull up their information (saving time and money).

Car UI UX Design

The Process & Solution

I was excited to be a part of bringing technology to the auto industry that would make customers’ lives easier. It would save time for both customers and staff (a win-win), and would help prospective customers more easily communicate with the company and schedule appointments.

To begin, I started by getting to know the company and how they work. This involved learning about the pain points of their prospective users, and what problems I would need to be sure to focus on and solve.

Together, we defined the project scope and made sure that separate designs would be delivered for desktop, mobile, and tablet.

After that, I started with the initial design direction. This involved coming up with a foundation and overall direction and structure. The first version was low fidelity, and meant to be a starting point for further discussion. I believe that design is an iterative process, and in checking in early and often.

Once we discussed the initial concept and made a few revisions to reflect the company’s branding guidelines, we set out to create the other screens in high fidelity within Figma, a new, developer-friendly design tool. Once the high fidelity desktop version was created, Marina, a design contractor I often collaborate with, designed the foundation for the mobile and tablet screens.

After collaborating on the screens and once the client was satisfied, we prepared a developer hand-off in Figma, making it easy for the client’s development team to view the specs and assets.

Rough draft (idea phase) wireframe:

rough version

Final:

final mockup

Final result on desktop, mobile, and tablet:

final designs