My Role
Creative DirectionUI Design
UX Design
Art Direction
Motion Graphics
Overview
In a perfect world as a UX/UI Designer, an extremely cool client, with an incredibly expressive brand would come to you asking for a new site. Then with an ample timeline you can do a site audit, develop user journeys and personas, have several rounds of wireframe revisions to truly account for the pinnacle approach to the site. Finally when that’s all said and done you get to explore many UI possibilities and page layouts that take a brand from being good to great.
Unfortunately, that’s almost never the case. The reality of the world we live in as UX/UI designers (especially in E-commerce) is everything has to be quick, efficient, and reliable. Which is right where this project started.
I found myself, and members of my team doing a lot of repeat work. We’d get a client that needed simple changes to a website done yesterday. So we’d have to create wireframes based on their site capabilities and flesh them out with our new approach for each and every project with each and every client. It was rarely something substantial, and usually quite easy. But it was always time consuming. Using default Figma files for Luma, Magento, Salesforce, etc were out of the question. They were rarely built cohesively, they didn’t have any flexibility, and they were usually very difficult to dive into and understand.
So I decided to build a wireframe design system, that had (almost) everything we would ever need, pre built in, that just needed a few toggle switches and minor customizations. It would be based on overall UX best practices. And it would be preset with solutions that we encounter most with our clients. This Wireframe Design System worked great. It turned projects that would take days into hours, sometimes less than an hour. It was utterly efficient. That efficiency allowed for something that we always want as designers… more time for creativity.
At the company I work for, we often have clients who just want a facelift from the base template. They want it branded, but they don’t have the budget for something incredibly custom. This opened up a new leg to my project.
Eventually Figma rolled out more capabilities, the main one being Variables. This new development opened up many more possibilities that allowed me to expand the current system. I could create different states. Utilizing the same components I could have a wireframe state and an expressive “branded” state. But we didn’t stop there. Expanding on those same variables, by simply changing a few base colors and swapping out a few images and logos, I could have a fully branded white label website in a matter of minutes.
I brought this system to my team, which turned out to be exactly the type of thing they were looking to expand to. We are now in the process of building out a 1:1 system where any change I make in the design side, will be an easy change in the dev side, which could turn a project that would theoretically take 6 months from design and development, and cut that down to a matter of weeks.
This system is called Sprout.
