ARKO SEN

UX

 PROFILE


Tap the chat icon to talk to Arko's AI chat agent.

Arko Sen standing in the times square in front of a billboard which says 'hands down better'

Design philosophy 

Functionality, 
Inclusivity,
Simplicity,
Beauty
-in that order.

Over a decade of honing my craft in a diverse array of domains has given me an extremely intuitive understanding of Business Interests, User Psychology and Technology Constraints. User Experience is a natural confluence of these. 

Core Values


Career Stats

14+  Years of UX  |   20+  Years in the industry  |   50+  Projects  |   25+  Brands worked with


Domains

Enterprise productivity, Banking, Healthcare, Fintech, News, Media & Entertainment, Advertising, Branding, Power, IPTV, Ecommerce, Government, Tourism, CRM, Analytics, Non-Traditional-Interfaces, Design Systems, DesOps (Design Operations)


Brand showcase

Logos of Brands Arko has worked with: BigFix, Star, Workload Automation, HCL Commerce, Appscan, ZAO, Bank of America, Allahabad Bank, Mahindra Navistar, ADGAS, netscribes, IDFC, ABP, BRICS, CESC, spiritCLIPS, NITI Aayog, and Autostadt

Portfolio - case studies

Design System management

2019 to present. Building and owning a code ready design system, led a team of 12, shipped 3+ major versions, grew adopters from 3 to 12+ delivering over 30% cost savings, reducing bug reports by 90%.

-Expand to learn more

a sample component page in the Design System Documentation Site - with theme switcher - light and dark themes - 2024

Pictured: a sample component page - with theme switcher - light and dark themes - 2024


The challenge

HCL Software had a wide range of sprawling enterprise products which were using a mixed bag of design systems, some none at all. Universally adopting an open source design system was possible but it would dilute the brand identity and custom requests were hard to field. Furthermore, the growth and direction of an open source system was not in the hands of HCL Software. Meanwhile, the products themselves are not mandated to use any specific design system, so they had to be convinced with due evidence to pick up a homegrown one.

What we did, tl;dr

We researched some of the leading design systems at that point, Microsoft Fluent, IBM Carbon and Google Material, and created our own from scratch. It started with 25 basic components with 2 adopters and then grew as per the products' needs. It has grown through 3+ stable versions, to 60+ components, 100+ patterns, supporting 12+ adopting products.

Component library with 50+ components and hundreds of variants

Pictured: The set of components in V2 - 2021


The role and journey

I took ownership of the design system from get go, I had to evangelize hard the power of a design system which grows according to the demands of the products. I had to listen closely to the customers' requests, pre-empt them and cross-reference them wherever possible. Every product synergy we discovered in the way was an extra win for us. Moreover, I needed to deliver stable releases every few months in tune with the dev and release schedules of the products. 

I had to manage the feature and bug backlog prioritization, the versioning decisions, the process and workflows, documentation, support for products, design iterations, all the while keeping an eye on the minutiae of the components and guidelines themselves.

It started with only two adopters, a lot of bugs and design conformance issues. But we thrived under the pressure and today it's a major success story, helping products shed up to 30% of their design and dev time per sprint.


Innovations and achievements


A complex query builder component Arko built using his design system

Pictured: Sample complex component built using the design system
non-disclosable details have been redacted in portfolio.

For more Design system specific case studies, check out the Design Systems portfolio

Design handoff protocol

A figma handoff example for an OTP flow and the handoff protocol documentation. Reduced post-handoff interventions by 70%. 

-Expand to learn more

A figma handoff snapshot of an OTP input pattern
Pictured, launch page and comments in the handoff.

View figma file

Note: The figma pattern was originally created in 2021
- hence some old-school layout, framing and components may be present.

The scenario

We had a lot of complaints both from designers and developers on handoff miscommunications, so we decided to create a handoff demo, we chose the OTP pattern being built which was to be used by 2+ product teams, we created a handoff file for the pattern using our components, with a prototype built with reasonable accuracy, comments on each relevant conditional, and annotations on the launch page. We built a set of steps that would convey the full flow and design specs with as less extra work from the designers as possible. 

We have been updating and improving it since. This is the 2024 version of the protocol. The handoff protocol is part of our extended conformance protocol which has been successfully employed to reduce design conformance issues by 90%.


The handoff protocol

For designers:


For developers:


For QA


Outcomes

Mobile app mockups of stock portfolio monitoring app

Mobile stock market monitor

2019. Classic example of a design thinking whiteboarding session leading to actionable designs for part of a mobile app.
- Expand to read more.


The challenge

A reputed bank wanted to provide a comprehensive mobile experience to entry level investors and enthusiasts to monitor the stock market and their own portfolios day to day via their mobile banking app. They were looking for some ideas and a mockup of how those may be implemented.


The solution

A 2 day design thinking workshop. I prepared two personas, one for the enthusiast and one for the casual investor. Then we recruited 4 participants 2 each matching the 2 personas. The stakeholders were 1 representative from the bank and 2 from the IT vendor team who hired me.


