Streamline development and ensure consistent user experience
Discrepancies Between Design and Implementation
As a designer without access to the front-end codebase, I couldn't review every design component, which led to differences between what the design team created and what the engineering team built.
Component Management
Changes to the user interface based on my feedback didn't always propagate to similar elements because the engineers used a mix of shared and unique elements inconsistently.
Communication and Training Challenge
Instead of having a single source of truth, the current process depended on each engineer's familiarity with existing components and patterns, which hindered internal communication and made onboarding new team members more difficult.
Storybook–incredibly helpful as a reference for someone who is less familiar with the new front end.
New Front End is now a pleasure to work on. First, the theme and then the monorepo change made the transition much smoother. Having the library access and the ability to change it makes devs more independent.
New Front End is straightforward to work with. Thank God that we can access the component library through the monorepo.
With a single source of truth, engineers no longer have to worry about managing components and can concentrate instead on building features and improving the overall user experience.
Design feedback on components has been reduced to almost none. When reviewing an implementation, I can focus primarily on the flow and logic. Any necessary change to a component is made once and instantly applies to all similar components.
As the component library becomes more refined, it has become a reliable resource for reuse in other projects and sub-products, significantly reducing implementation time and enabling faster testing and iteration.
Noting the recurring issues, I interviewed three developers involved in the frontend development to understand how the components were implemented and identify the root causes of the discrepancies.
I then spoke with two senior engineers to explore component management tools that could bridge the gap between design and engineering.
Leverage Design Assets
To save time, cost, and effort, we purchased a collection of pre-designed components and assets. This provided the essential building blocks, allowing me to focus on designing customized components and patterns unique to our product.
Storybook as a Single Source of Truth
To align design and engineering, I collaborated with a senior engineer to implement Storybook as a centralized repository for design components. This tool helps us track component regressions and enables visual and interaction testing for both designers and developers.
Although the project promised to boost the team's productivity in the long run, it faced initial resistance from leadership due to concerns about resource allocation and the perceived lack of immediate results. Recognizing the project's potential benefits, I teamed up with a senior engineer. To minimize disruption to other projects, we decided to build a smaller version of the component library in Storybook. This approach required less time and allowed us to quickly demonstrate the benefits to leadership.
Enhance performance and user experience through technological advancement
Streamline development and ensure consistent user experience
Simplify guest communication and payment
Ensure health data privacy through the application of blockchain technology
A collaborative drawing game designed to build connections and spark imaginations
Food as the gateway to community engagement and ecological thinking
Brand identity redesign for growing digital products
Reimagine English teaching for K-12 students
