Project Explanation

At NewGround, I was charged with replacing an existing sales demo with a new a smooth, easy to use demonstration for my current employer's clients. The company's digital signage sales team had been using an old Swish (Flash knockoff) piece that was interactive, but slow and dated.

I decided to make the demo web-based and I'm using the core of my finished product to help showcase my quick, simple and elegant solution to this web-based product in hopes of securing an interview for the Visual Designer opportunity with SitePen.

The project requirements included:

  • Utilize recent client site photos
  • Include text from a particular sales Powerpoint
  • Highlight the team's features and capabilities
  • Showcase the creative team's Flash content development inside of a player of some type
  • Conceptualize, mock, revise and finalize the piece by Friday (five business days)
Final Product

Stage 1: Initial Concept and Wireframe



After consulting with the VP of Retail Sales, I understood the main requirement was to "showcase Flash content development of existing clients for new clients to realize our capabilities in a snapshot." Thus, I used that as the heart of my wireframe. I focused on repurposing a Flash player to cycle through the content pieces and display the sales content around the content pieces as suggested by the sales staff.

Since time is often of the essence, I really enjoy using gomockingbird.com to create quick wireframes. It's free, speedy and you can save and share your wireframes online. I had something basic thrown together within a matter of minutes and then I was off and running in Photoshop.

Stage 2: Photoshop Mock

By the end of the day, I had something pretty clean and simple for the player. Next I had to incorporate the sales content. Executives suggested "NEXT" buttons that would cycle through all of the sales content, but I explained that I felt that would make the user feel trapped and not able to quickly navigate to the start or the end.

Initially, I considered a multi-paged website with a navigation bar, however the site needed to remain simple and I felt that would be too heavy for such little content. I opted to go in the direction of listing content sections in a dropdown bar to the right, above the content items.

I was ready to start building the pages in XHTML and creating my CSS stylesheets.

Initial CSS/XHTML Markup

Once I built one of the pages in XHTML and CSS, I realized that I definitely did not like the meu on the right. It was counter-intuitive and went against some of the tried and true UI rules I seek to put into practice.

That said, I researched some other navigation techniques and found one I wanted to employ: JavaScript toggle tabs.

These would allow users to quickly access the small sections of information, keep the Flash content within one section, highlight client site photos and sales content all while staying on one page. I liked it and presented the idea to my boss. It was approved with a few content tweaks, which then lead me to my final design...

Final Product

Once I hand-coded the entire site using the JavaScript toggle tabs and tested for cross-browser compatiability, I was much happier with the design. The final version was approved and you can see a few screen captures of the finished product below.