We currently live at a time that is observing a shift from companies primarily using print-based marketing towards establishing their brand and promoting on a digital space. Diamond Kote approached us to do just that. While their products came with print materials such as tear sheets, and flyers incentivising dealers to sell their products, having an online presence puts the ability to learn about the products in the consumer’s hands. To achieve this, a revamp of their website was in order.
We currently live at a time that is observing a shift from companies primarily using print-based marketing towards establishing their brand and promoting on a digital space. Diamond Kote approached Underdog Studio Ltd. to do just that. While their products came with print materials such as tear sheets, and flyers incentivising dealers to sell their products, having an online presence puts the ability to learn about the products in the consumer’s hands. To achieve this, a revamp of their website was in order.
From the get-go we create a timeline and targeted milestones so that the project can be completed efficiently and methodically. Working closely with the project manager on the client side meant that we kept the communication between us wide open. We interviewed vendors, consulted each other on design decisions, and tested the website together.
While building the project timeline and milestones for this project I had to consider not only my ability to complete the project as a designer, but I had to look at how my component affects the rest of the team’s schedules. We decided to use the Waterfall methodology with the intent of transitioning to Scrum after launch for new features the client wants to add. The client and I interviewed vendors for the core features we wanted to implement such as Yotpo and Bazaarvoice for the Reviews Section, and Zuvoo for the Warranty Advisor. We had established weekly meetings to present the latest updates to the site. From the agency side we would provide progress on the website, and on the client side they would provide us with any internal updates, additions, or revisions they wanted to see.
I wasn’t too familiar with the auto industry, so I did some preliminary research on how the insurance process works, how competitors structure their own websites, and what useful UX patterns can be utilized for Diamond Kote’s website. Keeping the client in mind, I then looked at sites that had the features the client had requested and listed what I can incorporate into this project.
The project manager on the client side provided me with the demographic research and compiled Personas to help guide the designs. These were useful when it came down to decisions that affect the four main user flows: finding a dealer, read the reviews, matching with a product on the Warranty Advisor, and viewing product information. The competitor research allowed us to see what worked for our competitors and gave us examples of what UX patterns users in the industry were already familiar with.
One of the client’s ask was to refresh their site to be more human both with the copy, design, and information architecture. Keeping that in mind, I proposed user flows that allowed them to learn about the products, then direct them towards a dealership for further information. This would creat door swings for the closest dealer with customers who are familiar with the products.
The main goal of the website was to direct a potential customer to the closest dealer that offered Diamond Kote warranties. Whether they’re browsing and just learning about the warranties, or viewing the reviews from past customers we wanted the pages that would get the most traffic to always have a way to access the dealer finder. This maximizes the use of the tool and follow through to contacting a dealer. We also wanted the users to be able to find the products that correctly suited their needs - we had arranged a set of questions to better understand the user’s needs and at the end presented them with tailored options. A quick blurb of the product’s information isn’t enough to fully educate the user, so each of the options directly linked to their product pages, which in turn brings them to the dealer locator if they wish to learn more.
We started out with three preliminary designs, then whittled and revised one concept down to the beginnings of the final iteration. Along with the interface, I, in conjunction with Underdog Studio Ltd. also directed the editing style of the imagery so they could be consistent, created iconography, and built prototypes for testing purposes.
Once a direction was chosen we refined the style and started creating a design document to refer back to when creating components for the site. This later became useful for the developers as it gave them an idea of what different UI elements (such as secondary nav style, font styles, background styles, etc) should look like. This would also prove useful in the future if new features were to be added to the site. The client had liked the idea of flat design, so using the Diamond Kote logo, I deconstructed the panels and used them throughout the website as background motifs. While the client had a typeface in mind, I worked with the Poppins family to keep the typography consistent throughout the site. As pages started to come to life, I wanted to test certain parts of the website that I thought would be trouble areas.
As we were building the mock ups, I started jotting down points where I thought users may get confused. This started the testing document, we used to facilitate each testing sessions. Each session gave us insight into how users interact with parts of the site we were unsure of. We used Maze.design to present and track the behaviours and interactions for these prototypes.
The first session involved achieving these three tasks: Navigating the mobile menu, connect with a specific dealer through the dealer finder, get results from the Product Finder. Some of what we found were expected: the label Product Finder was confusing, the filtering system in the Dealer Locator was separated which caused a bit of friction when asking to find a specific dealer, the progress bar in Product Finder looked more like a slider, so people tried to slide away to the next question. We then set out to solve these problems by renaming Product Finder into Warranty Advisor, combined the filtering system with the search bar in Dealer Locator, and changed the visual style of the progress bar in Product Finder.
Other smaller details that were noted in testing were remedied and pushed through to the next iteration, and testing phase. We conducted two other testing phases that highlighted less critical pain points the last having very minor notes.
There wasn’t a specific hand-off moment, where we packaged the assets, and set design guidelines. The developer and I worked closely and simultaneously to make adjustments to better the structure as well as the site as a whole.
The advantage of having an in-house developer was that we could simultaneously work together and ask each other questions about the designs and the coded structure of the website. While we started creating the design guidelines, our developer had access to it and started building sections of the website. There were points in time where more developers became involved in the process which made organization of the project the highest priority.
I’ve learned a lot from this project both on a personal level as well as on a professional level. Much like the Digital Asset Management System, constant communication with the client was one of the things I kept in mind. Our status meetings were always full of updates, revisions, discussions about certain user flows, and setting task lists. Being the main project manager of the project needed me to keep tabs on the developers, copy writers, designers, and consultants for this project - a task I thoroughly enjoyed, but required to be incredibly organized and methodical.
Personally my takeaways from this project in terms of project management was to always be organized regardless of how many people you have to manage. Being a project manager means knowing who to communicate to when a problem arises, and solve them together and efficiently. Being a project manager also means you’ve got to have an understanding of the different components of the project: UX/UI design, development, copy writing, logistics, etc.
From a UX designer’s point of view, I was reminded of how important it was to always test the product. Any data generated from a user test is valuable in terms of seeing it perform in a semi-objective situation. I was also reminded of the logistical limitations of web when creating the style of the site - I had to keep page load of the site as quick as possible for maximum performance. Throughout the project certain parts of the Information architecture kept changing as well so I, as well as the developer had to be able to roll with these changes accordingly.
Altogether I think the project was a success, but it wasn’t without it’s set of difficulties but I’ve definitely learned a great deal.
If you like what you see and want to work together, get in touch!
ang.consta@gmail.com