The process

Day 1 - empathize, define, ideate.

We started with our sample users opening the mobile apps of competing banks and trying out their stock monitoring interfaces, the casual investors had an active portfolio in some of those apps while the enthusiasts didn't have a portfolio registered. For an hour or so they kept providing inputs which we kept putting in an empathy map.

Empathy map - contents blurred to comply with non-disclosure agreement.

Empathy map - contents blurred to comply with non-disclosure agreement.


Post the map we had a discussion on the content of the maps and defined the problem as:

With these problems in mind, we further noted down the learnings from the session.

Learnings


From there we had an ideating session where we generated a lot of ideas and notes, then the 4 sample users were dismissed for the day.

Next, we arranged the ideas into an effort/impact quadrant and then organised them by priority.

Design thinking: Ideas organized by priority - some contents blurred to comply with non-disclosure agreement.

Ideas organized by priority - some contents blurred to comply with non-disclosure agreement.


Day 2 - prototype, test, iterate.

We opened the second day with paper prototypes and information architecture sketching sessions with instant feedback from the sample users, and iterated till we had some screens which generally agreed with the users needs.

Paper prototypes and IA sketches - some contents blurred to comply with non-disclosure agreement.

 Paper prototypes and IA sketches - some contents blurred to comply with non-disclosure agreement.


Once we had the paper sketches firmed up, we went into a live medium fidelity wireframing session to beat out some quick details and layout wireframes with some placeholder and some sample numbers. We kept updating the wireframes with live feedback from the stakeholders and users.

Layout low fidelity wireframes - altered to remove any non-disclosable information.

Layout wireframes - altered to remove any non-disclosable information.

That concluded the 2 day design thinking workshop, I took 2 more days and some remote feedback iterations to design the final clickable prototypes and delivered them. Colors were chosen to match the bank's branding colors and to a further a11y pass was pending.

Screens from of mobile clickable prototype of 0-1 concept of a mobile stock market fintech app after brainstorming session

Some screens from the clickable prototype - some contents blurred to comply with non-disclosure agreement.

Electric supply app

2017. Research heavy project for the CESC mobile app where the research changed the direction of their data infrastructure.  
- Expand to read more.


The challenge

CESC is a century old company providing electricity to millions of households - then undergoing a major digital transformation. They asked us to build a new mobile app because their existing basic app had very few downloads and usage. They had a vision of a new app which would primarily allow consumers to log in to their singular account to make service requests and also pay bills online.


Preliminary research

Thankfully, getting access to users of CESC was not difficult, as almost every household in eastern India is supplied by them. I created a questionnaire based on bill payment and the types of service requests CESC was able to field, so that we could prioritize those services in the app and also some basic questions on the awareness of the apps.

The results were both striking and confusing. Most connection owners were seniors in the family, they were not bothered about the electricity connection because they were not paying the bills and they didn't call CESC when they had a power cut. Quite a few of the connection owners were deceased! Also each household had multiple connections in the name of different people and most also were either absent or unconcerned.

This was a major surprise to the stakeholders, they were vaguely aware of this scenario but never figured it'd be a hindrance to their mobile app adoption. I changed my line of questioning to learning more about who is paying the bills and how, and who makes service requests.


Further research

Armed with the new questionnaire, we went door to door and interviewed more than 20 households, and got actionable learnings:


With these learnings. CESC updated their database structure to account for these users (who are often not the same as the connection owners) and I reimagined the app to handle multiple accounts with phone/email login, quick bill payment, consumption history and reporting of power outage as its key features.

Sample banner showing some features of Energy Sector  power supply application

Health Insurance Platform

2014. Reimagining health insurance claims and reimbursements like a bank. A healthcare fintech product with the strictest of regulations. 
- Expand to read more.


The challenge

A peculiar case of a captive but reluctant audience, revamping a vast and archaic US healthcare reimbursement and administration platform with 200+ contextual scenarios and use cases in a mobile-first, responsive, and overall efficient experience while maintaining strict HIPAA, ADA and multiple financial security compliances.

Most American Employees dreaded the repetitive experience of logging and claiming health expenses but they had to do it.


Innovation

This was a case of simplicity first, a number of radical design decisions that uncluttered the whole dashboard yet kept the user's customized favourite actions on single click. A number of these innovations (made in 2013) have slowly permeated in other Banking UI dashboards in recent years.


Roles

Medium fidelity wireframes for hybrid banking app - 2013

OTT IPTV Platform

2012. Managing the UI of an OTT IPTV solution for content providers and streaming consumers over web, mobile and smart tv platforms.
- Expand to read more.


Challenges


Innovation


Roles


Screens from smart TV platform application and monitoring

UX talks


UXIndia 2020 - Design Systems, take or make?

View the UXIndia speaker page


JSLovers talks - Better design handoffs


FIFO Talks - Lessons from the design industry.

Lessons from the Design Industry

No recording was found, here are the slides.