Spently is an app on the Shopify App Store that helps online business owners create email templates that go out to their customers once they’ve performed a specific action. When you order something online, you’ll receive an Order Confirmation email; these emails, with the right content (like links to recommended products) have the potential to bring in a ton of revenue and build on-brand communication with customers.
I started working at Spently at the beginning of May 2016; the design wasn’t consistent, the front-end code was chaotic and error-prone and the build processes weren’t helping. Here’s what the in-app UI looked like.
From a design standpoint, there were many ways for us to maintain the same general layout so that returning users wouldn’t feel out of place, but make significant improvements to the consistency of considerations like aligment, typography and color.
The in-app UI is vitally important, but to bring in new users we chose to redesign the website as well. The website and UI redesign were released at the same time, just as we were being featured in the Shopify App Store. This resulted in a huge increase in new users.
It didn’t make sense for me to try to improve the CSS architecture of the app; it was too all-over-the-place. Instead, I rewrote all of the CSS and JS from scratch using SCSS, and ensuring scalability with DRY and BEM principles.
Using Gulp as a task runner, I was able to write clean, cross-browser compatible code that took the site from a footprint of over 2mb to just 80kb (and that’s just the compiled CSS).
The Template Builder
At it’s core, Spently is a template builder for emails. Usually transactional emails that are connected to your Shopify store, these emails have the potential to bring in tons of revenue. Unfortunately, the builder itself was the weakest part of the Spently app.
As I write this, we haven’t completely phased out the old builder but once we do users will be downloading 5mb less every time they visit the template builder. That’s an enormous performance increase, and we’re expecting our users to really like the new changes.
The best way to really understand how Spently works is to try it out. If you have a Shopify store you can install it for free (there are paid plans as well that offer more themes, more options, etc.)