Execution & Delivery
From Specs to Production
Even before we had finalized overall page structure, individual component design, and confirmed our hypothesis prototype testing, our engineering team was already hard at work producing the necessary frontend components.
Everything was being built from scratch for the new React.js frontend, including basic component 'molecules' like icon buttons, that required interaction and state specifications. These became the building blocks of our internal design system.
Button states
Book covers come in all different aspect ratios, so we developed two versions of the book image component: one that displayed the unaltered image, and one that cropped all covers to a designated average, for use in carousel treatments.
I produced pixel-perfect specs of each component via Figma, and onboarded my engineering team to the platform so that they could access the component library and living spec sheets for the book detail page.
Even complex components with multiple interaction states were designed to be buillt extensibly for use beyond the book page.
One example is the modal, or pop-up container, which was built extensibly to support the Shelf button, error messages, overflow menus, and login interstitials.
Complex component groups, especially those that deal with user-generated content like review text, had extensive edge cases that had to be accounted for. To better address this I embedded with our frontend engineering team to tackle unanticipated issues as they arose.
Above: Examples of the various states and edge cases corresponding to a ‘review’ component.
Our investment in an extensible and flexible component library paid off, and the speed of component development accelerated as the project proceeded towards beta launch.