Inside Interspire: How We Prototype New Design Ideas

Hi everyone. Today I want to share with you some details on how we design features and user interfaces for our products, specifically Interspire Shopping Cart. I'm going to show you how we designed the new product image features we're currently working on. They were based on your feedback from the Ideas Lab and forum so I think you'll be quite impressed...

Mocking Up With Mockup

We design all of our prototypes using both the desktop (Adobe Air) and web-based versions of Balsamiq Mockup - an excellent freemium user interface design tool we've been using for quite a while now. It includes a series of pre-draw UI components which you can drag onto a canvas and customize as required. You can then export the mockup to an XML file for later or a PNG file to print/further edit in Photoshop.

Prototyping New Image Features

We've just finished the UI prototype for images in Interspire Shopping Cart which will give store owners the ability to:

• Upload an unlimited number of images
• Use different images on the home/category/search page and product page
• Set alt text for each image
• Re-order images using drag & drop
• Zoom images to see a larger version
• Choose images from their computer, web or server
• Show a larger version of an image on the product's page

The entire UI prototype was created in Balsamiq Mockup over the series of a few days and a few meetings between our various in-house teams (product managers and developers) using feedback from hundreds of customers we've spoken to about the way they want to use images in their online stores.

First up we've designed a new settings tab for images, which you can see below:

Then we designed the new "Images & Videos" tab when adding/editing products:


Here you can see there are three ways to add an image to a product:

1. Upload an image
2. Use an image from the web
3. Choose an image from the server

When you click the "Upload an Image" option you will be able to upload multiple images from your computer in one go because we make use of a flash-based image uploader.

When you click the "Use Image from Web" option you can upload up to five separate images like so:



When you click the "Choose from Gallery" option you can browse the folders on your server to choose one or more images, like so:


When you've uploaded your images you can then set their description (alt text) and choose which images will be shown both throughout the store and on the product page:



Conclusion

Of course Balsamiq Mockup just gives us the rough UI prototypes - we take these and apply our own design principles and styles to keep the UI consistent with the rest of the application, but it's a great way to create UI's quickly using nothing more than your web browser.

I'll post more information about the new features we're working on (including a neat way to find and add YouTube videos to your product pages, accepting payments online in real time when adding a phone order, storewide and per product/web page/category Google Website Optimizer tests, sales tax reporting, two way QuickBooks sync and dozens of new store designs + fixes) in the next few weeks, but for now the entire team is hard at work putting everything they have into the upcoming release which we hope you'll love.

Talk soon.