Key Features

• Component Library: Built a set of modular, reusable UI components using React and styled-components in Remix, focusing on accessibility and responsiveness.
• Theming and Customization: Integrated a theming system that allows easy switching and customization of color palettes, typography, and layout styles using CSS variables and Figma tokens.
• Figma Integration: Collaborated closely with designers by setting up a shared design library in Figma. This library was synchronized with the codebase, ensuring design handoffs were seamless and that design tokens remained consistent across both platforms.

Technologies Used

• Remix: The React framework, which includes server-side rendering (SSR)
• Node.js + Express.js: Tech stack of API, which gets reshaped after the website's working flow and data redesign
• Figma: For creating and managing design assets and prototypes.

Challenges and Learnings

It's normal to find the website working flows missing, some views missing, and undefined UI in some complicated path of rewriting the whole website in the Figma software design handbook. The solution resolves setting up effective collaboration with the designer team, and asking for feedback from the approver to make a good design with a good user experience.

Outcome

We managed to have a well-refined software design handbook, which we used many times when we wanted to develop something. Our software team managed to make the redesign without any fatal bugs and on the challenging deadline