Previously this custom CMS, Spark, was built with Sinatra (Ruby) and Vanilla JS as a small project to help manage and maintain client websites. The websites existed as static Jekyll sites, and the CMS allowed users to make changes to the content in the site YAML files. The company didn’t realize how quickly the demand would grow for the CMS. In the beginning, the application was very limited in its functionality – users were unable to format text unless they knew HTML and couldn’t update colors unless they knew what hex codes were.
I worked on reworking the entire application, breaking out the basic form into more views to improve the user experience. And instead of presenting users with a plain form, I implemented features like a color picker, icon picker, and rich-text editor, to make updating customer websites easier and quicker. My improvements automated the process of updating customer websites by cutting back on the dev support requests from 20+ a day to 2 or 3 a week.
Technology Used:
Sinatra
Ruby
JavaScript
SASS
Shell Scripting
Before:
Initially the CMS had a layout that was very simple and lacked stylesThumbnails for images also didn’t retain their aspect ratio
After:
For the newer version of Spark, I created a sticky header navigation so they could easily save and preview their changes at all times, and a side navigation so they could easily jump around while editing a website.A color picker was added so users could easily update site colors. Other controls and drop-downs were also added to make it easier to adjust site settings (instead of relying on users to know what validations were in place)For adding Font Awesome icons to sites, such as the social media links in the footer, an icon picker was added to make it easier to navigate and add icons.Previously, users had to submit support tickets whenever they wanted list items removed or added to a site (i.e. adding/removing a social media link to the footer), so I rolled out some JavaScript functionality that gave users the power to add/remove items.Previously, support tickets were submitted to developers any time a user wanted to format text or embed a YouTube video on a site. I added CKeditor to the application, so users could easily format the website text on their own, as well as embed Vimeo and YouTube videos.
