BACKGROUND.
We recently developed at WeaveUp a new way to customize designs by channels. I speak about the experience on this blog post.
In the textile world, clients need to have ways to manage colors of designs to make them appropriate for printing. A few common ways to do this are separating colors, using HSL and, channel customization.
Task
As the lead UI/UX and Branding designer for this project, I was in charge of creating the user flows, worked closely with my team to create personas, branding and collaborating with stakeholders and the development team to ensure that the look and flow matched with the technology.
User Interviews.
We kicked off the project by interviewing the client and the client’s designers to better understand the challenges and needs of working with channel customizer flows.
-
“We need to upload up to 12 files per job, uploading one file at a time will cause a lot of delay in the process”
— Client's Designer
-
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.
— Client
Reference & Inspiration.
As this platform was created for designers, primarily, we went to the most popular design softwares like Adobe Photoshop and Illustrator. We took in consideration some of the tools, names, and icons used in these programs to help the designer feel like they could expect similar results on the platform.
Wireframes & Workflows.
It was important, to minimize errors, to create dependencies over every step. For example, the customizer only works with PNG and TIFF images, so it was important to not only create appropriate content, but also ensure that the uploader only allowed those types of files. This technology, at this time, exists in all browsers except for Edge. So, we created an error message only for Edge.
Steps are greyed out until the previous step is completed, clear, simple instructions are used to ensure that the client understands what is expected of them. As steps are completed, clients have the option to go back if they wish to, and verify that all of the information is correct, when they believe they are done.
Once V1 of this customizer starts getting use, we plan on using user feedback for creating in V2 a bulk uploader {for more than one design, with multiple files} by doing one of many ideas such as preselecting steps for a collection/batch, naming things, etc.
Icon Library.
For this project, we used Element.io, as this is the same system we are going to use for all future projects and are migrating to for our existing ones. In combination with custom icons for our specific needs {created as SVGs}.
Style Guide & Branding.
For the branding, I developed a logo that encompasses design customization and could be reused through our various clients. We went through a few iterations of this product with the teams and the client to ensure we created the best solution. Before handoff to the Development team, I created a detailed style guide to assist with the front end development process.
Results.
This product is scheduled to launch in September 2019. This new technology will allow WeaveUp to increase the number of clients that have designs that are not color-separated which is about 70% of the business.
