Overview
Redwood Design System is the founding design system for First Republic Bank's internal systems and platforms. The component library helps the front-end engineers and designers expedite the process of development.
Project Info
I led a team of 5 to build the product from 0 to 1.
■ Date: March 2022 - December 2022 (9 months)
■ Users: Developers & Designers
■ Role: Product Manager, leading a team of 2 UI/UX designers, 3 front-end developers
■ Tools: Figma, Figjam, Jira, Confluence, Storybook, Material UI
■ Technologies: Javascript (React), HTML, CSS
Achievements
▌29 components: 29 UI components were built for our front-end engineers to simply import to their code base.
▌7 demos & workshops: The workshops were not only for training purposes but also for advocating the idea of design systems and seeking partnerships.
▌6000 users: The product has impacted 6K users by providing a cohesive UI/UX experience.
▌7 demos & workshops: The workshops were not only for training purposes but also for advocating the idea of design systems and seeking partnerships.
▌6000 users: The product has impacted 6K users by providing a cohesive UI/UX experience.
Problem
Before Redwood, we did not have a design system, so the designers and developers always had to rebuild the UI components. It causes inefficient development, a significant pain to the product team (developers and designers). Furthermore, the inconsistent UI/UX experience is created and causes confusion and misunderstanding to our users.
Value Proposition
To solve this issue, I led the team to build our founding design system for internal platforms/applications. The key value propositions of the product are ...
▌Consistency: With the use of the Redwood design system, product users can have a consistent UI/UX experience.
▌Adaptability: Once imported the Redwood component library, front-end engineers can simply update the library version to keep up the maintenance.
▌Efficiency: Product designers and engineers can avoid building the UI component from scratch but utilize the components as building legos.
▌Adaptability: Once imported the Redwood component library, front-end engineers can simply update the library version to keep up the maintenance.
▌Efficiency: Product designers and engineers can avoid building the UI component from scratch but utilize the components as building legos.
Product Planning
To build a design system and a component library, I researched multiple leading component libraries in the industry and build out the below diagram to effectively guide the team on (1) grouping of the components (2) dependencies between components, and (3) our product scope.
Prioritize & Roadmap
One of the major tasks for a product manager is to prioritize. In Redwood, to prioritize the work and build a pipeline, I considered not only the component dependencies but also our users' (applications adopting Redwood Design System) roadmap. Hence, the new components can serve our users in time.
Below are the roadmap and milestones I built out for our team. It also serves as a great communication method with our users so that users always have up-to-date information about the project. Transparency is the key, especially for internal product teams!
Communication & Partnership
My responsibilities are not limited to building the product but also the last mile of shipping the product and customer success.
▌Community support: I provided Q&A in a Slack channel to support users to consume the components.
▌Component adoption plan: To revamp the applications, I helped PM users to build their component adoption plans, and coordinate with the design system component pipeline.
▌Marketing Demo: I held multiple demos for devs and designers from different business units. Besides educating users, seeking partnerships is another important reason behind the demos.
▌Component adoption plan: To revamp the applications, I helped PM users to build their component adoption plans, and coordinate with the design system component pipeline.
▌Marketing Demo: I held multiple demos for devs and designers from different business units. Besides educating users, seeking partnerships is another important reason behind the demos.
Solutions
The foundation of a design system is colors, iconography, and typography. They are defined and set up in the Redwood package. Designer users can simply apply color/font styles to their screens, icons can be dragged and dropped in Figma. Developer users can simply import the Redwood package which includes the foundations all set up as styles.
A playground is also provided to our users. Comprehensive components such as data tables are especially benefited from this feature. Users can enable/disable sub-features of a component to see the difference instantly.
For example, users can change the pagination style of a data table. It gives different roles (PM, devs, designs) of users a universal language in communication.
Last but not the least, users can change the props of a component, and the code changes accordingly. With this powerful feature, users can have a high-level idea of how to utilize the component, and how the component can fit into the applications they are building.
Testimonials
Testimonial from a Front End Engineer
Testimonial from a Full Stack Software Engineer
