There are hundreds… no, thousands of add-on apps and services that you can use to grow your ecommerce business. The problem is that there isn’t time in the day to test every new service that comes out. Fear not, we’re here to help. Every couple of months, we’re going to profile our favorite new apps for ecommerce professionals. For our first installment, we took a look at 9 apps that are helping ecommerce companies grow big and strong. Here’s our first set of great apps:
All posts in Technology
How-To Use Inline Validation to Increase Conversion
Inline validation is an opportunity for merchants to provide a fundamentally better checkout experience for their customers. Unfortunately, it’s an opportunity most retailers don’t take advantage of.
The problem with conventional checkout forms is that they wait until after a customer has tried to submit to validate the form for mistakes.
You know the story; you spend 10 minutes filling out a checkout form, hit submit, and get back a page that is completely blank because of an error. It’s frustrating for customers and undoubtedly causes a decrease in conversion.
Inline validation can dramatically improve your checkout experience and lower your cart abandonment rate.
By validating your checkout form in real-time, field-by-field, you are giving your users immediate feedback as to whether they’ve filled out each field with appropriate inputs.
Usability expert, Luke Wroblewski, documented some compelling data to support how effective real-time validation can be in an ecommerce setting. In a test he conducted with usability firm Etre, he found real-time validation caused:
· 22% increase in success rates
· 22% decrease in errors made
· 31% increase in satisfaction rating
· 42% decrease in completion times
In addition to his research, Luke also attests to the fact that he has seen real-time validation reduce errors by over 80% in other studies.
The end result is getting more customers through your checkout forms, faster and happier. Sounds like a recipe for increased conversion.
The downside of this for a lot of small to medium sized retailers is that they are at the mercy of what their ecommerce platform offers. In many cases, the cart platform maintains control over the entire checkout flow and merchants can’t intervene.
For retailers who have a proprietary cart or access to their checkout flow, let’s take a look at how inline validation should be implemented from a technical perspective.
Technical Implementation
Every checkout form has fields that need to be validated for accuracy on the client-side (in the browser), as well as fields that need to be validated server-side. The ideal situation is that every field on your checkout form is validated both ways.
Client-side validation can be done with JavaScript or HTML5’s built-in validation functionality. Potential drawbacks with using a JavaScript solution are that users can disable JavaScript in their browser. Potential drawbacks with HTML5 are that it is only supported by modern browsers. That being the case, validation should also be done on the server-side.
You should validate fields once a user has finished their input for a specific field and they have moved on to the next field. This action is called “blurring” a field. For server-side validation, you can utilize AJAX to send the field data back to your server to be checked for accuracy.
If the data looks good, return a response and show the user that the field has been filled out in a way that’s acceptable. If not, return a helpful error message and display it inline with the associated field (meaning adjacent to the field). If your server response takes more than one second, you might consider displaying a small spinner graphic to indicate to the user that something is happening behind the scenes and reassure them while they wait.
Here’s a great example of real-time validation from the new Twitter sign up flow.
Inline validation reassures users and makes the arduous process of filling out a checkout form a little bit more enjoyable. If you can reduce the friction people experience while buying from you, you’ll undoubtedly reap conversion rewards.
Optimizing Your Shopping Cart for Mobile
There are a lot of great articles out there on how to optimize your site for mobile. You can find the best designs, learn why mobile is different, and see what other companies are doing right. We aren’t going to rehash all that. What we are going to cover is how to optimize your shopping cart for mobile.
Getting people through your cart is hard enough when a person is on a computer, now take that and shrink it a few times. Things just got a lot harder.
With 51% of consumers saying they’ve made a mobile payment within the past 3 months and smartphone adoption expected to double for many demographics, mobile commerce is only going to grow.
Let’s look at how you can make your mobile shopping cart awesome using a few examples:
When you search anything around ‘best mobile site’, you will typically see Amazon come up. Why? Because they’ve done a great job making their site mobile friendly. Adding a product is amazingly easy but what happens when you get in the cart?
Checkout
- The page is simple and only has on it the things I need – product, image, price, in stock, subtotal
- It allows me to change the quantity with a very apparent ‘update quantity’ button.
- There is also a save for later button, a proceed to checkout & a continue shopping option.
Save For Later
- The save for later button simply moves it into a separate section. You can then move it back into your cart when you’re ready to purchase.
- I’d like to see something that lets me add it to my account (especially if I’m Amazon)
Sign In
- This screen lets me either sign in with my existing account or simply enter my email address. A good option for new shoppers.
- The nice thing is, these are my only two options really, making it pretty easy to take the next step and not clutter my screen.
- I would make the radial and sign in buttons a bit bigger
Checkout
- As I’m an Amazon subscriber, I see the total, my payment method that’s on file, my billing address, shipping address, product and shipping speed.
- Want to change shipping? The button is very easy to use and takes you to a new screen where radial buttons let you choose.
Overall, the process couldn’t be any easier.
Let’s take a look at another mobile site – Eastbay
Eastbay has a pretty great mobile site that’s easy to use and to find all the products they have. When you add a product to the cart, we get this:
Shopping Cart
- Just like Amazon you see the product, size, price, image and quantity that you can update and remove.
- One thing we recommended in our 25 ways to prevent shopping cart abandonment post was to make sure that you show shipping costs ahead of time. Eastbay does this in a great way, a drop down.
- The downsides are it’s pretty crowded. While it’s good to show you offer paypal, this may be something you wait to show on the mobile site.
- It’s also hard to offer a code through mobile. Maybe let them click that in order to get the discount.
- You also may not want to include your social icons, catalog links and shop by brand button. Once someone is in your cart, keep them there. (see screenshot below)
- On the plus side, the click to call button is a great addition to any mobile cart. (see screenshot below)
Checkout
- Letting users check out as guests is always a great thing.
- I also love that the order description and totals are included here.
Guest Checkout
- There’s a lot here but it’s pretty easy and the required fields are noted.
- Including drop downs is a must when possible.
- Asking users if they want text messages is a great way to connect with your mobile users.
Shipping Options
- Leaving the billing address as the shipping address is great. Less fields to have to fill out.
- Having the other option as a drop down is a great way to utilize space.
- Drop down shipping is nice but one thing I may do is move this option to the shipping address page. The less steps the better.
- Give your users the chance to edit their previous information.
Checkout
- The multiple options is great and the drop down lets the user see that they can pay with paypal and their order total.
- I might move the order total to the top but leave the details below.
- When you open the credit card payment, the credit card field indicates no dashes or spaces which is helpful for users.
What have we learned?
Both of these companies do a good job optimizing their mobile shopping cart and they can definitely teach us a few things:
- Keep it simple. Only include the things your users need. It’s a small space so use it wisely.
- CTAs should be buttons users can click with their fingers versus hyperlinks. Make it easy to press.
- Make sure the user can save their cart & access it on their desktop.
- For unregistered users, only ask for their basic information at checkout – email & password. You can get the rest later.
- Dropdowns are a great way to present options like shipping options, addresses and payment information.
- Tell users what the form fields require like Eastbay did for the credit card field. There’s nothing worse then having to retype something in through your phone.
- Don’t include promotional graphics on the mobile site. You can see hat Eastbay is doing with their promo code and in that case, it’s hard to actually do anything with it so it just gets in the way.
- Include a click-to-call button. Hey, they’re already on their phone. Bonus: Use a separate phone number so you can track mobile orders.
- Instead of forcing them to sign up for email alerts, give the option to get text message alerts (if you have this capability of course).
- Don’t include extra navigation once the user is in the cart. You can give them the option to continue shopping but that should be it.
We would love to hear what other tips people have. Any particular shopping cart software they are using for mobile sites?
8 Tools to Talk to Your Customers
In the age where customers want responses and they want them now, it’s pretty damn important you give them the ability to talk to you. The nice thing is there are a ton of amazing tools out there right now that are making this much easier. Even better? These tools let you communicate with customers AND can help you improve your product and marketing efforts.
8 tools to talk to customers…Go!
1. KISS Insights
KISS Insights lets you get real-time feedback from customers without any extra resources on your end (bonus!). Wondering why people aren’t signing up? Ask em. Another nice thing about KISS Insights (and some of these other tools) is they aren’t obtrusive so they don’t ruin your site’s user experience.
2. oLark
There are a few live chat tools out there but oLark seems to be killing it. It’s easy to implement on your site, you can customize it visually, it works within your IM client and it keeps all that feedback you get from folks. Did you know live chat can improve conversion rates?
3. UserTesting.com
Want to learn what works on your site and what doesn’t without messing stuff up? UserTesting lets you give live usability tests for a pretty low cost. The only real downfall is that the people you’re testing with may not be your exact target audience.
4. Argyle Social
It’s no secret that you need to monitor your online reputation. The thing is there’s a lot that goes into that! What types of things do you monitor? How do you monitor everything? A cool tool for this is Argyle Social. Set up campaigns, monitor specific sites, get alerts, schedule updates and be able to act quickly should something arise.
5. Grasshopper
Even if you don’t get a ton of calls, you probably should have a phone number. Why? Because at some point, a customer may want to pick up the phone and talk to you. Grasshopper has 800 numbers and local numbers that you can just forward to your cell phone.
6. Ethnio
Interested in user testing? Ethnio lets you recruit customers/potential customers from your site and manages the incentive process. Pretty good way to find qualified users.
7. HootSuite
Another way to manage and monitor your social profiles and online presence, HootSuite is a good alternative to something like TweetDeck. They have some nice features like location targeting, mobile monitoring and of course tracking.
8. Help Scout
A help desk tool that specializes in empowering you to manage email support, Help Scout is pretty sweet. Help Scout is awesome if you have multiple people who use one email inbox to manage support. For example, Rejoiner uses help@rejoiner.com as it’s primary support mechanism. We love that it doesn’t have all of the heavy features of other help desks and focuses on being the best at one thing: email support.
Go check out some of these tools and let us know what you think.
This Week At Rejoiner
This is the first part in what will hopefully be a weekly series of blog posts, letting our users know what’s been happening at Rejoiner, what things we are working on, and progress we are making.
This has been an awesome week for us at Rejoiner, especially on the technology side of things. Early in the week, we were notified by Rackspace Startups that we were invited to participate in their program for at least the next 6 months! I must say I am super grateful to Rackspace for selecting us and am looking forward to moving our applications off of the hosting platform they are on now and on to the Rackspace cloud. Check out our post from earlier this week on why this is so important for us and for our merchants.
In addition to getting the process started of migrating our applications over to Rackspace, we made some great progress on our automated recovery email feature. This is a huge feature in the making and we’ve got most of the complex pieces built out. Yesterday I successfully tested the email scheduling piece and will be moving on to adding analytics like click-throughs and conversions in the near future.
Additionally, we’ve made great progress on our new marketing site. We should be launching the site very soon and are really looking forward to it. Nick and Mike have put a lot of time into it and we’re excited about how it has turned out. I think we should be putting it up live next week sometime.
Scale Early
I’ve been involved with many projects where scaling was an issue because it hadn’t been considered early enough in the game. Painful app rewrites result, time is spent on infrastructure instead of new features, and it’s just not fun. However, in startup mode you are trying to move very quickly and spend time building out features, validating/invalidating assumptions, etc. So, where is the line between building “good enough” solutions and building the “right” solution?
Truth is that I don’t really know all the time, but I AM certain that scalability needs to be considered day one. This does not mean that all your code need be perfect and that you should try to do everything right the first time. It just means that you should always be coding with large data sets and performance in mind, even if you are early in your startup and don’t have gobs of data and millions of users. I’m pretty sure that none of us builds a company hoping to have very few users, so why do we build solutions that don’t scale? If it takes a little longer to build a solution that can scale vs. a hacked-together solution that will need to be redone later, I try and go with the first option whenever I can.
A recent example of this for me was when I was building site metrics functionality in Rejoiner. We want our customers to see important metrics from the past month on their dashboards as soon as they log in – pretty simple, right? Well, I could have written this in a couple hours and the dashboard page would have loaded very quickly given the size of our database right now. I could have moved on to the next feature and called that one “done”, but I knew that was not going to be a good experience for customers with millions of events. I also knew that we WANT to have customers with millions of events because that means they are likely getting value out of our service. So I decided to bite the bullet and build a simplified data warehouse / reporting database. While I was second-guessing myself a little bit on whether a DW was needed so early in the game, I’m glad I took the time to do it right.
Something that stuck with me was an interview I saw with Kevin Systrom, CEO of Instagram, where he talked about the time when they “pushed the button”, launching their app into the App Store. While scalability was not the focus of the interview, I could not help but think how things would have been different had they had an infrastructure that could not handle the tremendous growth they experienced literally overnight.
It’s tough to make the right call on where to direct your focus in a startup, but don’t make the mistake of putting off scalability concerns. Make it part of your decision-making process early and often, and build your app to handle the growth you want to see.
Rackspace Startup Program
We had a really exciting day yesterday at Rejoiner. Rackspace let us know that they’ve selected us for their startup program. This is huge for us and our customers for a few different reasons:
Our technology needs to quickly process large amounts of data, and in order to do this effectively, we need robust hardware that can handle the load. Being a bootstrapped startup, we have not been been able to invest in top of the line hosting to date. The good news is that has forced us to code our application for maximum computational efficiency. But moving our app to the Rackspace cloud will make our already highly tuned application even better, riding on top of a stellar platform that we can continue to grow our business on. Additionally, we will be able to take advantage of a number of other features that Rackspace supports like application health monitoring, load balancing, and more robust data backups. All of this equals out to a huge win for our existing users from a reliability standpoint and a rock solid foundation that we can confidently say will scale as we continue to grow.
