When most people think of a heavy UX change on a site or app they often think about the visual design first. Initially there might be wireframes or other quick thoughts as an overview. But often teams start think in terms of color and visual design right away.

On SnowflakeStories.com we took a different approach. I have used this process on several projects and I like to call it a Designer Last approach.

What that means is that from an UX perspective we built out most of our Design System. In our case, because of our use of the JAM Stack, our front-end code resembles the implemented app.

Our process was to create a living front-end coded version of the website. Then we used Angular and Firebase to start build out the pseudo-back-end. What that means is we had most of the UX patterns, pages and layouts well defined before we took one step towards functionality.

The site was functional. However, it was not as refined as other products in the sector.

This is when we brought on an UI Designer, Marcus Handa, to put a new coat of paint on the site and app.

Marcus took our key pages and addressed several things. He approached things such as spacing, white space, typography, colors, and iconography. In our project these were the elements that brought together a polished visual design.

He worked in Sketch which made it easy to take measurements and get at the exact color values. Using a tool like sketch gave us a direct representation of what the final designs would look like in a browser.

At the end, it was a simple matter of getting at some of the values using a tool called Zeplin, and updating a set of variables we had used in our build system. Overall, not much CSS had to be updated and our visual design had undergone a radical improvement.

So much in fact we won a national award for the site redesign.

Why not just have Marcus design the entire site from the start?

Although this seems to be a logical approach, I have had better experience in projects when we bring in a visual designer on the tail end.

Doing so has a few interesting byproducts:

  1. Most of the user experience of the project can be solved. Your visual designer can focus on the visuals, rather than reinventing the wheel.
  2. It places numerous constraints on the project. The designer has stronger intentionality behind their decisions.
  3. It separates visual design from user experience design. There is a spectrum upon which designers focus. You should focus on their core strengths rather than having them try to do everything.
  4. It saves time by changing variables rather than building everything from scratch. But you must take the time to create a proper set of front-end code that uses Sass and other variables in your build process.
  5. It places a constraint and limit on the vision for the project. Sometimes it is easy to get “left field” ideas to solve problems. Designers are very creative and fantastic problem solvers. By limiting the scope you limit the “left field” ideas and the time spent defending them.

Design Systems Engineering gives you the ability to take new approaches.

Since you are building a system rather than a cobbled together set of HTML, CSS and JavaScript (plus the back-end stack) you have much more control.

You have control over UX heavy changes and day-to-day maintenance mode. It allows you to bring in a designer first or last and allows you to make the best decisions to push your product forward efficiently, consistently and professionally.