Spree Commerce

Try It Now

Improve Your Online Store UX With These Handy Tips

Posted on July 15, 2015 by Netguru

About the Author

Netguru is a leading development agency and Spree Commerce Certified Partner. We build lean and beautiful applications for everyone from startups to major corporations. Our developers are focused on the Ruby on Rails and iOS frameworks. From the first commit to the final release, we are committed to build well-devised and user-friendly apps & ecommerce platforms tailored to your specific needs.

When it comes to ecommerce, the aim of any site is to direct users into the right places that they need to go and to encourage them to buy a product. Good UX can achieve this in numerous ways. From the way that a signup form is crafted to the colors used in the design, UX can have the effect of boosting conversions.

Bad UX has the opposite effect in that it’s off-putting to the site visitor. Web users have become increasingly sophisticated as the net has matured and are no longer willing to deal with a site that provides a bad experience. In ecommerce sites, this means that they won’t part with their cash to pay for your products if your site UX isn’t up-to-scratch.

What exactly is UX? (and what it’s not)

In recent years, we’ve seen a renewed interest in UX (User Experience) take place, thanks largely to the need to design for smaller screens. UX is not always an easy thing to define, so let’s first look at what it is and what it’s not.

UX shouldn’t be confused with usability or UI (User Interface). While these disciplines are related to each other, UI is concerned with the actual interface with which the user interacts, while usability is all about how easy to use a site is.

UX is all about the feeling that a user has when using a site. For example, if a site is slow to load, then the user quickly becomes impatient and frustrated and will leave.

That’s bad UX.

Similarly, if a site doesn’t include white space or contrast, then it becomes more difficult for the user to interact with the site and that too is bad UX. It is quite a broad discipline, but if you get it right, it can have a significant impact on sales in your e-store.

UX design for ecommerce sites

There are a huge amount of considerations to undertake when designing an ecommerce site. Make sure you discuss all the necessary issues with your design and developers’ team when planning the site. Here are a few crucial factors to think about.

Colors

Again, use brand colors, and contrasting colors to ensure that the text is clear and easy-to-read. You should also bear in mind accessibility (also, check out our article in this topic) and consider that people with color blindness will see colors differently. For example, green and red may seem like contrasting colors, but as they appear opposite each other on the color wheel, they appear quite similar to people who suffer from colorblindness.

The picture shows the differences in color perception (from the upper left): normal, protanope, deuteranope, tritanope.

Buttons and other clickable areas

These ought to be immediately apparent to the user what they’re for. Remember to keep enough surrounding padding to ensure that buttons or links don’t encroach on other clickable areas that might be next to them. Mobile users will be using touch, so buttons and links should be large enough for these users to click easily. One more important tip: take a close look at the typography. It should be in keeping with your brand’s personality and should be clear and legible.

Images

An image can tell a story all by itself, so make sure yours are high quality but also optimized so that large file sizes don’t slow down the shopping experience. Include pictures that are clear and representational of the product or service. Also, keep in mind to make your website responsive, so that all visual elements are displayed well to mobile and tablet users.

White/negative space

That’s an important factor many shop owners may consider difficult to digest, but white space is not a waste. It’s for the benefit of a visitor – you don’t want to get him/her tired of content overload while browsing your site. White space should be used where appropriate so that the site doesn’t appear cluttered and the central message get lost. Take a look at this example:

In the image above, for award-winning site Helbak, you can see that the design is deceptively simple. This doesn’t mean that a lot of work didn’t go into development, quite the opposite in fact. The design is clean, with plenty of white space, and little in the way of text. The site lets the images do the talking and navigation is achieved through the top bar, as is usual for most sites.

It’s important to remember that conventions (such as navigation being at the top of the page, and logo placed in the left top hand corner) are very useful when designing an ecommerce site. Conventions are design techniques that we’ve become so accustomed to over time that we expect to see them in sites we visit. As such, we look for them when we arrive at a site and if they’re not present, it can throw us to the extent that we leave.

With this in mind, be very careful about breaking conventions as it can also effectively ‘break’ your conversion rate. Whilst it’s sometimes tempting to be highly original and create designs that are a little off the wall, it pays to think carefully about your design choices.

