Design Systems Experience
.jpg)
Background
I have a deep passion for UX design systems. It's one of my favorite areas of of expertise within UX design.
My design system experience foundation stemmed from working at Linkedin on the Design Systems team creating the documentation for proper usages for all 35 components. It was here that I was mentored under designers who had been dedicated to the subject for years. Read more about this project here: LinkedIn Documentation Imagery
Lotus Design System - Zulily
I took the initiative to own the project of creating a brand new design system from scratch for Zulily, who had a very outdated system in need of updating. Complete with foundation elements such as type, color, and spacing ramps, I used these atomic elements to combine into larger components. I then drafted best practice guidelines for usages for my fellow UX designers to adhere to for consistency.
It was generally designed to enforce consistency and rapid design, while still allowing the flexibility for creative solutions to unusual cases.
Personality workshop
Before starting anything, it was important to conduct a workshop for the desired visual personality of our design system. Below shows the average results for our discussion and handouts distributed to the design team, as well as how those values translate to tangible aspects such as border radii and spacing.
Methods and guidelines for foundational values
Type size guidelines
- Headers only to be used in greyscale colors
- Headers should generally be left aligned
Line height and wrapping (W3 Success criterion)
- Line height (line spacing) to at least 1.5 times the font size
- Space following paragraphs to at least 2 times the font size
Spacing
- All values are an increment of base 4 (4*n).
- No two values within 25% of one another. Any less than that becomes too granular and makes it harder to make quick design choices
- Horizontal spacing should always be <= 24px desktop and 20px mobile
- Vertical spacing such as headers should be between 8px-16px
- Spacing above and below an element or section must match
- Mobile spacing: 20 or 24px spacing on either side, generally space things out for more breathing room
Color Ramps
- Components are built out to adhere to the AAA standard of Web Content Accessibility Guidelines (WCAG).
- Colors all hand picked using the HSL format. In order to avoid colors being washed out, colors on the lighter and darker ends of the spectrum have higher saturation.
Components
Buttons
In order to convey the desired "friendliness" aspect from the workshop, I decided on fully rounded border radii since it has a more approachable personality vs. sharp corners which are more associated as being professional and serious.
Text inputs
Tiles
Zulily is an e-commerce site that displays many products on the same page. I created a reusable component for how the product tiles were to be displayed across all applicable pages for both mobile and desktop.
Notices
Practical usage tests
In order to test and make sure that the values created would work well in practice, I mocked up quick redesigns of older Zulily pages.
Account information page
Event pages
At this point the project got put on hold 🥲
Unfortunately at this stage of the project, it was put on hold when Zulily began doing waves of layoffs. The due to an archaic business model, company was bleeding revenue and went into panic mode about figuring out how to improve monetization efforts.
I had a blast creating what I was able to, and the finish product would have been a major improvement from the current visuals.