Hot Pot

Meeting with the ROI-focused CEO to push for a design language was challenging. I proposed bundling it with a new product, File Manager, and presented analytics data to showcase increased usage and engagement. This evidence-based approach effectively demonstrated the value of adopting a design language within the organization.

I migrated our outdated Backbone tech stack to React to align with the new design language. I developed the React components myself using Storybook, with the aim of making it easier for the other developers to join later on.

Using React allowed for easier extension of our feedback elements, including form inputs, buttons, and pages. I implemented analytics for each component to measure clicks and identify any UX patterns or bugs.

To make the implementation of React smoother, I also developed a SCSS file that was webpacked, allowing for easy implementation into our other apps using traditional class names. This was particularly useful for updating our site editor and store manager, which were too large of projects to transition entirely to React.

I made sure all of our components were touch-friendly to enhance the user experience on mobile devices. This involved making changes such as eliminating tooltips, using modern icons instead of traditional text labels, and optimizing button size for better clicking. Additionally, I focused on speed by removing unnecessary animations and transitions.

To keep our data and form inputs organized, I avoided cluttering the fields with dividers and borders. Instead, I utilized "spaces" to visually separate different sections, as demonstrated in the clean and simple design of the Store Manager.

Our first product, the site editor, used icons instead of labels to save space. However, customer feedback and analytics revealed that users were often confused and did not click on certain icons. To address this, we switched to using labels, which greatly improved user understanding and engagement.