Problem: As Pixlee has grown over the years, we've added more engineers to the team and increased the total output of our work. However, as is the with the nature of smaller startups, the quality of the code hasn't kept up as the number of features shipped and number of lines of code written increased. It was especially apparent on the UI side of our app. We had too many inconsistencies with our UI and the whole product lacked visual coherence.
Solution: One of the things I was brought in to fix and improve was exactly this area of Pixlee. My background in design and front end engineering was a great fit for this task. What we needed was a proper design system and a style guide to build coherence and consistency in the UI through all parts of Pixlee. We also needed to unify and clean up the JS/HTML/CSS for these components so that we were using only one variation of them. We wanted to save time by not having the engineers keep recreating these components from scratch and have every version of it be slightly different from one another.
During the first few months at Pixlee, I worked with the designers to build and improve our Design System and then started creating our Style Guide. We wanted our Style Guide to be "live" so that we could visually see what the component would look and behave like.
It's internally hosted for now so I won't be able to link it here but I've attached some screenshots to show what it looked like. It's still incomplete and a work in progress as it's something brand new for us and we're planning on adding new components and functionality to it down the road.
