{"id":2267,"date":"2016-01-20T14:42:12","date_gmt":"2016-01-20T09:12:12","guid":{"rendered":"http:\/\/blog.instamojo.com\/?p=2267"},"modified":"2021-02-28T18:49:59","modified_gmt":"2021-02-28T13:19:59","slug":"instamojo-dashboard-redesign-full-story","status":"publish","type":"post","link":"https:\/\/www.instamojo.com\/blog\/instamojo-dashboard-redesign-full-story\/","title":{"rendered":"Back to the Drawing Board: Redesigning our Merchant Experience"},"content":{"rendered":"
\n
\n
\n

Instamojo.com<\/a> 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.<\/p>\n

In this detailed article, I\u2019ll 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.<\/p>\n

(Brace yourself, this is going to be long, but I\u2019ve made it worth your time.)<\/em><\/p>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n<\/div>\n
\n
\n

Brand new dashboard<\/h2>\n

If you\u2019re an Instamojo user, you\u2019d have seen the new dashboard by now. We\u2019re really proud of the work we put in there.<\/p>\n

As you know, we help merchants sell & grow their business online. For this, requirements from the products are pretty clear \u2014 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.<\/p>\n

Each section of the dashboard is designed with the concept of User Missions.<\/strong><\/p><\/blockquote>\n

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.<\/span><\/p><\/blockquote>\n

This makes the product easy to understand and transparent. Once you start using the new dashboard, you\u2019ll see that there\u2019s been deliberate effort put to keep things clear and focused.<\/p>\n

Cards \u2014 <\/strong>We started with a card-based approach<\/strong> 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.<\/p>\n

\n
\n
<\/div>\n
\"\"<\/div>\n<\/div>
Cards expand to reveal more information<\/figcaption><\/figure>\n

As you see in the image above,<\/p>\n

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.<\/p><\/blockquote>\n

One little delight we added here was contextual left-edges on cards \u2014 these left-edges are colour-coded to denote different states a card could be in, depending on the section of the dashboard.<\/p>\n