CDK Global Mega Navigation Studio
Project at a Glance
Prior to CDK Global’s sale of its digital company to Anisira Partners, being renamed Sincro, I was tasked with redesigning the UI and user flow so that customers could create and customize a mega navigation menu for thousands of car dealership websites. This feature lives within Website Manager, a suite of tools that allows customers to design and maintain their own sites, similar to the functionality of Squarespace or Wix or WordPress. It was a fascinating project as it was meta-design— designing tools folks would use to design, similar to what it must feel like being a UX designer for Adobe XD or Figma or Framer. The project has been incredibly successful and mega nav is now employed by most car dealerships using our SaaS platform. After completing this assignment, I was promoted to Senior UX Designer IV.
Project Summary
After languishing interminably for more than three years, I became the fourth consecutive designer assigned to this project. This feature had long been identified as a competitive gap for the websites we offered our customers because it only allowed our dealers to show basic drop-downs of text links from their global navigation. They were unable to add rich content like photos, videos, separate columns of links, and showcases of available vehicles. Some of the delay in creating this feature was due to intense technical and engineering constraints with our ever-changing Editor platform, and some of the delay was due to deeply conflicting opinions among our Product leadership as to the best way to tackle the problem. Regardless, after research, analysis, and ideation phases, I created more than 1,000 lo-def and high resolution mocks in several iterations to bring our Product and Development and Engineering teams into alignment in order to deliver what has been one of our companies clearest product wins of the past year.
Process
The first step was to confirm to myself and to the rest of the team the value of this feature. Though we had received a steady stream of requests from dealers for years, the automotive industry is (somewhat surprisingly) a bit of a backwater when it comes to tech and website functionality and online literacy. To some degree, the culture of dealerships is still rooted in a 1960’s and 70’s mindset about the best ways to sell cars to modern consumers, creating a general mistrust within CDK as to whether our users actually know what they need and what improvements would be helpful in their websites. I turned to resources like Nielsen Norman research studies, numerous UX industry publications, and my own network of UX designers and researchers in Seattle, to clearly show that this feature would indeed significantly improve discoverability for consumers, especially with a somewhat wide and shallow information architecture structure employed by a vast majority of our customers.
Secondly, I ran extensive content audits of the past three years of design assets, all of which were extremely outdated but helped me better understand the hard pivots in thinking among leadership. Much of the previous user research (there wasn’t much) was still valuable as we could gain insight into usage and flow among users as they navigated through our Website Editor. Lastly, I performed two short projects that informed the user flow overall. The first was to perform an audit of the overall IA of our Website Manager Suite to better understand where this new feature should live. The other was that we had no guidelines or design system guidance when it came to site responsiveness, typically relying on individual developers to “make their best guess,” even though we knew that car shoppers were viewing these sites on phones and tablets well over 50% of the time. I developed a system by which to talk to my development team about the very difficult issue of resolution responsiveness.
An excerpt of the full Information Architecture audit performed on the entire Website Manager Suite.
Without any guidance on responsiveness and stack-ability, I had to invent a system of dialogue between Devs and Design.
I illustrated the tile system on an old design and created it again for all breakpoints between mobile, tablet, and the highest screen resolutions.
After much of the needed groundwork was laid for proceeding, the next steps of the process included user journeys and flows, hand-sketching, iterative mocks and prototypes, and user acceptance testing.
Hand Sketching
An often underrated and forgotten tool within the UX arsenal is sketching by hand. It’s so quick and cheap and the tactility of the process actually increases critical thinking. It’s a dirty activity and that’s one of its great values. Here, you can see some of my very early design thinking, much of which went on to be directly employed in the final product. But you can also see how savage and brutal I am when it comes to self-critiquing my own assumptions and propositions. Any mistakes or suboptimal design that can be identified at this early stage can save immense quantities of work and strife, especially for Developers, later on in the product development cycle. This series of rough sketches was actually 70+ screens long — not ultimately necessary for developers but important for exploring every nook and cranny of the functional flow.
Iterative Mocks and Prototypes
Over the course of five months, the higher definition mocks continued to develop and gain refinement, both aesthetically and functionally. This required numerous presentations of new mocks every week to Product Managers on two teams as well as both Developers and Engineers from two very different groups, one managing the forward-facing functionality and one managing the backend configuration tools. These two teams, basically two sides of the same coin, were often not in sync. But one of the most amazing things about a visual prototype is that, unlike a written list of specs, immediately catalyzes and crystalizes conversations about the problems and opportunities that the teams will face while coding it. Often, it’s hard to think about a problem set until you can see it.
Early mocks were, per leadership, shown as a happening within a modal. There were concerns about how to save and store works in progress.
Here, an example of adding and configuring a new column of links within a Mega Navigation.
Once the concept of a modal was abandoned, editing could happen in-line on the actual canvass. Aspect ratio changes when the editing panel is open, pushing the canvass to a smaller size. This is a problem that has been wrestled with by all website editors, with pros and cons to each solution.
Here you can see the feature as it gets closer and closer. One idea, which was not adopted, was to have a transparent blur overlay over the content that was not being affected by editing. It was important to all of us to show the navigation edits in the context of the rest of the user’s website.
Here you can see a screenshot of the finished Mega Navigation Studio in action. This was finished after our company had been acquired by Ansira Partners and became Sincro. It should also be mentioned that the fit and finish here of brand colors and various visuals of placeholders was created by our designer Whitney Larene, one of the most naturally gifted designers I’ve ever worked with, after I was promoted and moved to another product vertical. Still, you can see that the functionality and flow of the tool is, in many ways, almost identical to early hand sketches.
Challenges
In certain respects, this was one of the most frustrating projects of my career. To some degree, this was due to the extreme engineering complexity of integrating two very different systems. But this also meant that the functional specs and technical constraints of the project as communicated by Product were in perpetual flux. A good example of this is how, after presenting research and strong, evidence-based reasoning for not having all of the functionality reside within a pop-up modal, my position was outvoted by leadership and stakeholders. There was solid engineering arguments as to why that might be the best path and, after presenting my best arguments, partly due to the fact that users would have no visual context within their overall site by which to make decisions, I accepted the reasoning and decision of the overall product team. I reworked the entirety of my mocks. But months many later, that decision was reversed, and the spec was changed to require an in-line solution. While this was ultimately the best decision, it required redrawing between two and three hundred screens.
What I learned from this was two things. Design has to have a very strong sense of authority and respect within a product team, both inherent and earned, at the forefront of projects in order to save the development process from significant duplication of work, re-coding by developers, and going deeply down a path that proved incorrect. I didn’t do my job because I was too deferential and because I didn’t have the proper support within the company for my discipline. Secondly, I learned that I needed to have very clear project requirements, signed off by all stakeholders. This would have allowed me to say that, yes, we can reverse course on what had been agreed upon but it will cost us two extra months of development. Luckily, it’s a lesson that I will only have to learn once.
Regardless of the challenges, all Product Managers and Leaders and Engineers and Developers deserve so much credit for getting this project across the finish line through sheer grit and force of will.
Product Launch
What we are now able to offer our dealership customers both entirely closes a comparative gap with our competitors and creates significant, positive differentiation with the rest of the market. There are just things that our navigation studio can do things that the rest of our competitors cannot. It took years for this feature to break through the ice but we did it! It worked! The SUS scores and acceptance testing were off the charts and this was a major leap forward for our company in terms of functionality and intuitive ease of use for our customers.