Introduction


All checkout journeys have order summaries in some or the other way. On the surface, it’s simple. Or that’s how we need to show it to the user. No matter how complex, our billing team has made it to be. For our web experience, we needed to first understand all the edge case scenarios. Especially because our design team is fairly new and has no documentation on this particular topic so far.

Notion banner (7).png

Problem


Standardizing the “Order Summary” for every type of purchase on the platform.

Doesn’t sound like much, right? Let’s see why I wrote a case study on it. e& Business offers a huge range of products.

Goal


The design team should have a clear idea (and reusable components) on how to design oder summaries for any new or existing product buying experience.

Pre-requisites


As a team, we liked a few order summaries, like noon app, amazon web, etc. We learned how can we show discounts and promo-codes efficiently. However, we accept the harsh reality that our products are enterprise level and we cannot get a market reference for every case.

Solution


This was and had to be a team effort, however, I was given the honor of leading it (kidding, I volunteer for trouble)

Every designer in the team works on a different project. Meaning, different product, different journeys —many of which include a checkout. We didn’t have a categorization method for this yet, so we started from scratch.

We had to first identify these journeys. Who has worked on which ones so far. Once we got them all together in our Figma playground, we talked about each line item. Turns out, some people have been doing it wrong and it was submitted to the developers. (Now the pain of asking them to change will follow)

  1. Monthly or One time? The most important part of many summaries is the distinguishing of monthly and one time charges. So we identified the variations on that basis first: