Ruten Design System
Ruten, as a joint venture between PChome and eBay, is one of the largest e-commerce platforms in Taiwan. It provides customers with an easy, fun, secure, and free online shopping experience. Ruten launched its website before the theories like design systems or design guidelines and launched its App after years. This made the interfaces and experience very disconnected between different platforms because different designers designed these parts at different times. The major problem we were facing was that a lot of pages and components were not in sync. After I was in Ruten, my team leader gave me the responsibility to work on our product design system with another designer. We want to create more modern interfaces while building a scalable and flexible system. I was very excited because I got a chance to shape and build a new face for our product.
A Design System is the single source of truth that collects a set of principles, visual design foundations, reusable components and allows the team to build any consistent applications.
- Consistency in design
As our product features expand, it has been through different designs and different phases. This makes our product lack consistency and feels like a different company across all platforms. To avoid this inconsistency in the interface design situation, we need shared principles and rules for us to follow.
- Efficiency development process
Before the components method in mind, developments have to create new components that will not be used again for every project or feature. But with the design system, designers and developers can focus more on quality and what users need because they are no longer need to reinvent the wheel.
- Shared values and a single source
Not just the design team needs some documentation, product managers need it too. It is also essential for product managers to know which components can be used and all the dos and don’ts about them when drawing wireframes and making better decisions for the product and users.
I was part of the core product team as a UI/UX designer. I took the whole responsibility for the Design System, including maintaining and defining the design system, writing the document, building the sketch UI Kit library for the design team. Alongside, I have to comprise with another UI/UX designer about the Design system and developer team about hand-offs.
- Consistent user experience across products
We want to make the design more consistent across our products, which is especially useful when users reach multiple platforms. Our end goal is to be able to make our products look and feel like they were following the same design language.
- Share the values of the design system
We want to share the design system value with other teams like product managers and developers to create an understanding between them of building the consistent look, feel, and experience of our products.
Tools we used: Sketch, Zeroheight
Sketch is a powerful design toolkit for creating interfaces. Since our team uses Sketch as our primary design tool for times, it's a great choice to start our design system.
We use Sketch Libraries feature to sync all the styles in our design files. Any Sketch files can be used as a library, any object can set as a component. Libraries allow linking components, symbols, layers, and typography styles between multiple files, which means that we can update styles in just one click since all these projects use libraries. This helps us create a single source of truth and save us lots of time to sync all the change we did to our design.
Design System contains various layers — Colors, Typography, Layout Grids, and components such as Buttons. We want our UI files to be clean, clear, and the most important is easy to maintain ,so we create four sketch files instead of one as our Sketch libraries resource to keep things organized.
Sketch library structure
- Color Palette Library
This contains all colors palette and layer styles used in our product, such as primary colors, secondary colors, and layer styles for surfaces, errors, success, etc. To control the colors, other libraries can only use colors or styles from this one.
- Icon Library
To control the icons, other libraries can only use icons from this one.
- Desktop Component Library
This contains desktop typography and components.
- Mobile Component Library
This contains mobile typography and components.
Zeroheight is a collaborative online editor that helps us create and easily maintain design system documentation. It can syncs with Sketch through the official plugin. That means that whenever we change the styles, typography, or components in Sketch, we just need to upload them through the plugin and the documentation site will automatically refresh. This is a helpful feature because we don't work additional time to fix and update another different document, we only need our Sketch file to be the single source of truth.
Document on Zeroheight
Document on Zeroheight
Design system process
To create a design system, I started by figuring out the state of our products' existing styles and elements. This helped me understand which components we used the most and should be built first while we growing our system. we want to make sure why those components or colors should exist in the first place before we build them. Because we don't want to create a heavy design system that contains a lot but only used part of them, we decided that we wanted our Design system continuous improvements and small additions over time.
To begin with, we started by defining basic atoms like font, typography, color palette, layout, etc. Foundations are the base layer; therefore, changes to the foundations will also modify the entire system.
Color defines the visual identity. We used bright orange as our primary color to match our brand. And we also define some semantic colors like error and success, which have assigned meanings and are used consistently throughout our products to set meanings for users.
Design system foundation
Since we build off our foundations, we moved to our next step — building components. Each components' appeal is based on the combination of our foundations.
Design system component
To create a flexible and shared component library, we must consider responsiveness. It's important to design user interfaces that work in different browser or device widths. When resizing the constraints, the elements pined in the right place where you want them to be.
Create dynamic button symbol in our sketch library
Ruten design system presents the documentation for every foundation and component to teams and ensures everything stays consistent with the design. This is the most important step of all because it defines the experience of the Design system, how teams will use it, and what developers will develop based on what we wrote on it.
We found a perfect redesign project as our first test drive for our Design system. Sometimes you think every piece is perfect but when they combine somethings just not quite right. So this really helped both me and the developers to validate whether those components work or not before we finally launch. If they didn't work, I would come back to adjust the foundations or components again till everything is perfect.
Shipping Center
Shipping Center
Shipping Center Mobile
Shipping Center Form
Few months after our Design system launch, we already used it on two projects. The system will slowly grow through it being used on more projects and contain more components. As it grows, we received some feedback, made a few adjustments or improvements, maintained the documentation, and repeated. We planning to replace our existing appearance one by one with upcoming redesign projects and eventually create a consistent user experience.
In the process of building a Design system, we imagined everything we could at that time and we thought it was perfect enough to suit all the situation. That's not exactly what happened.
When our Design system used in real projects that have various user situations, our components weren't complete enough to cover all the scenarios. And that is the moment we aware that the Design system must be adapted to the changing needs of the products and can scale for future use cases. We must step back and shift our mindset from creating an outstanding Design system to fulfilling user's needs. With that in mind, we scale the options and make more complete atoms to combine and create components that work in different situations.
Building and maintaining this Design system took a lot of effort and there was a lot of back and forth, but it was definitely worth it.
