After several rounds of product relaunch, the product team needed 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 rebranded one, while both of them didn’t specify design details of UI components.
We were a small startup with around 10 people. I joined the team as the only UXUI designer to mainly help the team unified UI components through building a design system and improving user experience. I worked closely with 2 developers and a product manager. We had a daily stand-up on Slack where we put down do-to things and accomplished things and used Asana to keep track of individual progress.
I started with understanding the internal need/usage of the design guideline and brand history. I skimmed 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 also interviewed my team, the marketing team, and the learning team to understand how they used the current brand guideline and their wish lists.
After that, I moved on to understand the design guideline from the perspective of users and a product. 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 component.
As the team hadn't developed a process for qualitative user research, I researched on users' behaviors through a tracking tool called Lucky Orange and identified the usability issues. To spot the UI inconsistencies, I dived into the Web Developer tool from browsers to inspect the variants of the same components.
I looked for the best practices for building a design system and designing UI components. With all these inputs, I wrote down a roadmap with clear steps about achieving a living breathing design system and communicated across teams for supports.
Here's a list of resource I found it helpful:
With the limitation of the team size and resource, the constraints I got from the product manager were minor design change, accessibility, and scalability. Thus, I decided to draw the focus on the hierarchy, states, and color contrast.
Because of the technical limitation, we relied heavily on the modals to mediate most of the instruction to guide essay writing. Introducing a clear hierarchy to the information architecture made the information less overwhelm and more accessible to our users. Plus, applying one typography scale across modals the product more scalable.
Defining expectable states for clickable components brings the product to another layer of accessibility. From the design check, I noticed that some of the buttons (despite the same UI) had various states, thus I experimented with state changes through animations, hoping to communicate them accurately with the PM and developers.
I remembered being called out by my product manager once because I spent TOO much time on the button states. Thinking in retrospect, I could have played it by ear and not built comprehensive states until there was an actual use case worth investing time. Lesson learned!
When a component involved colors, I checked the color contrast of background and foreground (which often referred to texts). Making design accessible to all kinds of users is crucial to me as a designer.
There was an emerging debate around whether the team should build an app version of the tool. While considering our team size, we decided to focus on making the web tool responsive. The current UI hadn't yet tailored the layout for different screen sizes, so I played around with a modal to envision it to be adaptable to different devices.
In our original design asset, there were groups of colors with multiple shades. Each group was named with 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, while 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 and documented the meaning of the colors.
Tada! Here are the UI library I built in 3 months. I followed the Atomic Design structure (i.e., Atoms, Molecules, Organisms, Templates, Pages).
One day the Marketing Director asked me, "Hey Lilian! I heard that you know how to code. Do you do html?"
"Yeah, I do! Is there anything I can help with...?"
So here comes this end-to-end design project. The team needed to deliver various content to our customers. I started by analyzing emails from Really Good Emails and narrowed down to 14 common patterns. Then, I sketched both 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. It made the work more meaningful and motivated!
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.
