Blog

Greetabl.com business streamlined by a custom Spree Commerce 3.0 implementation & fulfillment integration

St.Louis based startup Greetabl.com was transformed into a scalable and automated one-stop-shop for creatively-curated gifts and greetings that are personalized with Instagram photos, packaged and sent in just a few clicks. This enabled the startup to scale, fundraise and compete for larger market share as well as bigger ROI.

“We threw a lot at the Spark team and wanted everything ‘yesterday’. They did an outstanding job executing our vision. We have big plans, and a lot of new things to build, and we look forward to working with Spark for years to come.” – said Joseph Fischer, Greetabl founder & CEO.

The project is a combined effort of St.Louis based digital brand and consulting firm B/C Designers who crafted the new Greetabl concept and the look, feel and UX of the platform, along with Spark Solutions Ruby on Rails Developers who jointly overhauled their digital platform with a complex ecommerce & fulfillment solution based on Spree Commerce 3.0.

INTRODUCTION

B/C approached the Greetabl project with a strategic vision, rooted in the business objectives discussed with the founding team. “We’re a design strategy firm. We help businesses grow through digital strategy by looking at their business goals, and then creating a design around them, whether it is a new brand, website, or custom application. We started working with Greetabl, discussing their target demographic and brand platform, developing design strategy.” – said Reshma Chattaram Chamberlin B/C Designers Founder.

THE CHALLENGE

B/C and Greetabl worked together to develop a complete online gifting solution where the user, B/C coined “the Giver” could pick from a beautiful selection of boxes, add a gift from a curated collection of gifts, customize the package with a message and photos that would then be shipped to the receiver’s door.

greetabl-unboxing

The user could also send multiple Greetabls to different addresses in one quick and easy order! This new model required a complex customization of Spree Commerce to make this userflow possible.

THE SEARCH FOR A REMOTE SOFTWARE DEVELOPMENT TEAM

B/C Designers sought a qualified technology partner to support the functional development of a Spree Commerce website.

“We were looking for an experienced Ruby on Rails team to support the development of several custom solutions.” – explained said Reshma Chattaram.

Spark Solutions was one of several potential vendors to be shortlisted by the client, and they were approached and selected as the solution partner based on their demonstrated technical expertise and competitive pricing.

Once commissioned, Spark Solutions began to collaborate closely with B/C on the development of their Spree Commerce website, which required custom Ruby on Rails development, user interface / user experience (UI/UX) design (created by B/C), systems integration and configuration, and ongoing support.

Once the business model refinements, user experience and visual design were completed by B/C Designers; it was time to bring it to life with technology.

SHOWCASE

Greetabl.com provides great user experience on all devices with a fluid mobile-ready layout

greetabl-case-study-2-RWD

 

As a user I may start with Holidays (seasonal products) page and choose my Greetabl box + gift combination which will auto-populate the single-page-app product builder for pictures upload and message personalization.

greetabl-case-study-3-Xmas

 

Or I may start with Mix & Match page and pick a custom box for my Greetabl in step 1 out of 2.

greetabl-case-study-4-MixNMatch

 

Then I may pick the gift of my choice which goes inside the Greetabl box in step 2 out of 2.

greetabl-case-study-5-gift

 

Once I have chosen the box and the gift I may proceed to the Greetabl Builder single-page-app developed in React.js for pictures upload and sentiment message personalization.

greetabl-case-study-6-combo

 

In the Greetabl Builder I may customize the box with Instagram or local drive photos as well as From, To and Sentiment text.greetabl-case-study-7-builder

 

In the cart I may checkout or build another Greetabl. After checkout my unique Greetabls will be produced and shipped to all the important people.

greetabl-case-study-8-cart

 

THE PROCESS & THE SOLUTION

Analysis & system architecture design

Client brief containing high-level system requirements and User Story list was converted into system architecture design that could meet all the client requirements.

“We decided to combine a single page React.js application as the product builder with a custom Spree implementation handling the checkout process. Outsourced order fulfilment performed by RR Donnelley was handled with a custom Spree extension using their API.” – explains Damian Legawiec, CEO & CTO of Spark Solutions.

Coding & testing iterative process

