Back in early 2014, we were approached by a sign shop in Upstate NY to concept and create a platform for designing race graphics online. Being experienced in both the sign industry, motorsports, and web-based application development, we felt fairly confident that we would be able to produce a tool in which they could use to maximize profits not only on the down time of the off season, but also on the mad rush right before the seasons start.
The challenge was obvious from the beginning. With the amount of different elements that go into laying out a race wrap that fits the cars’ varying measurements, plus creating designs that ultimately look as they did on screen, we were forced to break down each step and simplify the process from start to finish. There was a large amount of data the client needed to know so that when creating the wrap, they felt comfortable that it was to the customers specifications.
We understand tech, apps, web, and can easily relate to how all of that works on desktops, tablets and phones without thought. But that is not the case for most users, and sometimes its difficult to see “the forest through the trees” when going through the design process, so we went through lots of demos with users who knew absolutely nothing about motorsports. We also worked with some users who actually did understand the difference between a door and quarter panel, so comparing those notes was key in the process. That allowed us to get an idea of the overall UX, and where we needed to simplify our product. We ended up consolidating the entire application into 5 steps (down from 10 originally).
Our Stab at SVG
Our client uses FLEXI, a sign making software strictly for large format printing. Basically, it is a blend of vector and raster tools, however some of the processes and attributes vary between that and Adobe Illustrator. We figured out that if we created the car templates and graphics in Illustrator, exported them as SVG files, and then once the cars were designed and submitted by the users – upload them as .eps files, those were able to be opened in FLEXI to scale with everything preserved. As you can imagine, much higher quality for the end user because they are working with full vector elements, and also better for our client because with minimal adjustments, the wrap is ready to print. As long as we organized our Illustrator files and named them properly, we could control what was editable online and how it behaved.
Sometimes it can be tricky deciding the best platforms and languages to use when developing a product. With so many options you really have to read between the lines and do research to figure out what route is optimal for your clients budget and requests. At first our team decided to use the PHP framework Code Igniter to build the backend of Atomic Wraps because it had proven its ground over the last few years. We of course used Linux, and MySQL along side PHP as many other companies do. Once we began development our team quickly finished the front end and was now beginning to work on the communication between the front and backend of the site. It was however brought to our attention by one of our developers that there was a newer, much more streamlined PHP framework available known as Laravel. Our team did research into this new framework and was so greatly impressed by it that they spent their own time to convert the WebApp from CodeIgniter to Laravel because it would improve the performance of the app greatly. As a technology company we understand the need to always stay on top of the industry when new technologies arise. Even though it may cost us time and money our team wanted to ensure that our client would not be left in the past.
We know that this application is far from finished. We have yet to put a full season into users trying to order wraps for their teams, so once we go through that we should get lots of feedback on what to improve upon. In the beginning stages of any product, budget is king. Most clients don’t have unlimited cash to go into a product that is going to automatically be successful, so as this starts to generate money, we can dump that back into new features and enhancements that make sense. The most useful elements of this product aren’t built yet, but our plan is to let the users dictate what they need, not us trying to guess.