DESIGN CASE STUDY
Scaling smart receipt design through modular approach
In this case study, I will delve into my contributions in scaling one of my current org's pivotal products: Smart Receipts.
Overview
Hi, I am Himanshu. I am working at a B2B startup Karnival, which helps retail enterprises in enhancing Customer Experience.
I joined Karnival as Product Designer where I looked in 0 → 1 journey of multiple products.
In this case study, I will delve into my contributions in scaling one of the company's pivotal products: Smart Receipts.
What does Karnival do?
Karnival is a platform specializing in Smart Receipts. It facilitates retail brands in delivering digital receipts to their customers.
With help of smart receipts, brand can engage with their customers. We get transaction data & provide personalized experience to the customers.
What are Smart Receipts?
Smart Receipts are the digital version of receipts that the customer gets on phone, after every purchase.
The customer receives a unique link for every purchase. The link opens up as a web page.
Smart receipt enables customer to provide feedback, participate in surveys, engage with marketing elements & much more.
EPISODE 1
The challenges
When I joined the company, there was no framework defined for creating receipt designs.
The existing design:
We identified a lot of problems in the existing system & processes. Some of the major problems were:
Lack of Design Consistency:
The absence of a standardized design framework resulted in inconsistent design elements within the receipts.
Hectic Customization:
Every brand wanted their own styling & positioning of elements.
Since the elements were not consistent, they couldn’t be customized so easily.
Delay in Sales:
The manual creation of receipts by the tech team through coding resulted in significant delays in the sales process.
EPISODE 2
The research
Before designing the receipts, we held couple of research & brainstorming sessions.
Key Inquiry Questions:
During the research process, We posed several pivotal questions to the team, providing crucial insights:
Target Audience for Retail Brands:
We discovered that an impressive 40-50% of customers open smart receipts, with the majority falling within the 18-35 age bracket.
Interestingly, only 10-20% of those reopen the receipts, shedding light on user engagement patterns.
Most Important Elements for Brands:
Brands prioritize collecting Net Promoter Scores (NPS) and gaining insights into their customers' experiences. This data ranks among the most crucial aspects for them.
Furthermore, brands express a strong desire to incorporate marketing elements into the receipts. This includes promoting offers and showcasing new arrivals prominently.
Upcoming Receipt Features:
As a SaaS product, our aim is to empower customers to customize their smart receipts autonomously.
We envision a dynamic page builder-like feature that allows users to add and arrange receipt elements according to their brand requirements.
EPISODE 3
The solution
We serve Enterprises that can ask for different layouts of their receipt & we had to keep the receipts customizable.
So, we took a modular approach while designing the receipt. Hence, we used Cards for each element.
The styling guidlines:
We introduced an open-source library which was also preferred by the developers team, Tailwind CSS kit. We used Tailwind's library as our master collection of Fonts, Colors, Spacing, Shadows.
Then, we inherited some font styles, colors within our design system that we curated. We preferred to go with Inter font with only few styles.
Once a strong base was established for the design system, we started with designing the components of our design system.
The essentials:
These are the elements that will be reused in all the designs we curate for smart receipt. These also construct the base of our design system.
We have every required component in place. Now it is time to create design tokens.
The design tokens:
There can be infinite number of elements/features in a receipt. To make receipts scalable, we created a framework for these elements.
We converted all elements into cards. These cards can be repeated, thus allowing to be re-used for multiple purpose.
These were created in the form of Components in Figma
These are not all, Here are a lot of cards that we curated in order to have stronger modules available for the receipts.
Using the tokens:
Now that all components are ready, we can use them while designing receipts.
Best part about creating the tokens as components is that it's usage as Instances.
We can use properties of all tokens while re-using them as instance at any place.
So, if we want to enable some properties in one receipt & not in another, it's just a click away.
A clean Figma slate:
With the help of re-using instances of the components (tokens), a scalable design was prepared.
Auto-Layout played an important role in making customization much easier. Shuffling of cards required just drag & drop. If any card has to be hidden, the design would auto adjust.
Master receipt design
A base of the receipt design was ready. With all the components in place, a master file was curated. This worked pretty well for maintenance of the receipt design.
If any new feature or component was introduced, it was added in the master file. This helped in saving time as a base design for receipt was always available.
Designing brand receipt
When a receipt was required for sales pitch, new customer onboarding, or in general, then a copy of master file was created.
Only few tweaks were required like setting brand color once, changing product items & shuffling of cards according to the preferences. That's it, a brand specific receipt was ready.
The Customizations:
For every brand, a customized version of the receipt was prepared. We used the same components from master file, just by customizing styles & properties.
These are few receipts which inherited from the same master design file
EPISODE 4
The impact
96%
Reduction in demo shipping time.
38%
Reduction in client onboarding time
28%
Reduction in development time
Ep 5: The Learnings
Through the development and implementation of our design system and smart receipt framework, several valuable insights and best practices have emerged:
Auto-layout for scalability
Utilization of open-source libraries
The power of the 8px grid
Minimalism in Design
The Conclusion
This project is a remarkable journey in enhancing my knowledge of product design.
Throughout this project, I gained valuable insights into design systems, user research, user experience, and visual design.
My journey has extended to working on various products within the company, including designing dashboards for these features.
✌️Peace.
Contact me
I am up for projects, coffee or waffles!
And, I am just that one mail away, so draft your shot now 😉