As Spark Solutions works in an agile way the project was conducted in weekly iterations. It took 22 weeks to launch an MVP integrated with the external outsourced print on demand and shipping center. Each iteration consisted of several micro-cycles oriented around particular User Stories (developer tasks) managed using Pivotal Tracker project management software – as shown on the graph below.

spark-dev-workflow

Each User Story development and testing micro-cycle was timed using Toggl.com for billing purposes. Each week’s workload of User Stories was screen-shared with the client during a weekly Google Hangout session. Each User Story was either Accepted or Rejected with some feedback for the developer. Only after a green light from a client each User Story was pushed from staging to production infrastructure.

The whole development process is a repetitive cycle of coders and testers working together with a client with the help of Spark Solutions project manager (PM).

“From day 1 you as a client have access to the staging environment with a working copy of the project. You have QA staff (testers) working with developers on a daily basis. As a Product Owner you can add user stories, bugs, accept or reject features anytime. Or you can have our PM do it for you.” – said Damian Legawiec.

“We’re doing Test-Driven Development (TDD) with tools like RSpec, Capybara, Factory Girl and many more. After every push tests are run on our continuous integration & deployment server. Besides that we like to do GitFlow approach with pull requests on Github – every pull request must be code reviewed by another developer before merging to the master branch. We’re also doing static code analysis with CodeClimate to keep the code quality on a high level. Most of our projects reach ~90% level of test coverage.”  – explains Spark Solutions CTO.

Responsive Website Design and its implementation

Mobile-ready layouts design, implementation and testing was a process which took several weeks and was conducted by B/Designers team with cooperation with Spark Solutions front-end developers.

Each page was designed for large desktop screen, laptop, tablet and mobile phone (both screen orientations – horizontal and vertical) for a standard and Retina-ready resolution. Then the PSD layouts were sliced, coded and tested on various devices. But that was not the end of the layout implementation process.

“In order to develop the custom product builder we had to implement and integrate several technologies like React JS, Flux, React Router and Instagram API. We had to overcome challenges like cropping images (portrait/horizontal) on desktop, tablet and mobile. Using uploaded photos, selected design and user supplied message we are generating PDFs that are sent automatically and printed in the RR Donnelley fulfillment center via their API” – explains front-end coding intricacies Spark Solutions CTO.

Production deployment & configuration

Deployment to production environment was followed by basic SEO and performance optimization which are critical for ecommerce success.

End-product solution

Greetabl.com features:

  • personalized product builder and custom checkout process
    • single page React.js application as a responsive product builder ( desktop / tablet / mobile )
    • custom checkout process adapted to Greetabl workflow
  • great user experience
    • mobile-ready clean layout and greatly improved user experience
    • product sections pre-defining product builder elements for the user
      • Limited Editions
      • Holiday (seasonal products)
  • outsourced order fulfilment and shipping handled with a custom Spree extension using subcontractor’s API with order status feedback and shipment tracking
  • admin panel enabling
    • products management
    • promotion and promo messages management
    • CMS for content pages
    • general website configuration

Post-launch monitoring & optimization

Website is being monitored post-launch with tools such as NewRelic for performance monitoring and Rollbar for automatic error reporting. All arising issues and requirements are being addressed in an agile methodology as described above.

Further development

During website development many new ideas emerged and are being developed like more in-depth sales automation and marketing tracking, new feature additions and expansion of the current platform.

TRANSPARENCY, COMMUNICATIONS & HANDS ON PROJECT MANAGEMENT

“The project took almost 6 months to MVP launch. Reshma, B/C Designers founder,  coordinated efforts of 4 different teams and 10 to 15 people cooperating in a variety of roles. She’s invested massive amounts of time and energy into quality assurance of the development process as well as external order fulfillment center integration. It was a pleasure to watch her work and a PM learning experience.” – explained Mike Faber, COO of Spark Solutions.

Reshma Chattaram Chamberlin appreciates Spark Solutions for their meticulous approach to Agile development and for their uncompromising responsiveness. She maintains an ongoing relationship with Spark Solutions and recommends them highly.

“I am very pleased with the work completed by Spark Solutions. They are my fully integrated remote dev team and remain instrumental to the successful development customer solutions, especially when they require a deep working knowledge of Rails and Spree Commerce.” – says Reshma Chattaram Chamberlin.

“I would say their disposition and their ability to try to get stuff done in the best way possible is unique. Spark Solutions seems to have the attitude of wanting to make it right together. I think that’s hard to find in developers, especially offshore teams.” – said B/C Designers Founder.

