Park place dealerships

At CDK Global, Park Place was one of our larger dealer-group clients and we created brand guidelines, personalized advertising, and web design for them. In this project, I took their existing website, which I helped re-architect about a year prior, and shifted it into modular elements that would work on our new, modular and responsive, website building platform.

Because of the complexity of the design, after we achieved client sign-off on our design strategy, we developed the website as a cross-team initiative between implementation, design, front-end interface developers, and product using weekly Jira sprints. 

parkplace-desktop-mobile.jpg

Initial analysis

To start to see patterns, we printed out critical pages of their current website and broke them into motifs and interactions that we could then translate into the functionality of the new platform. We then translated those patterns into motifs and brand styles that we put in matrices to communicate with the client and the developers. 

Featured
Park Place Homepage
Park Place Homepage

An example of what the Park Place homepage used to look like and some of the motifs we had to re-create. 

Initial Analysis
Initial Analysis

In order to begin the process of breaking the existing website into modular pieces, we printed out the major templated pages and started to pull design elements into buckets of branding and motifs. Brand elements were things like type hierarchy, button treatment, colors etc. and motifs were things like parallax scrolling etc.

 

MATRICES FOR BRAND AND DESIGN ELEMENTS

The following are the results of iterative analysis, collaboration with user interface developers and back-and-forth with the client. Brand elements sit at a universal level on the platform, while design elements are 'motifs' which we can toggle on and off as needed. 

Brand and Motif / Interaction Matrices

Brand and Motif / Interaction Matrices

 

Responsive Design Details 

Because these designs had to be coded for multiple screen widths, we did many explorations and created documentation to communicate with developers and the client how the design would work in a responsive environment.

Featured
Motifs in Multiple Screen Sizes
Motifs in Multiple Screen Sizes

Some of the motifs had complex interactions between background images, images, header treatments and copy text. I wanted to help explain how they should function at multiple screen sizes so I created detailed examples for developers. 

Mobile Button Exploration
Mobile Button Exploration

We had an interesting problem where there was a unique hover effect that signified 'click' in a desktop layout that needed to be translated into a 'clickable' interaction on mobile (where there is no hover). Here is a way I was working to explore possible layouts of content and buttons in a mobile setting.