Signs and Banners Designer
Project info
Background
One of InkSofts' core products, Apparel Designer, is a HTML5/AngularJS 1.x web application that allows the user to create custom designs on various apparel. The InkSoft customer embeds Apparel Designer directly into their website giving the visitor an ability to create and purchase custom clothing using a full checkout & cart experience. InkSoft wanted to expand the Apparel Designer to meet the needs of our customers by providing them with a different online designer specific for sign and banner products.
Process and Solution
The process started out with myself, the Product Owner, and the Lead Designer gathering data and doing research about the product. We researched other Sign/Banner designers already on the market, we gathered feedback from InkSoft's Sales and Support team along with our "InkSoft Advisors" group (a user group that helps us with usability tests.) After researching, we began writing out our User Stories and scoping the project out while our Lead Designer and myself then started working on the UI/UX design of the project. One of our goals for this designer was to set us apart from other online designers by making the UX feel like a modern and rich application experience.
Our Apparel Designer is an embedded app into a page and has a fixed width of 960px and is placed inside of whatever container div the user decides on. It feels a little out dated compared to current rich web applications. With the Signs and Banners Designer, we wanted the app to take over the entire web page giving the user a fully immersed moment when they're are designing their product leaving no distractions by surrounding noise such as advertisements, headers, footers, etc.
Once the design was approved, myself and other JavaScript developers started building it out. We kept the Signs and Banners designer in the same app as the Apparel Designer because they were going to share a lot of the same functionality. So essentially, the Signs and Banners Designer was a theme off of the Apparel Designer. The Signs and Banners Designer has a completely different UI. Even though they share some methods, there was a lot of new functionality that had to be coded out. The expected designer will launch based off of a designer theme configuration options. While I architected the UI, the other JS devs, that specialize in the HTML5 Canvas API, focused on that portion. One of the most fun parts about this project was working on UI animation. Animation in web apps can be a tricky thing. You don't want to over do it nor do you want the animations to feel laggy or make the app feel slow. At the time of me writing this, we are actually still in the first phase of this project. Currently, a user still has to manually create all their sign and banner products in InkSofts' backend. We are working on integrations with a distribution partner that will allow a print shop, that doesn't already provide their own sign product, to tie in to this integration and be provided with an extensive library of sign and banner products. We have received lots great feedback thus far on the new designer!