UX Designer/Developer
Overview
A Design System and Website for a Global Chemicals Company
In the Summer of 2018 I was hired by Michelman to be an in-house UX Designer/Developer on the Strategic Communications team. The main goal behind my hiring was to create a UX Design System, and then to eventually implement that design system in the creation of a new Global Website for this globally based chemicals company.
Not only did my team and I achieve these goals during my stint at Michelman, but I also left the position in a better place than I came into it, creating systems and culture that would serve the team well after my time there.
read more
design SysteM
Inside the
Michelman Design System
I’ve always been a huge design system nerd. Ever since Brad Frost wrote his book on Atomic Design, my brain has shifted to think in a similar way. The Michelman Design System (MDS) was creating using many of Frost’s pillars of Atomic Design, while also implementing some best practices and well researched structure, math, and syntax.
The atoms, molecules, and components in MDS were designed in Sketch using their symbol system. As they were designed, they were actively being developed in HTML/CSS(Sass) and PHP, ready to eventually be implemented into the new website (more on that below). A large challenge during the creation of the system was balancing what should come first – both MDS and the new website were being built at the same time, so it was a real “build the plane while you fly it” situation. However, in the end, I’m really proud of what the team accomplished.
My role in the design system was as the architect – I was responsible for ideating, designing, coding, and iterating on each atom, molecule, and component. Highlights from MDS include an 8-point type system, a system wide scale for sizing, and the overall accessibility of all of the end components.
WEBSITE
A Long Overdue Web Refresh
The previous iteration of the Michelman website was created over 10 years before I came aboard, so a large goal of the Strategic Communications team during my time at the company was the creation of a new website. I knew going into the project that we needed to do a lot more than just build a website – we needed to build systems and processes alongside it so that the team could successfully and easily continue to build onto and maintain the site for years to come.
The site itself was written in PHP, integrated into the framework of the ProcessWire Content Management System. Going into this position I knew enough PHP to successfully create WordPress templates, but this was a whole new experience for me. I took to PHP fairly well, and consider it one of my favorite learning experiences to this day.
As the design system was being built, we were actively integrating it into the new website. We started with a shell of a site, utilizing some of the basic tenants of the design system we knew we wouldn’t be changing (colors, fonts, imagery) and folded in more advanced components and template structures over time.
Because of the length of time between building the old website and the new one, there was a lot of new content and company lore that needed to be discovered and put into the new website. This was a full team effort – I was placed in charge of delegating tasks to our interns, who did a wonderful job diving in and figuring it out. We interviewed sales staff, upper management, and plenty of other departments, asking them what information was out of date on the current site and made sure the new one served the company well.
The new website was launched in late Summer of 2020, and has served the company well ever since.
Continuous Improvement
“This Project Will Never Be Finished – By Design.”
It wasn’t enough just to build a new website and design system – we knew we wanted to implement systems so that – going forward – maintaining and improving the website was easy.
I researched some of the best methods of continuous improvement, and really fell in love with Gitflow. Gitflow is a particular way of using Git and GitHub that allows multiple developers to stay organized and productive, all while steadily moving forward on development and improvement of a product. We implemented a steady weekly schedule, where we would identify improvements or fixes that needed to be made, and then push our changes into the live site at the end of every week.
This process served us well for multiple reasons. One, it kept us on a steady schedule of improvement. It’s easy to get stagnant after launching a site, calling it “good enough” and moving on. We wanted to make sure our site was always evolving for the needs of the company, and this process let us do that.
This process also had the obvious effect of version control with Git, which wasn’t something that existed for the previous site.
digital marketing
A Man With Many Hats
Although my main goal during my time at Michelman was the creation and maintenance of the Design System and Website, I was also tasked with helping to manage many of the digital marketing operations of the department, including Analytics, Google Tag Manager, Email Marketing, Landing Page creation, and Lead Management.
This was another opportunity in which my breadth of expertise across the different facets of digital marketing came in handy. Of particular note was a new content publishing process I oversaw. With the new website, we were able to create a new system for sending Press Releases and News stories to our email lists, which (thanks to the website and Pardot) we were able to divide into different buckets of interests which aligned with our multiple business sectors. This drove email engagement up, since we were no longer sending emails people weren’t interested in.
Do we seem like a good fit?
Let's Do This.
I am currently looking for remote opportunities working with teams as passionate as creating amazing things as I am. If you think we're a good fit, I'd love to hear from you!
inquire with us