Do:

  • Use appropriate, contextual content to enhance checkout flow and products. Provide your customers with concise descriptions, representative pictures from different perspectives, or videos showing your product in action—depending on the item sold. Users should be left in no doubt as to what the product is and what they need to do to buy it.
  • Use different colors for buttons with different purposes. You should also use color psychology to inform your choices and carry out A/B testing.

Don’t:

  • Add so much content that the message is lost and the user is confused. Provide important product data first and use accordians or tabs that can be expanded on user action.
  • Place lots of text around buttons, ensure that there is just enough of negative space.

Forms and Registration

It’s important when designing forms for user registration that they require as little input as possible. Remember that you’re not just targeting desktop users and as such, some visitors will have to fill in forms on mobile. With this in mind, make sure:

  • As few fields as possible are created. Only ask for the user information that you need, there’s no reason that you have to know their date of birth, for example. You can ask for more details (address, phone number, etc.) when the customer proceeds to make an order.
  • Form fields are large enough for users to comfortably click into with a finger.
  • Form labels appear in the right place no matter what device it’s viewed on.

Reducing the number of form fields can increase conversions by as much as 160%, so keep it simple and brief.

Key Decisions in the Design Process

When designing UX for ecommerce, the user should be central to every decision that you make. However, it’s important to remember that you are not your user and so you should carry out as much real-world user testing as possible. Consider taking a mobile first approach too, as it’s much more difficult to pare back a desktop site for mobile than it is to design with mobile in mind from the beginning.

Now you know what factors you should draw attention to when thinking about your e-store’s UX. Soon, we’ll post about best practices when designing a shopping cart and checkout experience – stay tuned and visit our blog again!

If you’re into ecommerce, check out our article about smart retail solutions that change ecommerce and grab some inspiration! To read this piece in its original format, visit the blog of netguru.

How to Add Products to a Spree Store

Posted on July 14, 2015 by 3llideas

About the Author

3llideas is a development agency with years of experience in ecommerce. As a Spree Commerce Certified Partner, 3llideas has launched Spree Commerce stores for businesses around the world, spanning a range of industries.

What do you need from your online store? The first thing is obvious: you need an ecommerce platform that allows you to put items for sale online. The software used to faciliate this integration with your business must allow you to manage these needs without sacrificing flexibility in the future.

With an emphasis on the technical aspect of the storefront, the platform must provide fast, reliable access to content. The store must be responsive, versatile and scalable, allowing developers to create new sotware without too much complication. When building a new storefront, you’ll have all these advantages and more if you choose Spree. And it’s a completely free, open source software, too.

At 3llideas, we recommend Spree based off our own experience. We build storefronts for sellers, and know firsthand everything you need to know about doing sales online. One aspect that requires a significant bit of effort is updating the product catalogue, which can get complicated to the extent that the catalogue relies on numbers, models and variants. How does Spree work to maintain your catalogue? What steps must you complete to add new products to the store?

Extending the Catalogue Manually

If you have a store and want to use Spree but can’t find proper support because our articles aren’t in English, they can help. You simply have to access the Spree administration panel, click on the “Products” tab, and then click on “+ New Product”. The layout is simple, intuitive, and details the necessary fields, so you can’t miss any of the support articles. Spree has an excellent administrator’s catalogue that allows you to manage the stock, description, pictures, prices, taxes and references. It can also be translated into Spanish, which is important.

One of the vital aspects of Spree is that it’s a suitable platform for all types of ecommerce storefronts. But what if you have a high amount of volume in your catalogue? Adding to the catalogue manually is great for a single product, but not the best for adding items in groups.

Automatically Uploading Products in Spree

Spree gives your the freedom to easiy update the catalogue, or create it from scratch. Uploading every single item manually can be a nuisance. It’s much easier to get a developer that can easily sync a file. For example, it’s possible to upload a CSV file with all the products and their variants, updating the server automatically and syncing with the online store.

It’s also possible to create a field in the admin panel that can upload the CSV (or TXT, Spree adapts to use all business formats), that add the products following the upload. Do you use one Web Service or ERP? You develop the online store to update through them, making it easy to keep the total price for the project at a low figure.

One of the great values of Spree is its adaptability, especially for key aspects such as product management. 3llIdeas has extensive experience in this area, with catalogues that reach 4,000 references that are updated through one simple file load; the process is worry free, reliable, and automatic. Isn’t that how managing an online store should be?

