In anticipation of some media coverage the founder of Snowflake Stories LLC approached me about doing a redesign. A fresh coat of paint so to speak.
For most projects this often ends up being an UX heavy buildout. Because we had approached UX first, we had a bit of a different situation. We had more of an UI heavy buildout in front of us.
I was not in any way worried about the amount of time it would take to accomplish updating our front-end code on our future designs. This is because we had built out the site largely on the built in components of ZURB Foundation. This is a front-end framework and a design system in its own right.
We hired Marcus Handa to work on the designs and I worked with the founder to develop a set of goals for the redesign. Marcus recreated our core pages. He also payed special attention to our character builder and PDP (Product Description Page).
Marcus took our current design and recreated it in a tool called Sketch.
He revised the typography, spacing, white space as well as color selection.
At the end he brought in carefully crafted iconography, and we went through several revisions.
For example, we wanted a CTA (Call To Action) button that would stand out on each page. Most of the interface was flat and having a paper cutout style. Here he applied some subtle gradients and shadows that created a bit more emphasis on screen.
At this point it was useful to be able to make quick revisions and share them with the Founder using Sketch. He was also able to approach some decision decisions outside the confines the existing site.
Now the sweet spot was that even before those sketches were final, I was able to start modifying our front-end code.
The project was architected using ZURB Foundation and extensively used Sass variables for color and spacing. Because of this I was able to start making updates as we went through the design process.
We updated our Sass variables.
Our front-end code updated automatically.
Our design system was able to generate a different variation of the website.
There are two big advantages to using design systems engineering in a project like this.
First, when you approach UX or UI heavy buildouts, you don’t change much of the underlying code. It is simply a matter of updating variables.
Secondly, if and when SnowflakeStories.com decides to expand to other products or platforms (such as iOS or Android) we are already most of the way there.
Our consistent set of color and spacing variables can easily be changed and ported to other systems.
Did you enjoy this post?
My name is James Stone and I am a Senior Software Developer at Futurice in Helsinki, Finland. I typically give talks and write about Design Systems (especially with React), React, TypeScript and how to become a better developer. If you would like for me to send you an email every time I publish a new article or talk, please join my email list. I also will occasiounally send out some secret list only information or offers. I expect the frequency to be about one or two times per week.