Jul - Dec 2018 (6 months)

Story2 Design System

A design system

UXUI Design

I interned at an EdTech startup and helped the product team establish a design system for a faster development cycle and scalable products.
  • Role: UXUI Design Intern
  • Team: 2 Developers, 1 Project Manager

Problem

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.

Team Setup

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.  

Research Process

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:

Design Process

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.

I loved this wall because the entire user flow was within my reach!

Design Rationals

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 expanded color palette (on the left) remained all the colors in the previous palette (with white spots).

Final Design

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.

Fun Side Project: Responsive Email Templates

SEE DEMO

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!

Lesson Learned

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.

Final Thoughts

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.

Wanna grab a tea together?
Connect on Linkedin
More Projects
Jun - Aug 2019 (3 months)
Race to Hunts Point