Transparent and ongoing communications was maintained throughout the 5+ month project:

  • Slack group chat was used for
    • real-time team communications
    • tracking project progress thanks to integrations with Pivotal Tracker, GitHub, Circle CI and Heroku
  • Skype and Google Hangouts were used for weekly or ad hoc video calls
  • Trello was used for quality assurance and tracking testing progress
  • Toggl was used for time tracking and billing transparency

“Spark Solutions are good about sharing their thoughts and working through things, as opposed to just following instructions because we don’t really operate that way. We have a main account manager, a main developer, and then we’re also in correspondence with their other developers. We don’t talk to them directly, but I could if I wanted to. I prefer to communicate with our project manager and our main developer.” – explained Reshma Chattaram Chamberlin.

“I am the pickiest person alive. I can see one wrong pixel a mile away, and I want to know how everything is done. What I love about Spark is their responsiveness and their internal organization. We used Pivotal Tracker for project management and we were able to walk through the whole process, from creating a concept to the actual development. All the milestones we reached got checked off on a weekly call. I like their complete transparency and organization.” – said B/C Designers founder.

“No matter which developers I’m working with, being meticulous and detailed is crucial. I don’t expect someone else to carry my load, and I make sure I’m constantly communicating and checking in. Be really organized on your end because if you’re not organized, no matter how awesome a developer is, it’s just not going to come together.” – advises B/C Designers founder.

TECH STACK & INTEGRATIONS

  • Technology stack
    • Ruby on Rails 4 with HTTP app caching & memcached for shorter page load times
    • Spree Commerce 3.0 – with a custom checkout process
    • Twitter Bootstrap 3.3 – for mobile-ready easy-to-modify layout
    • ReactJS frontend with React-Bootstrap, React Router and Flux architecture pattern
    • Haml, Sass, CoffeeScript – front-end components
    • PostgreSQL, Redis – back-end engine
    • Heroku – cloud hosting optimized for increasing traffic loads with automatic scaling up and down
  • Integrations
    • RR Donnelley: Print, Digital and Supply Chain Solutions – API integration with an external order fulfillment center
    • Amazon S3 – for all file assets storage and trusted, scalable, secure backups
    • Amazon CloudFront content delivery network – for faster page load all over US and the rest of the globe
    • Cloudflare – for a significant improvement in performance and a decrease in spam and other attacks (DDoS)
    • Instagram API for sign in / sign up and fetching photos
    • Mailchimp for building a mailing list and customer loyalty for repeat business
    • Sendgrid for e-mails sent by the application
    • Segment for easy plugging in other services like Google Remarketing, Facebook pixels, A/B optimization tools and many more

CONCLUSIONS

  • Greetabl.com business was automated and streamlined with the right technology, user experience, brand platform and dev team
  • This enabled the startup to scale, fundraise and compete for larger market share as well as bigger ROI
  • New website was beta-tested and optimized for a few more weeks right on time for holiday season
  • With each weekly iteration of the development process – both pre- and post-launch – new requirements arise for UX or business improvement

 

We are your Ruby on Rails & Spree Commerce developers. We offer eCommerce development, integration, customization, migration but also high quality Ruby on Rails application & website development services for heavy loads and demanding users. Spark Solutions founders are both experienced web entrepreneurs. We often assist our clients in a CTO role. Contact us at [email protected].

No comments
Michal FaberGreetabl.com business streamlined by a custom Spree Commerce 3.0 implementation & fulfillment integration

Related Posts

Spark Starter Kit: Rails, Spree, React, Webpack + Hot Reload and more

This week, thanks to the hard work of our CEO Damian Legawiec, we have open sourced our very own kick-off bundle which we use as a starting point for all eCommerce and Rails related projects at Spark Solutions. The starter-kit is available on GitHub and should be very helpful not only to Spree developers, but

Slack Integrations Guide: GitHub, Pivotal Tracker, Circle CI, Heroku, Rollbar

Slack is a great messenger app and a collaboration tool for teams that we at Spark Solutions are using on a daily basis for our internal and external communication purposes. It reduces email clutter and makes our working life simpler, more pleasant and at the same time more productive – as advertised. What is also

Leave a Reply

Your email address will not be published. Required fields are marked *