My Role
Lead UX designer through end to end process: discovery, user research, requirements, design, testing, support through launch.
Softwares
Figma | Illustrator
Supacolor are the industry leader in high quality heat-transfer printing. Supacolor are trustworthy, high quality, slick, sharp, intuitive and responsive.
Part of the brand promise is being ‘Supaeasy’ and this needs to be reflected in the website UX / UI.
To create a design tool that the user can use to visualise the prints. Remove all intimidation and difficulty. Inspire users by showing the ease of ordering transfers.
Professional garment decorators: Screen Printers / Embroidery / DTG / Brands – Intermediaries and wholesalers need a reliable heat-transfer supplier, with a quick turnaround and low minimum order number.
Crafters / Designers / Hobbyists – Up and coming side hustlers, who need heat-transfers that bring their designs to life, with quality and durability they can be proud of.
Marketers / Businesses not in garment decorating but looking to add merchandise: Influencers, coffee shops, restaurants, bars, motorcycle clubs, etc. Established retailers who need a trusted quality heat-transfer supplier, with quick turnarounds to keep up with stock resupplies.
Currently the user can just click on different sizes and download the templates
How do we want the user to feel?
We aren’t just selling transfers, we are selling the experience, the journey and the destination.
Next I start to map out the user journey. This provides a great insight into the steps that the website should have. It’s handy to do this before wireframing because you can start understanding what it is that the website should do and how the user is likely to use it. I also map out the users emotions to understand how the user may feel at each point of the journey.
Now that I have the user journey complete, I can now start to think about how the app can function for the user.
First I wireframed some of the components, looking at individual atoms and molecules.
When thinking about layout, I wanted the customisable options to be clear and easy to use and take prime position on the page. I have tried to create hierarchy by keeping the required options to the left in white and mockup-specific options (that’ll be used just for visualisation) to the right in black.
This just shows the mock-up tool which will be the prime focus of their new website.