Case study: Joco Cups

Written by Mark Forrester on October 12, 2012 Blog, Customer Stories, News.

A case study by Ben Collier, on developing a site for some close friends wanting to sell reusable coffee cups… with a difference.

With the current market for reusable coffee cups saturated by cheap plastic moulds – Two surfing friends decided they could do better job and developed a high end, glass alternative focusing on sustainability and design. After over a year of meticulous product development the finished product was ready to market.

Talented designer, Jimmy Gleeson was enlisted to create all aspects of their branding and packaging, including the design of an ecommerce website. My role was to bring the design to life and develop a website that was functional from the front-end through to the back-end. Enter WooCommerce.

The Joco Cups homepage.
The Joco Cup

WooCommerce Customisations

On the surface the website is your standard blog/business/ecommerce setup. But as with every project, some curve balls were thrown in by the client throughout development.

One of the more challenging requests was to configure multiple images per product variation. I initially hacked together a solution using Advanced Custom Fields and toggle techniques with Jquery & CSS but struggled integrating with some of the core WooCommerce functionality. I trawled through the forums but decided to reach out to a Affiliated Woo Worker to get expert assistance.

I was encouraged by the positive response and within 24 hours had James Kemp scope the work and estimate the hours required. The solution put together integrated perfectly and was exactly what I had envisioned. James has now released the work as an extension for the public. The Variation Swatches and Photos extension was also used to replace the colour swatch options with images of the different cup colour options.

Building Blocks & Plugins Used

A lot of work was put into the templates to enable total administrative control over the frontend and it’s content. Feature slides, banners and custom aligned images we’re all configured using the Advanced Custom Fields plugin. In my opinion there is no better tool to work with when developing these CMS features.

Being a new business, contact forms were an essential part of the site. The Gravity Forms plugin makes the contact form development a breeze. From creating a form in the backend to styling it on the frontend the plugin saves you countless painful hours.

The blog section uses Jquery Masonry to dynamically positions posts as well as WooDojo to spit out Instagram & Twitter feeds from the brand.

Drag and drop re-ordering of blog posts.
The Joco Cups blog.

Ongoing Challenges

Overall the feedback from the public and the initial orders have been really positive. But we’re still experiencing our fair amount of challenges as the website continues to evolve.

  • Pay Pal – As Elliot Stocks blogged about, Pay Pal has been challenging to work with for the client. From getting their account approved to interface confusion, nothing has been easy.
  • Shipping – Configuring the shipping cost structure for around the world and keeping things simple for the end user has required a bit of configuring. The WooCommerce Table Rate Shipping had been a must-have plugin for this.
  • Website Traffic – The initial conversion rate of the website has been high but the low amounts of traffic have made sales challenging. This will obviously build as the brand grows but it has been an initial challenge.
  • SSL & Quickbooks Integration – The guys use Quickbooks for backend order and inventory management. There is a great plugin for communicating with WooCommerce but we are yet to fully configure this part. Main issues have been around SSL & matching offline Quickbooks configuration.
  • Hacker Attack – Strangely the site has been the target of a common WordPress hacker talked about in this forum topic. The attack only disrupted the site for around 2 hours but caused some expected panic from the business. The loophole is currently being investigated but is thought to be from an insecure database password.
The WooCommerce table rate shipping extension in action on Joco Cups.
View the Joco website
Would you like to be featured on our blog? Share your experiences working with WordPress and our products and if we believe it will benefit our community we’ll publish it. Contact us.
cta-banner-10-product-page-v2_2x

