channellarge.jpg
 

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.

Screen Shot 2019-07-28 at 5.04.51 PM.png

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
I need for the platform to allow color-customization within channels so that colors can interact together within the design
— 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.

event-adobetraining.png
channel-01.png

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.

ui-02.png

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.

flows.jpg

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.

channeluploader1-02.png

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.

SCREEN-01.png