Designing at Razorpay — the tools
A sneak peek into what makes the everyday life of designers at Razorpay easy
Razorpay, right now, is a 29-member team. For us, the process that we follow defines the tool stack that we need to have. The tools in themselves, are of meagre importance in comparison to the process that they are supposed to facilitate. A lot of times, great design happens simply on paper, or on a whiteboard.
To know more about our process, here are a couple of links you can actually refer to:
- A Twitter thread on our Design process
- A blog by Shashank Mehta on how Razorpay used Design as a differentiator
Tools and software come into play owing to the need to optimise on time and effort. And in spite of the fact that good tools have very little to do with good design in general, they do in one way or the other, define ways in which we follow the design process and execute solutions.
This article contains a high-level view of the toolkit that the designers at Razorpay use. A lot of times, we’ve seen that folks are unsure as to which tool to use for a particular task. The intent of this article here is to perhaps assist our fellow designers out there with picking up the best possible medium to carry out the task and maybe find opportunity areas to reduce time and effort spent via one of the means we’ve been using at Razorpay.
Communication & Planning
Before we get into the tools used strictly by the design team, I would want to touch upon the ones used by the entire organisation in general. These are used majorly for planning of work, long and short term, and for communication in general.
Slack
Every conversation is plugged in here. One of the core values of Razorpay is transparency, and in accordance with that, DMs are highly frowned upon. Right from an online standup to notifications of our mentions on social media, everything is piped into Slack and can be discussed and tracked there.
Almost every one of us in the team has 30+ channels joined, of which ~5 would be used actively on a day-to-day basis. The recent changes in Slack do help us quite a bit in that regard.
Gmail
Well, a no-brainer. Every organisation needs an email client, and what better than Gmail, yeah? The external communications happen here, in addition to serving as another means of internal communication, especially if it needs to be personal or sent to a larger audience.
Zoom
Online meetings are the norm with the work from home setups becoming commonplace. Razorpay however, had been using Zoom from even before for external communications, or for colleagues who need to join into meetings while working from home.
Google Calendar
Want to talk to someone? Need to have a discussion with a group. Well, first things first. You would need to block time on their calendar. The calendar is the source of truth that needs to be referred to for setting up any discussion.
JIRA
Widely known as a tool used mostly by engineers to track their tasks, here at Razorpay, designers are expected to plan their work for the next two weeks (sprint) on JIRA. This achieves two things:
- The designers themselves know what they will be able to achieve by the end of their sprint.
- Since the work to be done by designers and developers is one single platform, it becomes much easier for all the stakeholders to track the progress of the project being worked on.
Designers attempt to break down the larger tasks into smaller ones so that the prediction of timelines is easier and more transparent. We’re not saying that we all love JIRA, but at the end of the day, it does solve a number of problems in our organisation. Apart from that, we also have a running backlog for design to take care of. This helps in tracking issues easily and driving them to completion along with the tech team.
X to 10X
Razorpay follows an OKR structure. This particular tool serves as the one place where we document our yearly and quarterly goals and track their progress.
Brainstorming & Documentation
The very first step of every design project, the first step of the design process in general. This step in itself has multiple parts. We start documenting our thoughts about the project and the requirements for the product while brainstorming on multiple ideas and approaches in parallel.
Google Docs
The most widely used tool for writing documents — whether it is a Product Spec or a Design Spec, or any other document for that matter. Documenting using this medium makes it easier for us to comment on things and have discussions offline on the document itself, if necessary. Discovery of different documents is easy as well, all thanks to it being all on Google Drive.
Google Sheets
Any kind of data tables to be stored? Any numerical information to be processed? Well, what better than Sheets. This, in addition to Docs, is where all of our documents or research stay.
Notion
Notion, right now, is a tool that is used by people only if they really need to use it. However, a couple of the teams are using it on an experimental basis at this moment. RazorpayX team uses it for almost everything right now, starting from Employee onboarding documents to a record of feedback conversations with users.
Paper & Whiteboards
A lot of the brainstorming happens on paper. In terms of working on general approaches that we need to take with the product, the ideas are generally jotted down on paper. In case there are multiple of us working on a product, we brainstorm on whiteboards so that we could collaborate.
Figma
Of late, especially after the work from home norms came into play, we have started having a number of brainstorming sessions on Figma itself. With the most well-known feature being that of being able to collaborate online seamlessly, Figma makes giving life to ideas together online very easy.
User flows & Wireframes
Once the problem space is kind of understood, the next step is to work on user flows and define the directions that a user will take in the product. Of course, the step is paramount to remove any biases of ideas that might have already crept in, in addition to gaining a clearer visual image of the overall product. There are two tools that a majority of us use in this space — the choice is again a more personal one.
Whimsical
Whimsical was the first tool that the team discovered in this domain, and it became our beloved straight away. Whimsical is easy to use, makes creating flows seamless and look so so simple. Additionally, unlike a majority of the competition, the flows would look effortlessly neat. Whimsical does not really let users play around a lot with custom features, but that is more of a pro than a con. Concentrate on the important things, yo. The look and feel of the flow is great by default. An unexpected plus was perhaps the collaboration aspect and how easy it was to simply leave comments on specific aspects of the flow.
Whimsical provides a very clean wire-framing means as well. Especially for those of us who like to create low-fidelity mocks digitally before painting the screens with the visual brush, this tool has been a blessing. The wires here are low effort and do away with the age-old problems of legibility when created on paper.
Miro
Another tool that we have started exploring in recent times is Miro. It has a lot of customisable features and templates to quickly onboard users. If you like to play around with your flows and the flow board itself functions as a low-key wireframe for you (trust me, it works that way for a couple of us at the org), Miro might be able to provide you with a little more playing field than anything else in the market.
Interface & Design system
This is where a majority of the design would have already been done, and the time has come to bring ideas, sketches and wireframes to life. There are multiple tools that we use in this phase, each with their own merits. The major distinction in terms of tools for product designers and visual communication designers is in this phase. While a majority of the product designers spend a lot of their time on Figma, our visual designers have a soft spot for the Adobe suite.
Figma
Figma has grown over time as a tool that has surpassed formerly set standards for UI creation tools. It was sometime in the last year when we decided that we needed to make the move to Figma from its closest competitor, Sketch. The migration was seamless and since then, we feel that we have reaped the rewards. Figma is a web-based tool that keeps everything synced, thanks to the Cloud. Apart from that too though, there are a few other reasons why Figma beats everything out there in the market.
- Online collaboration
Figma allows users to share the files and collaborate in real-time. One of the major major upgrades over any desktop tool. - Seamless Prototyping
We will talk more about this in the next step, but this also allowed us to do away with Invision. With Smart Animate, this became more powerful than ever. - Easy delivery
We no longer needed another tool to deliver screens to the front end. Figma makes that seamless with all the required information available in the read-only mode. You do not have to pay a dime for the developers who only need to read the Figma files. - Plugins
This was one of the things that were holding us back from making the move from Sketch for quite a while. But just in a matter of months, Figma has been able to get numerous plugins via opening up the platform for third-party developers.
We have also built up the design end of our design system on Figma. With searchable components, auto-layout, shareable styles and easy overrides whenever necessary, Figma proved to be more than just a tool for the design system. It is an overall environment that provides the best possible means for the creation, maintenance and documentation of a design system.
The Adobe Suite
For the creation of user interfaces, Figma beats everything. However, depending on specific needs, and this is mostly in the direction of visual design, we also use a couple of tools from the Adobe suite.
At Razorpay, a vast majority of the illustrations are vector ones and hence the widespread usage of Adobe Illustrator. The same tool is generally used for the creation of icons as well.
However, once in a while, we need to create images and edit them as well. That is where Photoshop excels, and hence the need to use that as well, although sparingly.
Prototyping
Static screens can only talk so much about how the user flow will be. In order to make the entire product breathe, prototyping becomes paramount. This step not just makes it easier to envision the journey of the user, but if built extensively with all edge cases, a number of times, it also proves to be the one point of reference for the developers. There are multiple tools that we use in this phase as well.
Figma
Figma is the jack of all trades when it comes to building UI. We create the screens on Figma and then prototype it here as well. With the entry of Smart Animate, it also allows for the creation of sleek micro animations.
Principle
For more control with the micro animations, and to be able to achieve finesse, we sometimes need a little more sophisticated and a tool more concentrated on prototyping. That is where Principle comes in. Again, it works very well for UI elements and to express transitions within the interface.
After Effects
Need to edit a video? Or create complicated transitions? Here is where After Effects comes into play for us. Not used very frequently, but very few tools, if any, provide the level of customisations in terms of transitions that AE does.
Delivery
Figma
Figma has generally resolved all of the delivery issues for once. But with Figma prototype and the source file being easily shareable, it becomes all too easy in terms of delivery. Designers have a walkthrough session with the stakeholders and create a final delivery page on the Figma file. The developers are expected to interact with this particular page as all other pages contain iterations tried out by the designer.
Analysis
For Razorpay Design, the process does not end at design and implementation. Analysis of the impact plays a huge role. Designers are expected to go into the depth of how the users are behaving and interacting with the platform. Before the implementation of the design, designers are expected to specify the behavioural metrics that need to be tracked. To track metrics, product or behavioural, there are multiple tools that are brought into use.
Looker
All of our funnels and product data is shown up on Looker. Looker makes it easy to create dashboards on a need basis and has multiple levels of access depending on the amount of customisation a particular user might need to do on the platform.
Google Analytics
For anything behavioural, Google Analytics has been our go-to place for quite some time now. The whole idea here is to get a holistic numerical view of how the users have been behaving on our platform. Data points us towards points where improvement is paramount and that is where we go deeper, which brings us to our next tool.
Hotjar
Just numerical data can provide incomplete knowledge at the very best, and misplaced understanding of behaviour at the worst. That is exactly where a tool like Hotjar comes in. Hotjar records sessions of users, at least that is what we mostly use the tool for. Apart from that, Hotjar has also assisted us with heatmaps for specific pages and setting up forms (surveys, for example) as and when required.
In spite of all of the fancy tools that we use, nothing beats having a conversation with a user and a piece of paper to put down ideas on, to come up with solutions to the user problems. Razorpay has always provided designers with the flexibility to choose a tool that best suits their needs, and that is why we have been able to move seamlessly between tools when we felt one was serving our purpose better than the other. To give a personal anecdote here, Kshipra Sharma and I were the only ones working on Figma for 6 months before we made a case for the entire team to move to the tool.
End of the day, a tool can bring out a manifestation of the designer’s solution to a problem. Hence, choose the one that best suits your needs at that particular moment. For us as an org, this set seems to work the best and lets us cover all possible grounds. At the same time, we have had running experiments with the likes of Loom (for making product explainer videos), Airtable (for planning, and as an advanced alternative to Sheets) and Dovetail (for making better sense of user research conversations). The set of tools being used can and do change with time and changing requirements, all in an earnest endeavour to be able to provide the best experience to users while automating processes internally and saving buckets of time wherever possible.
To know more about Razorpay Design, do follow us on Instagram and Twitter.
