Archive for June, 2008

Extreme Makeover: Online Website Editor Edition

June 24, 2008

“So,” I hear you say, “about those posts by Brian on user testing: does that stuff really work?”  Well, yeah!  Here’s Sam to tell you about how we use it ourselves, and what surprising things you can find out with it – Rochelle.

SiteBuilder Lite is the award-winning software that helps people easily create beautiful websites and connect with their customers, friends and loved ones in ways that they never could before. Homestead members have used SiteBuilder Lite to create websites for charitable organizations, non-profits and family photo albums. We’re proud of the way this little tool has touched so many lives.  We’ve put a lot of effort into it, and we were pretty proud of how it worked.

And then we tested it.  And here’s what we found.

We know you’re looking for clearly labeled buttons that are easy to understand, and that you want to add and delete entire text blocks without hunting all over the screen for the right button before giving up and calling customer support.

We know you want to add personal images – the elements that bring websites to life – to your websites and place them anywhere you like, so that your message, your vision, can be broadcast to the world.

What else do we know?

We know that you didn’t find those things.  At least, not in the way you wanted them.  That’s why we test our tools with real people like you, so we can find out it if we’re building things you really want.

SiteBuilder Lite could do some of those things before…but, the question was, could we make them better?  It turns out that yeah, we could, and now we have!

First of all, we improved the look of the element buttons to make their function clearer:

Before:

Before

After:

SBL New Buttons

Next, we made it easier to see how to delete a text element by adding a little button that says, well, delete:

Before:
SBL Old Text

After:

And we’ve given image handling the same sort of treatment.  We added replace and delete buttons right on the border of your image elements.  You can also drag and drop images easier now.  To move an image, just “grab” the image anywhere you like – you’re no longer limited to the top border:

Before:

SBL Old Image

After:

SBL New Image

In addition to these changes, we’ve improved the “import image” window in SiteBuilder Lite so that it is more straightforward to import an image from your computer and preview it before adding it to your website.

Hope you like the new changes!  We’re still on the lookout for ways to improve SiteBuilder Lite.  Again, that’s why we test – we realize that you, our members, have a lot of time and effort invested in your websites.  The success of your businesses depends on your sites, so we are constantly on the lookout for ways to make things easier for you, either by adding new elements or improving existing ones.

We have a lot of our own ideas in discussion and in the production queue, but if you have any of your own please let us know.  Stay tuned for more to come, and thanks again for using Homestead!

Setting up PayPal for your SimpleStore

June 13, 2008

Here’s product designer Rina with her third and final post on Homestead’s new SimpleStore – Rochelle.

In the last two posts, we covered an overview of the new Homestead SimpleStore product, how to get it set up on your site, and how to fill it with products. Today we’ll finish off with the financials. All you need to do is get a free PayPal account, and then connect that account to your store.

The PayPal account you’ll need is called a “PayPal Business Account with Website Payments Standard.” It’s a mouthful, but we put in a link so you don’t have to search PayPal’s website for it. Just go to your Store Manager in your online website account by logging in and selecting Selling Online, followed by Store Manager, in the left-hand menu. (Multi-site users, remember to ascertain that you’re on the right site!) Under the PayPal section of this page, you’ll see a link that says Get a PayPal Account. Click on that and follow PayPal’s instructions to get your account set up.

QuickStore ecommerce website PayPal setup

This PayPal account is your online payment processor and all you need to run your SimpleStore’s finances. With it, you can accept all major credit cards, bank transfers, and PayPal payments without any online merchant accounts. You customers will check out through PayPal’s secure transaction system, and payments will be received into your PayPal account. You’ll add financial information to your PayPal account during setup so that you can move funds from your PayPal account directly into your bank account. Please note that it may take a few days for your financial information to be confirmed.

When you’re done setting up your PayPal account, return to the same Store Manager page and enter the e-mail address you used to register for your PayPal account into the box. You can also update your e-mail address in SiteBuilder by clicking on the second of the three Edit button in the ‘Basics’ tab. (For SiteBuilder Lite, the Manage Store and PayPal Settings link will return you to the Store Manager page).

And you’re done! Now you have a fully-operational online store that matches the rest of your website. I think you’ll have a lot of fun with SimpleStore. Happy online selling!

Adding products to your SimpleStore with the Product Manager

June 12, 2008

Here’s product designer Rina with the second of her posts on Homestead’s new SimpleStore – Rochelle.

In yesterday’s post, I gave an introduction to our new Homestead SimpleStore product, explaining some of its benefits and how to get one onto your website. We’ll start where we left off in the last post, with our SimpleStore element positioned and designed to suit our tastes.

