Project Info

Client: HGregoire

Services: UX Design, UI Design

Status: In Development

HGregoire User Dashboard Design

LAST UPDATED: JUNE 04, 2019

client stores

About

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.


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 web 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).


Requirements:
  • Modern, mobile-friendly web app
  • User-friendly, with special focus on the user experience
  • Must meet brand guidelines and color standards
  • Simple and free of clutter

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. Design is an iterative process, and in checking in early and often is a big part of that.

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.


Iterations

The first draft was a rough starting point, before implementing the brand guidelines. It was important to me to show the client how the pages would be best structured, and to get their feedback early.

The client was looking for more of a bold effect to reflect their brand, so in a later version, I introduced drop-shadows and bolder text.

After discussing these points, they gave approval for the general format and structure going forward.


1st Draft

SaaS UI UX design
🔍 View full size



Final Draft

SaaS UI UX design
🔍 View full size