Distinct Packaging

The Problem

Does this scenario sound familiar? A funded startup with plenty of ideas for a new product hires a top design agency to create their product and a specialty IT firm to develop the technology and they wind up with a product that doesn't quite hit the mark and tech bugs and design inconsistencies abound. This was the scenario that my client, Branch Forty ran into with their latest product "Distinct Packaging" a web site and app that allows companies to design and order their own custom packaging while being able to see a live 3D model of their box throughout their design process. When I came into the fold as a UX consultant, the product was already made but there were a multitude of design inconsistencies and tech bugs due to an initial lack of communication between design and tech in order to create the product. I came in and spent a good chunk of my time redoing the UI design in order to hit an aggressive deadline and foster a better level of communication between design, product and tech. In order to do so, we had weekly calls as a team (which the initial process didn't have) along with individual meetings with product and tech along with both Zeplin specs and old school pdf docs in order to help tech understand what the client wanted. I leaned on the side of clarity over brevity when it came the spec handoff process since the dev team was remote in India. I also learned that because of the amount of effort dedicated to their “Designer Tool” (the UI where a user designs packaging), the e-commerce pages and flows for account creation, project management and checkout were never fully designed and created using an IBM CMS, which was a different site altogether from the Design Tool created by a remote dev team. Because I was essentially working with two different sites, the goal was to tie these two separate entities together into one, cohesive, intuitive environment.

The Process

For this endeavor, speed was at the utmost importance for the client. I leaned on my ability to use my UX eye and best practice while updating the design along with collaborating with the client and using feedback on the business side to weigh important design decisions such as creating a feature tour using Inline Manual, a SASS product for companies to create coach marks, tool tips and feature tours with built in analytics. While the user research for this initial sprint was lighter than I had hoped, I still was able to conduct guerrilla user testing sessions with friends, family and fellow designers who would actually use the product at their companies. We were also able to utilize feedback from trade show product demos with potential clients to refine the product. I tested both the project creation/management user flows and the creation software itself. Due to timing constraints, I was unable to fully iterate on the box creation software due to the heavy financial and technical debt of totally re-vamping the UI, but I was able to make smaller changes to enhance the clarity of selectable elements. However, I was able to consolidate the management and creation user flows which were greatly lacking in clarity for new users. Out of the 7 test subjects, only one was properly able to create a new project, find a previously created project in their order history and get to the checkout screen after designing a box. Every other subject needed directions to complete these tasks. This inspired me to provide feedback on how to optimize the creation and management user flows by providing clearer button labelling, form elements, and empty states which contained very little guidance for the user in the original version.

After creating design concepts based on feedback and my sessions with the client, we would introduce the development team as soon as possible to weigh in on the feasibility of concepts through LOE documentation. I created design specs for them that went into more detail than the deliverables I was providing to the client complete with html/css references and recommendations in order to provide consistency across the e-commerce task flows and Designer Tool UI. Because of time being at a premium, I met with their technical PM on a daily basis and wrote user stories for each feature I worked on in order to alleviate as much “remote friction” as possible since communication lapse across parties is what initially damaged the project before I cam onboard.

The Result

After our initial three month sprint, we re-designed the product to the client's liking, hit our initial launch deadline, and cultivated a healthy relationship between product, tech and design which will help all parties involve not have to re-develop anything again and the client is now satisfied with the experience. They are currently in the process of scaling their business by marketing their product with the new UI for the box builder developed and in production, check it out yourself at distinctpackaging.com (note: Additional UI changes have been made to the live site since I left the project).