Now that the SimpleStore is ready to go, let’s fill it with products. SimpleStore can display up to 100 products (you can actually load it with an unlimited number of products, and you choose up to 100 of them to show your customers at any given time). There are two ways to edit your product information: using your website editor (SiteBuilder or SiteBuilder Lite), or by logging in to your online website account.

To access your products in SiteBuilder, simply click on the SimpleStore element to select it. The properties editor pane to the right will then show the properties for your SimpleStore . On the ‘Basics’ tab, there are three Edit buttons—one to edit your product data, one to connect your PayPal e-mail address (we’ll talk about that in my next post), and one to set your currency.

QuickStore ecommerce store properties

Clicking on the first Edit button will pop up a window with the Product Manager.

To access the Product Manager in SiteBuilder Lite, click on your SimpleStore element to select it. The top left corner of the screen will now display two buttons and a link for your SimpleStore . Clicking on the Manage Products button will pop up a window with the Product Manager.

QuickStore ecommerce Product Manager SiteBuilder Lite access

Finally, you can also access the Product Manager by logging in to your website account. Then use the left hand navigation menu to find the Store Manager sub-section within the Selling Online section. This opens the Store Manager page, which you can think of as your behind-the-scenes SimpleStore manager. The Store Manager page is where you can access the Product Manager, set your store’s currency, and connect your PayPal account to your store. It also contains an instructional section on the right side of the page, which provides helpful tutorials and videos on how to set up your store if you get confused.

For users with multiple sites, please make sure that you are signed into the correct website before managing your product information. A quick way to know whether or not the site you’re signed in on has SimpleStore is to check the background color of the instructional section on the right side of the page—if your site has a SimpleStore , it will be orange; otherwise, it will be blue.

Open the Product Manager by clicking on the Launch Product Manager link on the page.

QuickStore ecommerce Store Manager

Adding your products using the Product Manager

Now that the Product Manager is open, it’s easy to add your product information to your SimpleStore . You can enter information like product name, a description, and a price – which will be fed into your SimpleStore’s built-in search tool.

SimpleStore lets you upload a picture for each product. Here’s a word of advice – I would use a good-sized product photo. SimpleStore automatically creates a smaller-sized image to be displayed in your store, and when your customers click on it the image will be displayed in its actual size.

You can also choose to assign up to two attributes for each product. For example, in my sample store I sell cookies. For my chocolate chip cookies, I created an attribute called ‘Chocolate Type’ and listed the options as ‘Milk’, ‘Dark’ and ‘White’, so a customer could choose to buy dark chocolate chip cookies from me, if that’s what he or she wanted.

QuickStore - adding products to ecommerce store

You can also place your products into an unlimited number of categories. Categorizing your products is useful because your customers can then choose to display just ‘vegan’ cookies, for example, if that’s what they are looking for.

If you need to manage your attributes or your categories separately from your products – say you want to rename a category or edit the options in an attribute – you can do so by clicking the Categories or Attributes label on the left side of the Product Manager, then clicking the specific category or attribute that you want to edit. Don’t forget to save when you’re done!

Now that your SimpleStore is loaded with products, in tomorrow’s post I’ll show you how to set it up to accept your customers’ payments!

Introducing SimpleStore

June 11, 2008

For those of you who want an easy way to sell things on your websites, have we got something for you! Here’s product designer Rina to tell you all about our new SimpleStore product – Rochelle.

There is a common misconception that if you have a website, you’re equipped to sell online. However, if you really think about it, all you have is real estate. Where’s your storefront? Where’s your shopping cart? How do you accept your customer’s payments? And if you have more than just a handful of products, how does a customer search through all of them?

As many of you may know, Homestead offers something called Homestead Storefront, an advanced ecommerce product designed to give you a way to offer your customers all those services and more. Storefront is jam-packed with great features, including shipping and billing tools, inventory management and QuickBooks integration.

Sometimes, however, people just don’t need all the advanced functionality of Storefront. They want to sell online using something simpler.

So here it is—the Homestead SimpleStore! The SimpleStore is just what its name implies: a simple way to add a store to your website, and one that matches the look and feel of your site to boot.

SimpleStore provides you with a clean, intuitive layout that makes it quite easy to give your customers a professional-looking store, complete with built-in shopping cart, product search and category browsing capabilities. You’ll be able to accept credit cards online without a merchant account by using a free PayPal account.

Perhaps best of all, you don’t need to learn any new tools to fit it into your existing website—the SimpleStore is simply another element in SiteBuilder or SiteBuilder Lite!

Here are a few sample stores that we’ve built. Click on the screenshots and you’ll be taken to each SimpleStore sample. Feel free to play with them as much as you want, just to see how they work. And don’t worry—you won’t actually purchase anything because for these samples we didn’t set up a PayPal account to accept orders.

