InkSoft Checkout
Background
The mission was to re-design and unify the InkSoft stores Checkout process from the ground up. At the beginning of this project, InkSoft had a variety of Store themes and various different Checkout experiences that were tied to each theme. Rebuilding a new Checkout experience marked the beginning of building a stand alone Angular application that would live outside our .NET environment. This would allow our Front-end developers more freedom while separating the front from the back. The mission was to design and build one Checkout experience to rule them all, one that our customers would be directed to from any theme in our system. The main goal was to increase checkout conversions and get our customers selling more merch from their stores.
Process and Solution
The process started out with the Stakeholders, myself, the Product Owner, and the Lead Designer brainstorming the desired outcome of redesigning our Checkout experience. It was a hefty project with a lot of moving parts, so a lot of research was necessary to make the right decisions. The main goal for redesigning our Checkout was to increase successful purchases from our customers stores, unify the Checkout app so we could sunset all our other legacy Checkout apps, implement our own internal UI library, and start to separate our front-end from our back-end applications leveraging the Angular 2.x framework. The first step included market research on different eCommerce store checkout experiences and comparing different user flows and user experiences. We researched various form layouts, responsive checkouts, and conversion strategies, as we wanted this Checkout experience to be seamless and provide our customers with a rich application experience using modern web technologies.
The Design Team and I had another side project in parallel with Checkout, which was designing an internal UI library that Design and Devs could use for various other projects moving forward. The goal was to have a consistent and cohesive design language to use throughout our system. One of the challenges was not having the time to code one from scratch, so while the Design Team built out all the components in Sketch, the Development Team’s responsibility was to find an existing UI framework to use and further customize. After weighing various options we decided on Bootstrap for many reasons, but I'll save that story for another time of our IUI library project. Then once we settled on our UI components design, a UI framework, and the workflow and interactions of the checkout, it was time to start building.
Another major decision we had to make was whether to use the latest version of Angular 1.x or to use Angular 2 beta. Angular 2 was still in beta and we didn't want to end up losing a lot of time if beta ended up having a ton of bugs or the Angular team ended up making a bunch of changes between that current time and the official release. However, if we chose Angular 1.x and the official release shortly followed, we would end up spending a lot of time later on down the road re-factoring the entire app to Angular 2. So we decided to roll the dice and use Angular 2! While the Back-end team and Sr. Front-end Developer figured out a solution for how .NET was going to communicate with the Angular app, I started architecting and building out the checkout application UI.. We were able to deliver the new Checkout experience on time to our customers and exceed our goal of increasing successful checkout conversions by more than 30%. Not only did we meet the stakeholders goals, but this also paved the way for the future of Front-end development at InkSoft 😄👌