25 Responses

  1. s2aebelt
    October 12, 2012 at 2:08 pm #

    This design is sweet! I love the color scheme and vivid photos. By chance do you know what theme was used as a basis?

    • bacollier
      October 12, 2012 at 11:02 pm #

      The theme has been built from scratch using the good old Sandbox (http://www.plaintxt.org/) as a starter

  2. Robert
    October 12, 2012 at 6:07 pm #

    The design and colors are really attractive 🙂 a great case study

  3. Carl Hancock
    October 12, 2012 at 6:46 pm #

    Very we’ll done! I’m going to have to order some of these cups for the rocketgenius (creators of Gravity Forms) office.

    • Carl Hancock
      October 12, 2012 at 7:00 pm #

      Just tried purchasing 8 cups for the rocketgenius office but it appears they don’t ship to the United States just yet. If anyone involved with Joco can gt in touch I’d love to arrange making a purchase.

      • bacollier
        October 12, 2012 at 10:55 pm #

        Hey Carl,

        Thanks for the props! The guys definitely ship to the US – just need to set it up for 8 cups… current limit was 6. Will shoot you an email shortly once the guys let me know who much to charge.

        • Ryan Ray
          October 13, 2012 at 1:14 am #

          Boom, business happening! 😉

        • Carl Hancock
          October 14, 2012 at 5:41 am #

          Suzy at Joco ended up getting in touch with me via email. They had not added shipping rates for the US yet so I couldn’t place the order. She added rates for the US and I was able to place my order for 10 mugs. Everyone in the rocketgenius office will be getting one.

          • nathancorbier
            October 15, 2012 at 5:28 pm #

            Heh. One of my clients, W. A. Stark, had frontpaged Reddit in several subreddits awhile back and did not have shipping rates setup for anywhere but the United States. They now ship globally, after a Google Hangout meeting with me, where we went over global shipping through USPS and FedEx and setting those options up in WooCommerce.

            Sometimes, I think, clients focus on where they’re from without regard to global shipping — they may think that nobody from a foreign country will buy from them or that its a major hassle to sell to a foreign country. Its ridicliously easy to set WooCommerce up to ship internationally, and most countries post services have apps to print customs forms, postage, and other required notifications on the box label from their website or a desktop.

            They’re also my first client to use Gravity Forms for their contact form(s), which made me happy because I love to use Gravity Forms for intricate and complex forms in WordPress.

  4. James Kemp
    October 13, 2012 at 12:33 am #

    Glad the site is going down well, it was a pleasure to work on, the design and build are great!

    • Ryan Ray
      October 13, 2012 at 1:15 am #

      Nice work on it James, glad to see some great work from our Affiliated WooWorkers!

  5. Rahul Sharma
    October 13, 2012 at 10:58 am #

    The site looks broken ont the iPad.

    • bacollier
      October 13, 2012 at 12:59 pm #

      Hey Rahul – The 100% header & footer widths was causing some layout breaks… I’ve added some media queries and set px widths so have another look and should now be pretty similar to desktop

  6. Chris Kovalenko
    October 13, 2012 at 6:50 pm #

    The site looks great! As people said I love the colour scheme and photography.

    One future modification I would love to see from WooThemes or a WooWorker is to have the option to show variations in the overall inventory.

    For example if you go here: http://jococups.com/shop/

    You can see that there is only one cup. But it has variations of different colours. An option would be to show all variations on the Product page. Also even variations have a separate URL but still linked to a hero product.

    Simply an idea which could be expanded.

    Overall love the site great job!

    Chris

    • anapirio
      October 16, 2012 at 4:40 pm #

      Great idea! I’d like to show all variations on the product page on my shop… WooThemes should release a plugin for that 🙂

  7. Bill
    October 14, 2012 at 1:34 pm #

    Any plans for sizes other than 12oz?

    Also, the pics load rather slowly. There is a noticeable pause. Optimizing them to low file size jpegs (from high file size png) should suffice for the web.

    • bacollier
      October 14, 2012 at 11:07 pm #

      Bill – They’ve got a 8oz in the works so keep checking out the site.

      It’s always a balancing act with web safe jpgs – because the product has so many minor details we wanted to make sure the images were crisp enough to highlight these… compressing any more takes away from this.

      • nathancorbier
        October 15, 2012 at 5:34 pm #

        It amazes me how many product driven e-commerce sites have super-optimized images for their product pics that make the product look … cheap, inferior, gimmicky, pick a word.

        I routinely have to tell clients who “did a photo shoot” before they signed on that their JPEGs sized to 800×600 are artifacted to hell and they need to redo the shoot, get a good camera, get a tripod and a light box, and send me the RAW files for processing. Most of them end up getting a professional photographer to do the shoot, which is great, but some… There can be a lot of “This, as well, does not meet the requirements.”

      • ManusH
        October 17, 2012 at 9:30 am #

        Optimising is not only about compressing. Mostly it is about using the right images (sizes in general).

        For example; in Single Product Page:
        http://jococups.com/shop/12oz-joco-cup/

        Those 7 color-variation thumbnails are displayed as little as 42×42 pixels, BUT the images used are 1000×1000 pixels ~350k each and that makes only 1 of those 7-little thumbnails bigger than total of the rest of the images on the page.

        It will be much more optimised to use small sized versions rather than fitting a large image in a small area…

        btw, all those images are JPEGs, no PNGs, no transparency, etc…

  8. MayaPapaya
    October 16, 2012 at 11:45 pm #

    Great job on the JOCO CUPS site! Really enjoying it – type, imagery, colors, textures – everything came together wonderfully. Pretty sure James Kemp’s extension will be getting some good use, too!

  9. Andrew Gloyns
    October 17, 2012 at 11:10 pm #

    Great to see some fellow Melbournites being featured! Saw the Joco site a few weeks ago and loved the whole design and concept.

    I’m sure traffic is on the up too – it’s just a matter of time and you’re going about it the right way. Keep up the good work!

  10. S. faisal
    October 24, 2012 at 11:06 am #

    Sprocket Networks
    You really make it appear really easy together with your presentation however I to find this topic to be actually something which I feel I would by no means understand. It sort of feels too complex and extremely wide for me. I am looking forward in your subsequent put up, I’ll try to get the cling of it! Woothemes I like it.

  11. Nicolette Zuanich
    October 29, 2012 at 10:44 pm #

    This is the best website for anyone who desires to find out about this subject. You notice so much its almost onerous to argue with you (not that I truly would want…HaHa). You undoubtedly put a brand new spin on a topic thats been wrote about for years. Nice stuff, simply nice!

  12. Brin
    November 7, 2012 at 5:53 pm #

    “One of the more challenging requests was to configure multiple images per product variation.”
    – this is a major failing of Woo – multiple images are ESSENTIAL for succesfull ecommerce!

  13. Design Forum
    November 8, 2012 at 11:00 am #

    Very we’ll done! glad to see progress.