After several rounds of product relaunch, the product team needed a designer to refactor UI design and create a living design system for a scalable SaaS product. The company had two brand guidelines, an out-date and a more recent one, while both of them didn’t specify design details of UI components.
We were a small startup with around 10 people. I was under the product team with 2 developers and 1 product manager. Since my colleagues worked remotely on occasions, we had a daily stand-up on Slack where we put down do-to things and accomplished things. We also used Asana to keep track of individual progress and document our work. After sensing a need for making the priority of my work transparent to my program manager’s, I added a priority label to each of my tasks. It was quite important for me that what I was doing aligned with the company’s agenda.
There were two parts of research, internal and external. For the internal research, I scanned through all the design documents in our Google Drive to better understand brand history. It was also a great opportunity to onboard myself in the new work environment. While doing that, I interviewed not only my team but also the marketing and learning teams to understand how they used the current brand guideline and their wish lists. For the external research, I looked up how other companies build their design systems and synced with the engineering end. With all these inputs, I wrote down a roadmap with clear steps about achieving a living breathing design system and communicates with cross teams for supports.
Here's a list of resource I found useful:
With the product manager’s assist, I analyzed both product and marketing sites and identified noticeable design patterns. Having a bigger picture in mind helped me prioritize the development process for each UI components. Afterward, I researched the best practice of designing components and understand the why of the practice. I externalized all the information through designs that factored brand specifications. When a component involved colors, I checked the color contrast of background and foreground (which often referred to texts). Making sure that my design is accessible to all kinds of people is crucial to me as a designer.
Let’s dive into the first few design changes I made — color palette.
In our original design asset, there were groups of colors with multiple shades. Each group was named after an adjective. From the internal interview, I realized it was important to define the color usage such that my colleagues understood when to use which color. Moreover, I found limited shades in the color groups, especially when designing hover effects for buttons. Plus, because the company was heading toward a visual style full of illustrations, it would be handy in the future if we could provide an expansive color palette to freelance illustrators. Considering all of these reasons, I decided to expand the current palette with the aid of a color generator tool.
The design was under the premise of minimal design change, improve accessibility, and enhance scalability. I followed the Atomic Design structure to organize pages in the master Sketch file.
This end-to-end design project was assigned by our marketing team to effectively deliver various contents to our customers. I started by reviewing emails from Really Good Emails and narrowed down to 14 common patterns. Then, I sketched them both in desktop and mobile versions, designed in Sketch, and programmed with HTML and inline CSS. Debugging took longer than I expected due to the nuances in different email clients. Thanks for my colleagues' help, I nailed it in two weeks!
I wish I’ve known that priority changes were expected to happen quite often in the startup world. One of my biggest takeaway from working for a startup is that always adjust a long-term investment (whether it’s a roadmap or building a system) to both ever-changing needs and the timeframe of the company. Because the focus of the company shifted rapidly, my roadmap of building a living design system didn’t fully roll out. I was too focused on establishing an organized system without factoring the priority of the company - which could be arbitrary on a day-to-day basis. For future reference, if I ever enter the startup world, I will make sure the priority always matched from the top down.
This experience was meaningful to me because I learned a lot about UXUI design details in the process of building a design system. It wasn’t easy to build one, especially when you were the only designer in the team. I greatly appreciate my team gave me a lot of trust and space to grow.