CDK Website Platform

While working for CDK Global, I enjoyed the process of designing large-scale projects from concept to delivery. During my time there I strengthened and enhanced my skills by working on challenging, consumer-facing and internal projects. My team building skills increased as I mentored and onboarded junior designers while continuing to design compelling mockups that would captivate our clients and ensure quality service.

What I Did

  • UI Design
  • UX Design
  • Research
  • Presenting
  • Running usability tests
  • Usability note taking
  • Wireframing
  • Prototyping
  • Storyboarding
  • Whiteboarding

Low fidelity

Whiteboarding two different content outlines for clients that have different business focuses.

Style, Pattern, Level and Content Combo Exploration

What we were building was wildly complex; a product for a client with average internet knowledge to build a responsive, clean looking website. A website building system that is content agnostic, almost endlessly configurable, looks good on a 30" monitor down to the iPhone 4 and everything in between as well as switch between a growing number of themes at the click of a button.

Exploring some ideas for a responsive header solution.
Playing with what different content combos would look like at different nested levels.
Sketching out ideas for what the same content combination would look like at different levels, to show visual hierarchy and differentiation.
I came up with a dynamic and randomized card style that had different angles depending on its level, then the angled corner was randomized on top of that.
My team started to notice a lot of common patterns. I tried to find less common patterns by coming up with my own for differentiation and to stretch the platform.

Wireframing

Exploring what a configurable, responsive header would look like with an unknowable amount of content.
Manually working through the process of content outline translates into a wireframe and from there becomes a website.

High(er) fidelity

Higher fidelity mock up with the color palette I chose.

I came up with the design, style tile, mini mocks, specs, and 5 color palette options. I updated the design based on manager feedback and needs for differentiation. I also paired closely with multiple developers on a tight deadline to fix design problems and code bugs in order to see the theme become a reality before NADA.

Nissan theme

A theme I made specifically for a Nissan presentation. This theme was integral in selling Nissan on our platform and gaining thier business. It shows how we used the idea of "cards" and "levels" to create rules and a design system to create websites that look good, even if there are unknown factors in the content; how many cards, images, buttons, or how long the titles, or copy are.

Skeleton Screens

There was a requirement from the client that we couldn't show the product until a zip code had been entered. I worried that a user wanting to see inventory and either getting a popup, or blank page with just a zip code form was not expected behavior. I knew I had seen Facebook and other websites and apps showing a "wireframe" or placeholder of the content while it loaded. Later, I learned that Luke W. calls them "Skeleton Screens". The client loved this proposal and ultimately we went with it.

See it live here

Images from left to right: the placeholder, the default state, after user input.