With a site in desperate need of repair–functional, yet dysfunctional across many levels–many of us at Sparxoo came to the conclusion that sparxoo.com was ready to be laid to rest and born anew. Armed with two enhanced weapons at our disposal–sharp, cutting-edge design and precise, creative coding–we at Sparxoo were ready to drop the bomb and do what we do best: make it rain. In this post, we’ll discuss our process from beginning to end, detailing how we we transformed our site from mediocre to badass in a matter of weeks.
The first step in our site’s makeover was realizing there was a problem to begin with. Our site used an outdated framework, incorporated images that didn’t align with our brand, and didn’t possess the clean, modern look that we wanted our site to exhibit. Understanding that there were issues to be fixed, we took to the drawing board to begin discussing new concepts for a completely new website.
To gain beneficial insight, and to ensure every member on our team had a say in what our new site would look like, we surveyed the team. We asked probing questions about what people liked about our old site and what they wanted to see on the new one. What was the number one response from the team? The new site needs to have “sick nasty animations.” With this valuable information at hand, our badass Senior Director of Strategy & Business Development, Adrienne Morgan, developed a sitemap and much of the site’s content so we could take a content-first approach. Using a content-first approach, we were able to create our site’s design based off the content rather than develop our content based off of the design.
There are many reasons as to why one should consider taking a content-first approach–in fact, too many reasons to list within this article, but the most important one is that your final end product (i.e. developed website) will have a much more consistent look and align better with the original design.
I can definitely take a deep dive and expand upon the pros of a content-first approach, but for the sake of brevity, that’ll be a post for another time.
Design and Development
With content at our disposal, it was time to tackle the architecture of our site through a number of creative brainstorms and wireframe sessions. Taking a couple of key considerations into mind (mainly how the site would be accessible, yet also unique and appealing) we came up with a final concept to be translated into graphic form by our creative designers, Josh and Palmer.
With a tight turnaround scheduled for development, we found a few tools to be particularly helpful with completing the project on time. The following pieces of software were integral in terms of enhancing developer efficiency while building the site:
- Gulp – Perfect for automated CSS prefixing, SCSS compilation, automatic minification, and instantaneous page reloading using LiveReload.
- Beanstalk – Allowed developers to work as an efficient team. Acted as a remote platform for Git while providing the ability to make automatic deployments to our staging server, successfully eliminating the need for FTP.
- Sublime Text – Sublime snippets and plugins such as Emmet allowed us to extend what would be 2 characters of code to 20, saving an enormous amount of typing time as a result.
Using the combined force of the team and the efficient use of dev technology, we were able to knock out development in 2-3 weeks and launch by our scheduled date with a solid end product. Lo and behold, sparxoo.com was reborn.
Although the site is robust, we’re always looking for ways to improve, using our keen eyes for the details. Throughout the next couple of weeks, we plan on making iterative updates to keep our site clean, fresh, and up-to-date. Take a snapshot now while you can, because even newer, more awesome things are on the way.