Case Study

Configuration Application

CDK Global
Senior UX Designer, Core UI Team
Product Development

Role
Lead designer responsible for the UX and UI on a set of core products, an application used to configure content and build websites, and its CMS.
Problem
When using the configuration application to edit a web page, its structure forced users to drill down into multiple nested levels in order to edit content, and then back their way out. Access to tools was limited and not scalable. Its CMS was disjointed from the application, and users had to flip back and forth between applications, exiting one to access the other. Usability tests that I conducted confirmed the issues, and stakeholder feedback aligned with the test results.
Solution
The configuration team was mid-stride in developing the application and CMS when I built a prototype showing a complete reworking of both the structure and its UI. Access to all content on a page became one click via a content outline. Each piece of content had its own tools tray, easily accessible and scalable. A CMS modal was introduced, allowing for seamless use of both tools. Test results on the prototype validated the approach. Stakeholders were psyched, and I was asked to own the UX/UI of the project and saw it through to launch.



Wireframe mockup of old application structure and UI. This shows an example task flow highlighting the drilling down via multiple clicks paradigm when trying to edit content on a page. Left side of each frame is the preview panel with the actual web page, the right side is the editing panel with nesting of individual "cards" containing the page content.
Whiteboarding session exploring complete rethink of the application structure. This image is me exploring the editing panel, with all content surfaced in an outline for one click access.
For testing I built two interactive prototype's in Axure. One that matched the current direction in a pre-launch development state, and one that represented the proposed solution.
Test sessions were recorded in order to document screen clicks and mouse movements, for capturing audio of the users thinking out loud as they made their way through the task flows, and for capturing video to gauge confusion or delight.
Results of the test were communicated to stakeholders via an executive summary. Findings showed the proposed solution outperformed the existing direction. Buy in was achieved and the product changed course.
New application structure and UI. First screenshot shows the one click paradigm with all content surfaced in a nested outline, and an "options tray" per piece of content that contains all the tools. The preview panel on the left shows the content being configured, and the editor panel on the right is where the configuration takes place. The second screenshot shows the CMS modal, accessible via the options tray, which removed the need to switch back and forth between two applications for simple edits.
Along with leading the UX/UI on the configuration application, I also took on the CMS that was in mid-development and completed a fit and finish overhaul. The first set of screenshots shows the CMS before the fit and finish.
This second set of screenshots shows the CMS after the fit and finish.
Additional responsibilities included solving common use cases and task flows, such as this mockup showing part of the flow for dynamic link creation.
Another section of a task flow showing the process to select theme colors.
These are screenshots showing the panels for editing and configuring, in order: The page outline, the property tab with accordion options, the style tab and its design options, the page selector drop-down, and the site tools panel containing access to global options.
Example sections from the UI Library showing the components and other elements making up the design system for the configuration application.
During build, I paired with dev to oversee the implementation of the design. To assist with offshore team members, I put together a detailed specification guide to communicate design intent of all the major components and elements of the application. This included movies to clearly show the animation and interaction of the UI.
For the different sections of the specifications, detailed redlines were included to ensure design intent was clear.