QuickStore sample ecommerce store 1

QuickStore ecommerce sample 2

QuickStore sample ecommerce store 3

Now, how do you get one of these? SimpleStore is currently available for Gold and Platinum website members as a paid add-on to your website account. If you have one of these accounts, you can easily add a SimpleStore to your site by logging in to your online website account and finding the Selling Online section, followed by the Simple sub-section, using the left-hand navigation menu.

Getting the SimpleStore on your website

After purchasing the add-on, you can just drop your SimpleStore onto your existing website like you would any other element in SiteBuilder or SiteBuilder Lite. In SiteBuilder, the SimpleStore element will appear under the coin icon in the menu above your page after you purchase the add-on:

QuickStore element in SiteBuilder

In SiteBuilder Lite, the SimpleStore element is the green shopping cart entitled ‘Add Store’ that shows up in your element palette after you purchase the SimpleStore add-on.

QuickStore element in SiteBuilder Lite

Your SimpleStore element will first appear on your page in its default size and color. The example below shows how my store first appeared in SiteBuilder, right after I added the SimpleStore element to a new store page.

QuickStore default appearance

It’s really easy to change these defaults. Your SimpleStore element acts just like any other part of your website, so you can use the tools you’re used to in SiteBuilder or SiteBuilder Lite to make the changes you want. Resize and position your store wherever you like on your page, or change around your store’s size, colors, font and more until it blends in perfectly with the rest of your website design.

QuickStore appearance customized

Building a SimpleStore is fast, and it’s fun too. Tomorrow I’ll show you how easy it is to add products to your new SimpleStore!

Testing your site – how to prepare for a user test and how to conduct it

June 3, 2008

A while ago we had Brian, one of our user interface designers, write about the importance of user testing. He works very closely with people we invite to our user testing sessions, so he knows what he’s talking about. Here he is with a follow-up, this time with tips on preparing and conducting your own user tests – Rochelle

In my last post I mentioned how important it is to look at how “user-friendly” your website is. If it’s user-friendly, it’s far more likely that your visitors will come back and make visits to your site a regular thing.

User-friendliness is one of the most intangible and hard to define characteristics of any website. It can be really hard for someone who has built a site to make that determination alone. The very best way to find out how friendly your site is to your visitors is to ask the visitors themselves.

At Homestead, we bring in a group of users every month and just watch them use our website. It’s been invaluable to see where some of the design choices we make work out well, and where some fail. It gives us an opportunity to fix things where necessary, and make Homestead a better product to use. Several changes we’ve made over the past year have come about from observations made in user testing, such as the redesign of SiteBuilder Lite we did a few months ago.

Most software companies test their websites with real or representative users. Some companies, such as Google and Microsoft, have entire teams of people and advanced fancy equipment to test. However, you don’t need to be a large company with vast resources to test the usability your website. All you need is time and a little help from your friends.

Mapping out tasks

Last time I talked about deciding what your goals were for visitors coming to your site, like making a purchase, submitting a survey, finding your location etc. Once you’ve identified those, put yourself in the shoes of your visitors and map out the tasks you think they should do in order to accomplish each of those goals. Each task should be something a user on your site would typically do to accomplish one of your goals.

For instance, if one of your goals is for a visitor to make a purchase, the tasks they need to accomplish might be searching for a product, selecting a size, choosing shipping options and inputting payment information.

Some tasks should take less than a minute to finish, others will take more. It all depends on how complicated the task is. Come up with an ideal length of time for each task. For a simple five page information-based website, any task should not take more than a minute or two. For an ecommerce website with many products, tasks may take several minutes.

During your test you’ll have an opportunity to see how long it actually takes users to accomplish your goals. Don’t be discouraged if each task takes longer than you expected. Either you misjudged, or you just identified an area of your site that needs improvement (more on that in another post).

Who to test

Now that you’ve identified your tasks, you need to identify who your target users are. If you’ve made it this far you probably have a good sense of who they are. If you sell products, such as pet supplies, a target user might be dog owners. If you’re an electrician, a target user might be a homeowner.

To run a proper test you’ll need to observe at least five people using your site. Ideally these five people should be representative of your target user group. If you can’t find representative users, use family and/or friends.

However, make sure that that their technical proficiency is roughly the same as your target group. If you believe your target group is not tech-savvy, you probably don’t want to pick your nephew getting his degree in computer science.

For a good test you should schedule between 30 and 45 minutes of time with your users, either at your home or business, or at their residence. Remember, they’re doing you a favor so take them out to lunch or bake them some cookies for lending you a hand.

I hope this gives you enough tips to help you plan for your own tests. In subsequent posts I’ll discuss how to conduct your tests and how to interpret your results. If you have questions, let us know!