Adding items to your Spree store doesn’t entail unneccessary complications, and we can use our experience to upgrade your ecommerce catalogue. Interested? Just contact us.

To view this blog in its original format, visit the blog of 3llIdeas.

8 Reasons why you should choose Spree Commerce for your online store

Posted on June 30, 2015 by Eva María Gude García

About the Author

Eva María Gude García is a social media manager and content director at 2beDigital. 2beDigital is a digital marketing agency based in Santiago de Compostela, Galicia and Barcelona. 2bedigital was formed by a multidisciplinary team whose principles of trust and transparency power their work.

When the time comes to choose an ecommerce storefront, there are many options available. Choosing the right storefront is a top priority for your business, and choosing the appropriate framework is a difficult but pivotal task.

Spree Commerce is currently considered the most popular choice among store owners and retailers. And that’s the reason why 2beDigital chose Spree as one of its key platforms. Here are 8 reasons why you should choose Spree Commerce for your online store:

1. Easy to Use

Spree is simple and easy to use. Its interface and administrative dashboard keep the user in mind.

2. Ruby on Rails

Spree is developed in Ruby on Rails, which is noted for its reliability and stability.

3. Easy Documentation

The user guides developed by Spree’s developers are easily accessible, and extremely helpful to new businesses. You can join the community and take advantage of Spree’s expert recommendations if you have any problems with the application.

4. Licenses

The Spree-BSD license has few restrictions, regardless of the size of your business. Even if you’re a small business or a multinational, you’re free to use Spree for commercial purposes without paying licensing fees.

5. Easy Customization

Spree is completely flexible and can be adapted to the needs of businesses, not vice versa. With lots of extensions available in the community, Spree often becomes the preferred choice for ecommerce brands.

6. Mobile Optimization

If predicitons stand true, shopping with smart phones and tablets will grow 43% througout the year, compared to 2014. Needless to say, optimizing stores for smart phones has become essential. The Spree storefronts are responsive, and will work as well on a smart phone as they do on a desktop.

7. Spree Commerce’s API

With Spree Commerce’s API, creating a new application or a third-party integration is flexible, easy and scalable.

8. Integration with ERP, systems management and accounting

With Wombat, Spree offers the possibility of integrating online stores’ accounting, ERP and management. Wombat automates all of your third-party services, increasing your speed to market and ensuring you never again lose an order.

To view this post in its original format, visit the blog of 2beDigital.

Congratulations to littleBits and Casper

Posted on June 30, 2015 by ALexander Diegel

Congratulations to Casper and Little Bits

When you tag your company as, “Behind the Best Storefronts,” you get a certain sense of pride whenever you see your clients take their business to the next level. In the past week or so, Spree Commerce has had a lot to be proud of, and would like to extend a huge congratulations to both littleBits and Casper, who raked in a combined $99.2 milion in funding.

littleBits

littleBits, the startup that is democratizing hardware by empowering everyone to create inventions, big and small, announced that it received $44.2 million in new funding. The company with the easy-to-use electronic building blocks will use the new funding to fuel its growth.

Specifically, littleBits will use this investment to further its STEM/STEAM education distribution, push global expansion, and develop new enterprise initiatives. The company will also expand its retail availability in the coming quarter by partnering with Barnes & Noble in its retail stores across the United States.

Still a young company, this Series B funding will help littleBits continue to revolutionize the hardware landscape, just as Netflix did for video entertainment before it. Click here to read the entire press release surrounding this announcement.

Casper

Just 14 months into existence, straight-to-your-door mattress retailer Casper secured $55 million in a new round, at a $550 million valuation. Adding a little glam to this investment round is the list of celebrities who have joined the group of investors: Leonardo DiCaprio, Tobey Maguire, Adam Levine and Scooter Braun.

The new funding will be used to expand Casper’s research and development staff, bring in more employees, and lay the groundwork for international expansion. This comes just after Casper announced same-day delivery in San Francisco, which should also enhance the company’s growth.

Also just on its Series B funding, Casper continues to turn heads with its bed-in-a-box sales and delivery service. To read more about this round, check out the full article on TechCrunch.