Redesigning Instamojo: A Case Study
Instamojo.com launched the shiny new dashboard less than a month ago. It was a stellar effort from the whole product team that worked hard for more than 4 months. Developers spent their time rewriting the complete code-base from scratch to construct a framework for the future while the Design team was busy spinning out the new revamped designs.
In this detailed article, I’ll explain how Design team at Instamojo came together to redesign the dashboard and how we normally function to efficiently take a product/feature idea from ideation to deployment.
(Brace yourself, this is going to be long, but I’ve made it worth your time.)
The need for redesign
As businesses grow and evolve, products need to evolve as well with the diverse and growing requirements of the business. The erstwhile Instamojo worked well with the users it had but it was becoming difficult for it to adapt to increasingly complex demands of new features to support growing online businesses.
- The website was built keeping needs of a very simple online seller in mind. It didn’t have provisions to expand into a fully-fledged online business management suite.
- Erstwhile dashboard didn’t have features to meet complex business requirements like tracking sales and payout data at a glance (on mobile & desktop) with various filters, managing diverse (digital, physical, subscription and more) products and their pricing, sending single/bulk payment requests and more.
- It also didn’t afford for product creation flows on mobile — a fast growing requirement in today’s mobile-first sellers revolution in India.
- Many Indian sellers (or anyone who wanted to sell things online) cannot afford a proper computer to run their businesses online. We had to be mobile-first in our product thinking and execution for Instamojo.
- Internally we didn’t yet have a guideline in place to build a design system around. With a growing design team, synonymous execution was becoming difficult as multiple concurrent features started being developed upon.
With the product being more than 2 years old, it was due for a redesign to address these issues and to build a system that would last us for a long time to come, supporting the product and business.
Brand new dashboard
If you’re an Instamojo user, you’d have seen the new dashboard by now. We’re really proud of the work we put in there.
As you know, we help merchants sell & grow their business online. For this, requirements from the products are pretty clear — users need to see their data at a glance and they need to take a small set of actions on top of the data-set.
Each section of the dashboard is designed with the concept of User Missions.
A User Mission (UM) is a task/problem/goal a user wants to achieve with the help of that particular section of the product. Once that mission is clearly identified & defined, that section does nothing more, nothing less.
This makes the product easy to understand and transparent. Once you start using the new dashboard, you’ll see that there’s been deliberate effort put to keep things clear and focused.
Cards — We started with a card-based approach for the whole redesign. By organising information in cards, it becomes quite easy to port the whole design well to all screen-sizes and on all devices. Cards are also conceptually easy to understand. Our new dashboard uses cards quite generously for displaying all kinds of information around sales & customers, resolution center, payouts, payment links and more.
As you see in the image above,
When a card is closed we show contextual information that is sufficient for you to get an idea of the particular element. When you want further metadata around that event, you expand the card to reveal it.
One little delight we added here was contextual left-edges on cards — these left-edges are colour-coded to denote different states a card could be in, depending on the section of the dashboard.
- In Sales & Customers, this edge denotes payout status (green is paid out to seller’s bank account)
- In Resolution center, this edge denotes a case’s ongoing status
- In Dashboard, this edge denotes a link’s status (green is live, red is inactive)
We were quite happy to see our users appreciate it! 😇
Data Meters — This is another UI element we introduced to display un-actionable numbers around your online business. We figured our sellers love checking health of their business at a glance and these numbers really help them do so. Below is an example of one such meter that works well across devices of all sizes.
We plan to put even more intelligent automation at work to provide better insights using these meters. Stay tuned for those!
Layout — Layout was another thing that went through a major change. We experimented internally with a couple of different layouts. We wanted to give it an analytics-y look and tightly couple the shape of the site to a highly-focused container.
We did an extensive survey from analytics data about our users. A common theme emerged that almost all of them used a desktop screen wider than 1200px. Our website layout was restricted to 1000px in width. We saw this as a missed opportunity — we were wasting a lot of space here. Space that could be put to a much better use:
We decided to make our site wider in layout and introduce informative units that could help the seller learn more about various peripheral features Instamojo offered.
An ancillary benefit of this space was to use it for feature announcements and promoted content as well.
Hence, we agreed on going ahead with this wider layout experiment and divided the screen in 3 different parts — navigation, main content in the center and right side units.
As you see, it looks even better on mobile (375 pt) screen. The cards naturally accommodate the information inside them in to a coherent experience that’s a delight to use.
So this gives you a fair bit of an idea on what kept us busy for the last half a year. We are completely revamping the whole Instamojo footprint on the web. It started with the homepage at Instamojo.com and has now refreshed the dashboard. Up next are all the current landing pages (About, Team, Career and Culture pages will drop in the coming weeks).
With 2016, Instamojo is going to be bigger than ever before and we’ll be taking even bigger bets on the product backed by significant advancements in development and design ethos.
With this, I’ll go in detail about how we internally function as a design team with in-depth information of processes and flows.
Laying the right foundation
Instamojo grew by almost 100% in its size in 2015. As we started growing our team, our design philosophy and language needed defining. There was no clear structure to our work with a lot being done ad-hoc without any documentation. With a growing team, this could mean things can quickly go out of hand with multiple brains working independently.
With growing collaboration, we needed to understand each other’s methods and sanitise the way we worked as a design team.
The guides
Our design team unanimously agreed early (April 2015) on that we required a design framework for the whole team. We started with a simple style-guide Sketch file. Our expectation was that this document would serve as the ultimate reference whenever one was needed.
We made a plan to have in total, 3 guideline documents —
- UI style-guide
- Content guide
- Brand & Marketing guide
For UI style-guide, we already had a list of components we’d need to redesign from our old website and hence it was easy to get started with.
I’d share some examples of how we spec’d our UI components in the style-guide document so you can get a general idea about it. After finalising on the colour-palette for our UI, I got started on the UI style-guide.
In our initial weekly design meetings (more on this in a bit), we ramped up quick internal feedback on initial mocks of new redesigns of UI components to have something to start with. This sped things up immensely in getting started with new dashboard designs.
As you see, every UI component was spec’d out completely right down to the last pixel in order to keep things uniform across the product.
Having this style-guide document meant that we could finish designing layouts of each section of the dashboard incredibly quickly. This reduced the design-feedback back and forth to a huge extent since we all agreed on the style-guide and every new layout conformed to that guide.
Early investment in standardisation of design components & building blocks meant we spent incrementally less time in dishing out layouts for our new features and pages.
Content, Brand & Marketing guidelines — As I am writing this, we’re in the process of finalising these documents. We plan to integrate them vertically across the whole company and bake them into our employee-on-boarding flow in order to educate new folks about who we are and how we present ourselves to the world.
We maintain these guidelines on Google Docs with limited editing rights in order to maintain sanity and accountability. It’s shared with the whole organisation.
Design process
As they say, you can never be optimising enough. We started out with a clear goal for our design team —
We are our users’ advocates and we vouch for simplicity and usability in the product to make their lives easy.
Working with this ethos made ‘being on the same page’ really easy. It also became a quick checker to resolve conflicts amongst ourselves. Whatever wasn’t usable and simple had to go away. We are a team of 3 designers who work with a Product Manager. All 4 of us decided we needed a way to sync up and in general talk/discuss more about our work and the feedback we were getting. Weekly design meeting was the way to go.
Every Wednesday evening we’d meet for at least an hour in a separate room with a clear agenda —
- Discuss user feedback from the last user-testing interview session if any & come up with actionable notes
- Discuss mocks and design progress from each designer
- Jot down individual feedback and do Q&A on design choices
- Discuss upcoming user-testing interview session if any
- Individual deliverables for the next week
Occasionally, we’d prepare a questionnaire for the developers and invite them to our meeting to clear our doubts about what was possible to build and what wasn’t.
One of the most critical things we did starting out the redesign was to keep the Developers on-board in the process to keep a reality-check on the designs we made.
Below is the flow we use for a typical design-to-dev sprint. It’s been serving us really well up until now and we’re sure with some more optimisation, we’d be even more efficient.
Instamojo recruits some of the best people in the industry and by giving them freedom and power to operate on their own brings the sense of autonomy and ownership to their work. This shows in the resulting product and the overall philosophy of the organisation.
So yeah, this is how we work at Instamojo in the design team. I am sure we’re not yet as optimised as we could be but we’re getting there. We’re taking steps in the right direction to reduce a feature’s time-to-user. I am extremely proud of our design culture inside Instamojo and of all my colleagues for fostering such an enterprising environment that breeds creativity and freedom of thoughts.
Design team
A huge credit to the design team here —
I’d also like to take this opportunity to thank my colleagues Dalan Mendonca (Product Manager) & the Dev team consisting of Aakash Goel, Sanath Chandra, Indradhanush Gupta and Ashwini Chaudhary who’ve been instrumental in getting stuff done to bring the new Instamojo at the screen near you. Without their constant vigil, all this wouldn’t have been possible.
We’re constantly look for feedback. In case you find anything broken or want something to exist that we missed, ping me at hardik@instamojo.com and we’ll talk about it.
The good work doesn’t stop here
There’s a ton of incredible new features coming your way including a brand-spanking-new online store, smart-search, rich data-exporting capabilities, app store app add-ons and other offerings on business insights front.
As our CEO Sampad Swain says,
“2016 is going to be awesome, and we want you to be a part of it.” 🤘
Want to work with us?
We’re always looking for kickass people. If you happen to be a designer, developer or a product guy, reach out to me at hardik@instamojo.com or @hvpandya on Twitter and I’ll hook you up with the HR.
Aakash Goel has written a nice write-up of what we are doing with React and React Native and how we re-wrote the complete code-base using state of the art tech. You should totally read it!
Thank you for reading. I love to share my learnings and experiences in product design here on Medium. Check out my other articles. You can also follow me on Twitter for more realtime updates.
