Spently

Spently is a Shopify App Developer and Partner; I redesigned and rebuilt the front-end of the app's UI.

See Live Site Scroll

The App

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.

Spently

The Old

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.

Spently Spently

The New

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.

New Spently Dashboard

Spently.com

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.

Spently.com Inspiration Page

Code Talk

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.

It was complicated to use, very buggy, and difficult to improve upon for the team. I suggested to my co-devs that we build a new one using React, a JavaScript framework that makes building adaptive and complex web applications super-easy.

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.

Design Changes

New Spently Template Builder

Install it

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.)