Animated Logo

© 2017 James Hellesen - New Media Design

Test Drive

DNN Software Test Drives

Web Development

Project Description

The Test Drives were just an idea before I started at DNN Software. I helped bring them to life through research and prototyping based on feedback from user testing. The Test Drives are currently used as a sales and marketing tool to educate current clients and to help sell DNN's CMS software. The Test Drives also act as prototypes that are used to influence the design and interactions of upcoming features.

My Role

As a Product Engineer, it was my job to take a story from within the product and turn it into a interactive website that could easily be shared and viewed. I researched technology, executed code and edited imagery to bring it all together. Cross platform and cross device testing ensured a consistent experience for all 30+ Drives.

Tools

HTML

CSS

JavaScript/jQuery

Sublime Text

Photoshop

Illustrator

After Effects

Camtasia

Xcode

Launch Website
dnnsoftware.com/test-drives

Case Study

Problem

The sales team needed a quick way to send clients interactive demos of the product. And the development team needed an attractive and consistent website animations.

Solution

A series of interactive websites that are easily shareable and show a useful new feature in action.

Test Drive Planning
Initial Steps
As a team, we started the project on a whiteboard, sketching out our ideas and laying down rough storyboards. The whiteboard allowed us to easily share and discuss ideas with rapid feedback.
Research
After some initial brainstorming with the team, I started research on what kind of website tutorial software is out there. I looked at several different jQuery plugins and settled on Power Tour because for the robust features and documentation. I got myself familiar with the plugin by developing some interactive prototypes.
Research
After some initial brainstorming with the team, I started research on what kind of website tutorial software is out there. I looked at several different jQuery plugins and settled on Power Tour because for the robust features and documentation. I got myself familiar with the plugin by developing some interactive prototypes.
Prototypes
We tested different ways of grabbing the user's attention so they know what to click on and where to go next in the guided product tour. We looked at shaking, pulsing and other various attention grabbers. We weren't satisfied enough, so we kept looking. It was important to explore what worked and didn't work. We eventually settled on a stylized caption box with a arrow that points on what to interactive with next.

With over 30 Test Drives it was important to keep a high level of consistency. Design patterns were established and development standards were put in place to maintain consistency. I worked with another developer to expand on this process to make the Test Drives more efficient to development and maintain.

Keeping development time down to a minimum was essential because we wanted the sales team to have a library of useful features to choose from to demo their clients. One of the ways I increased development efficiency was to create a blank Test Drive template that allowed me to rapidly create new Test Drives from.

Feedback & Execution
User testing gave us valuable feedback on improving the design and interactions of the Test Drives and for the product. Being able to quickly change user interface elements and develop website animations was a critical component to creating the Test Drives.
Testing
Cross platform and device testing ensured a consistent user experience for every user. For users on mobile devices we used a video fall back that users could easily watch without interacting on their phones.
Testing
Cross platform and device testing ensured a consistent user experience for every user. For users on mobile devices we used a video fall back that users could easily watch without interacting on their phones.
Maintenance
With a large number of Test Drives needed, and a short turnaround time, we needed clean code that could quickly be located and modified. Along with hundreds of images and files, maintaining a clean file structure was imperative to efficiency.

Other Projects