D2admin is a modular Content Management System created primarily for Driving Force’s dealership clients. The interface consists of two primary sections: the sidebar and the stager. The stager features 6 different module-specific color schemes, intended as visual cues to help users associate common elements with each other even when those elements are encountered elsewhere on the website, outside of the CMS modules (e.g., in the support ticket manager).
Featured here are wireframes for one module, the Page Builder, then detailed mockups for the Page Builder, the Lots and Vehicles Editor, the Staff and Locations Editor, and Stealth Shopper, Driving Force’s digital mystery shopping application. The detailed mockups also show the site chrome, including the flyout widgets, which would eventually include an open support ticket list, a messages inbox, the user’s current time log, and other useful information.
Page Builder: Wireframes
The following wireframes depict the evolutionary path of the Page Builder, from its first conception as a 4-panel layout, to the sidebar/stager oriented UI with a faithful representation of the page layout, to the final iteration where the page is represented by a box model that shares some aspects of the layout, but allows for more complexity for editing/scheduling modules, widgets, and resources.
First Page Builder wireframe
The Page Builder was initially conceived as a 4-panel layout in which all 3 page elements--layouts, modules, and widgets--could be dragged and dropped from 3 panels surrounding the stager, which was a visual representation of the live page.
Pagebuilder wireframe, 1st revision
The 1st revision of the Page Builder added page search functionality, the first appearance of a pages list panel, and the first look at what would eventually become the modular color scheme.
Page Builder wireframe, 2nd revision
After some preliminary user research, the dev team determined that a sidebar/stager paradigm would work best for the d2admin interface, and so the Page Builder was redesigned to fit that model. The elements panels were now hidden behind tabs, which could be revealed in the sidebar, and the stager began to resemble an actual page layout.
In the 3rd revision, the Page layout overview was added, and the stager details began to emerge. The green line indicated an area where a new layout could be dragged and dropped into the page.
Page Builder wireframe, 4th revision
In this final revision of the Page Builder wireframe, the stager's box model approach replaces the visual representation of the page, and the sidebar's panels begin to take shape.
Page Builder: Detailed Mockups
Here are the final four views of the Page Builder: 1) the Page Overview, a list of all elements on the page, represented as a hierarchical list, 2) the layouts view, which allows users to add and nest layouts based draggable/droppable presets, 3) the widgets view, which allows users to drag and drop empty widget types into existing layouts, and 4) the resources view, which allows users to drag and drop resources (like buttons, links, and images) into empty widgets.
Page Builder, overview
The Overview is the default panel that displays in the sidebar at run time. Here, the layouts appear as a directory tree, in which the UI elements can be expanded down to the definition level. Additional scheduling and dependency linking functionality has been added, as well as an edit menu for each element in the list.
Page Builder, layouts
The layouts tab allows users to drag and drop empty layouts into the page stager, and also contains a filterable, sortable list of all predefined layouts (slideshow, button list, employee contact card, etc.), which can also be dragged onto the stager.
Page Builder, widgets
The widgets panel allows users to search for all widgets and widget templates that can be added to a layout in the stager. Users can also schedule widgets to update, and can see their dependencies (i.e., other pages on the site where the widget might be deployed).
Page Builder, resources
Resources are the individual elements contained by a widget. For instance, a button list widget could include as resources one or two images that represent the button's default and hover states, a URL link, and JavaScript to add additional functionality to the button.
Lots & Vehicles Editor
Here are 3 views of the Lots and Vehicles Editor: 1) the Lots Dashboard, which gives users an overview of vehicle inventories on every lot owned by a dealership or dealer group, 2) the Vehicle Editor, which gives users useful info about a specific vehicle, including which prices are displayed and from which inventory feed data about the car is being pulled, and 3) the Price Rule Editor, which allows users to set conditions under which a certain vehicle will display a specific price on the website.
Lots and Vehicles Editor, Dashboard
Here, the sidebar defaults to the lots overview, where every lot belonging to a dealership or dealer group is displayed as a list. Users can add a new lot, view or edit specific lots, and search for specific vehicles or types of vehicles within a given lot or all lots. The stager displays an overview of the vehicle inventories and pricing info for all lots, or the selected lot(s).
Lots and Vehicles Editor, vehicle snapshot
The vehicle snapshot displays all the info about a specific vehicle chosen by the user. This includes information displayed on the website, such as photos, price, and details, but also includes info only visible to dealers, such as when the car was first delivered to the dealership and how long it's been on the lot.
Lots and Vehicles Editor, pricing rule
In this section of the stager, an individual pricing rule can be set and applied to all vehicles that match the rule conditions. This includes selecting the inventory feed to which the pricing rule applies, when the price is turned on and off, and any custom text that needs to accompany the displayed price.
Staff & Locations Editor
The Staff and Locations editor is designed for dealers and dealer groups to manage their staff and location info, including how this info is displayed on their website(s) at the individual, department, and rooftop levels.
The relationships editor allows users to view a single employee, and all of their associations, including their department and job title(s), contact info, profile photos, and internal notes about the employee for use by management or Driving Force users.
Staff and Locations Editor, staff cards
This section allows users to create and edit the manner in which employee info is displayed on a given website. These displays are called cards. An employee who works in multiple departments, or who floats between multiple dealerships, may require a different card for each department on dealership.
Staff and Locations Editor, images
In the image editor, users can upload and crop department or store images, and then assign these images to the various pages where they need to appear.
Staff and Locations Editor, locations
Users can update location information in the grid for each lot owned by the dealership or dealer group.
Stealth Shopper
Here are four views of the role-restricted version of the Stealth Shopper Digital Mystery Shopping application. The application tracks communications from a dealer’s sales team, which are then evaluated and assigned grades based on dealer specifications. The resulting grade data is then presented within a variety of charts and graphs that allow managers and executives to compare the performance of their salespeople against each other, and against their competitors’ sales teams. For a more detailed look at this application, download the PowerPoint presentation.
Stealth Shopper, dealer shop
A typical dealer shop report view. The report includes vital details about the shop, an email reader, voicemail and text captures, a timeline that lets sales managers visualize how frequently a given salesperson reached out to our mystery shopper, overall grades and grade breakdowns, and screenshots of the original form submission and confirmation.
Stealth Shopper, district dashboard
A dashboard view for distict managers, who have to compare sales team performance across multiple dealerships. Includes a per-metric, multi-shop grades breakdown, and the ability for users to filter these grades by dealership.
Stealth Shopper, district shop report
A shop report at the distict manager level. The manager can evaluate the performance of individual salespeople and of a dealership's sales team, and also compare grades for multiple dealerships at once.
Stealth Shopper, regional dashboard
The Stealth Shopper dashboard for regional managers, which allows them to compare the sales performance of multiple districts.
Extras
Below are a few examples of the various UI elements that I designed, to illustrate the detail that went into building the UI mockups above. If you want an exhaustive look at all d2admin’s UI elements and design specifications, check out the d2admin design specs PDF.
d2admin: Mega-Menu
A mega-menu mockup that gives users an overview of open support tickets, important links, and info about the dealership.
d2admin: Grids
d2admin requires 2 types of grids: one for displaying unlimited and nested data, and other for displaying limited data without nesting. The nested grid rows can be resorted by dragging and dropping, or through the sorter. The limited data grid also has limited functionality and is intended to display "big picture" data that doesn't require sorting or filtering.
d2admin: dropdown menu specs
Design specifications and functionality for one of the dropdown menus in d2admin.
