Genesis Design System
Genesis Design System
Genesis Design System
Genesis Design System
(2021)
(2021)
(2021)
(2021)
Design System and Ecommerce Framework
Design System and Ecommerce Framework
Design System and Ecommerce Framework
Design System and Ecommerce Framework
Discover ↓
(001)
A versatile ecommerce framework for B2B and B2C merchants alike. This project was initiated as the basis of a new design system and an ecommerce framework. It eventually led to the creation of an optimized checkout with highly-sought after features such as one-click checkout, split payments, in-store pickup, and more.
A versatile ecommerce framework for B2B and B2C merchants alike. This project was initiated as the basis of a new design system and an ecommerce framework. It eventually led to the creation of an optimized checkout with highly-sought after features such as one-click checkout, split payments, in-store pickup, and more.
A versatile ecommerce framework for B2B and B2C merchants alike. This project was initiated as the basis of a new design system and an ecommerce framework. It eventually led to the creation of an optimized checkout with highly-sought after features such as one-click checkout, split payments, in-store pickup, and more.
Project
Genesis Design System
Year
(2021)
Role
Creative Direction and Lead Designer on Checkout
Creative Direction and Lead Designer on Checkout
(002)
(002)
(002)
(002)
Challenge
Challenge
Challenge
Through over a decade of ecommerce website development, our Professional Services team had delivered well over a hundred successful website redesigns for our top clients using legacy frameworks. With emerging technologies, new philosophies to UX design and development, and the evolving best practices and trends, we knew that we needed a new framework to keep up with the changes. The old frameworks required a high level of effort each time and proved to be problematic from team to team, making them highly inefficient, inconsistent, and convoluted to develop over.
Through over a decade of ecommerce website development, our Professional Services team had delivered well over a hundred successful website redesigns for our top clients using legacy frameworks. With emerging technologies, new philosophies to UX design and development, and the evolving best practices and trends, we knew that we needed a new framework to keep up with the changes. The old frameworks required a high level of effort each time and proved to be problematic from team to team, making them highly inefficient, inconsistent, and convoluted to develop over.
Through over a decade of ecommerce website development, our Professional Services team had delivered well over a hundred successful website redesigns for our top clients using legacy frameworks. With emerging technologies, new philosophies to UX design and development, and the evolving best practices and trends, we knew that we needed a new framework to keep up with the changes. The old frameworks required a high level of effort each time and proved to be problematic from team to team, making them highly inefficient, inconsistent, and convoluted to develop over.
(003)
Process
Process
Process
We conducted a full audit of our framework, and used the atomic design terminology to identify every element of it. It became very apparent of the inconsistencies across it, and that helped get buy-in from the entire organization that a new design system and framework absolutely was the right call.
Using insights from our customers such as heatmap data, along with third party user testing, and competitive research, we outlined several sections that needed a major overhaul. These included the navigation, filters, the account dashboard, and most importantly, the checkout flow. The entire team became well-versed with the atomic design approach, and we adopted it for our design system in order to ensure we were all speaking the same language. Through rounds of collaboration with development, we established a new design system and framework that leveraged our learnings across several years, as well as the dedicated process for the project.
We conducted a full audit of our framework, and used the atomic design terminology to identify every element of it. It became very apparent of the inconsistencies across it, and that helped get buy-in from the entire organization that a new design system and framework absolutely was the right call.
Using insights from our customers such as heatmap data, along with third party user testing, and competitive research, we outlined several sections that needed a major overhaul. These included the navigation, filters, the account dashboard, and most importantly, the checkout flow. The entire team became well-versed with the atomic design approach, and we adopted it for our design system in order to ensure we were all speaking the same language. Through rounds of collaboration with development, we established a new design system and framework that leveraged our learnings across several years, as well as the dedicated process for the project.
We conducted a full audit of our framework, and used the atomic design terminology to identify every element of it. It became very apparent of the inconsistencies across it, and that helped get buy-in from the entire organization that a new design system and framework absolutely was the right call.
Using insights from our customers such as heatmap data, along with third party user testing, and competitive research, we outlined several sections that needed a major overhaul. These included the navigation, filters, the account dashboard, and most importantly, the checkout flow. The entire team became well-versed with the atomic design approach, and we adopted it for our design system in order to ensure we were all speaking the same language. Through rounds of collaboration with development, we established a new design system and framework that leveraged our learnings across several years, as well as the dedicated process for the project.
(004)
Solution
Solution
Solution
We launched an exquisite new framework, complete with a revamped checkout and significantly improved user experience across every page. These updates meant users can navigate our product more intuitively, boosting the opportunity for greater engagement and value. We deployed our design system and designers and developers had one source to rely on that defined terms, usages, and components. This initiative also allowed us to make meaningful improvements to our technical performance.
We launched an exquisite new framework, complete with a revamped checkout and significantly improved user experience across every page. These updates meant users can navigate our product more intuitively, boosting the opportunity for greater engagement and value. We deployed our design system and designers and developers had one source to rely on that defined terms, usages, and components. This initiative also allowed us to make meaningful improvements to our technical performance.
We launched an exquisite new framework, complete with a revamped checkout and significantly improved user experience across every page. These updates meant users can navigate our product more intuitively, boosting the opportunity for greater engagement and value. We deployed our design system and designers and developers had one source to rely on that defined terms, usages, and components. This initiative also allowed us to make meaningful improvements to our technical performance.
(005)
Results
Results
Results
Design and development each gained at least a 40% boost in efficiency, measured by the reduced scope of baseline work required per project. This efficiency allowed us to win new projects and allocate hours to more meaningful endeavors organizationally and for our customers.
The new features included in the framework have contributed to improvements for several of our customers, improving their user engagement and conversion rates within the checkout.
Design and development each gained at least a 40% boost in efficiency, measured by the reduced scope of baseline work required per project. This efficiency allowed us to win new projects and allocate hours to more meaningful endeavors organizationally and for our customers.
The new features included in the framework have contributed to improvements for several of our customers, improving their user engagement and conversion rates within the checkout.
Design and development each gained at least a 40% boost in efficiency, measured by the reduced scope of baseline work required per project. This efficiency allowed us to win new projects and allocate hours to more meaningful endeavors organizationally and for our customers.
The new features included in the framework have contributed to improvements for several of our customers, improving their user engagement and conversion rates within the checkout.
