National Stock Exchange
2020-22
Designed screens for the E-IPO process , worked on the design system to maintain uniformity across the project.
Worked on the UI governance of screens after the development for a flawless implementation with the business and development teams. Created a design tracker for transparency throughout the entire design process.
Agency
WIPRO,
National Stock Exchange
Type
Design system
UX Design
Management
Tools
Adobe XD
Excel
Mission to accomplish
Currently, NSE runs on complex and tedious manual systems at multiple levels, which eat into precious data processing time, and its current screen design is not user friendly for its various user categories, which results in errors and visually in different design language from brand's identity.
Client persona
NSE was the first exchange in India to provide a fully automated screen based electronic trading system that offered easy trading facilities to investors. It ensures consistency and transparency in the trading system and has committed for a bigger cause, to facilitate and improve the financial well-being of people with more user friendly products.
Equity- IPO ?
The Equity Initial Public Offering (IPO) process is a journey for a company transitioning from private to public ownership. It involves detailed preparation, including comprehensive due diligence and the engagement of financial advisors. The company then navigates regulatory compliance, filing with the SEBI (Securities and Exchange Board of India).
This process, intricately woven with legal and financial elements, marks a significant milestone in a company's financial evolution, opening its shares to public trading on the stock exchange.
Client’s ask
The main focus of the project was to build a scalable (Wave 1, Wave 2 Debts), user friendly (Issuer, Merchant banker, etc.), adaptive (Process - Technology) digital platform that can enhance the experience of E-IPO Process and reduce manual steps and errors.
Client story
The National Stock Exchange of India (NSE) is the country's leading stock exchange, based in Mumbai. Established in 1992, it has become a vital part of India's financial ecosystem. NSE provides a robust platform for trading in equities, derivatives (financial contracts), debt (amount owed ), and currency.
Design Tracker
It was difficult to keep track of all the progress, whether design or development, in such a large scale project with screen counts ranging above 1600 in one garage, so I worked on a tracker to ensure that the project is well-organized, accountable, and transparent.
Evolved : Teams working, Current progress with design, development and testing.
Several major impacts of it during the project phase one are listed below.
- Track of all design decisions and iterations.
- Gathered all pertinent information in a single, central location.
- Enabled everyone to track the progress.
- Facilitated collaboration
- Eliminated the need for constant meetings and emails.
- Transparency throughout the design process, UI Governance.
Screen Design
Key Screen
Unique screens designed with new major components for the developers' reference.
These screens included two categories:
- For new journeys: initial UI Dev team foundation.
- For new design assets aligned with layout and grids.
Extension Screens:
An extension of the key screens designed for the final prototype included the process in a detailed way with all individual components within that journey.
Design System
Design system or "our source of truth" for NSE project is a set of pre-designed, reusable components, guidelines, and standards that ensured consistency and efficiency in design and development.
The effects of design system were significant in the project, some of which are listed below :
- It ensured consistent user experiences and streamlined development.
- Reduced design time, ensuring faster implementation with unified designs.
- Improved user experience through accessibility and usability guidelines.
- Positioned for the future, the design system enables scalable growth.
Process of EIPO
Login → Data Filing → Document Upload → Payment → Submission & Re-submission
Issue
Delays occurred in the design and development process due to challenges in connecting, finding user stories rough screens, and managing existing designs in the repository. The lack of a streamlined pipeline delayed team collaboration, impacting project timelines.
UI Governance
The last process in the journey was UI governance. I Checked the developed screen processes and gave them feedback with proper guidelines. Again, after implementation, ensured the designed journey met the standards and provided a green flag to proceed with backend check and testing.
Impact
-Improved User Experience
-Better Productivity
-Bagged Phase 2 Contract
-Reduced Manual Interventions
-Reduced Cost of Errors
-Improved Time Efficiency
Under the terms of the NDA signed for this project, I'm bound to withhold the final screens, tracker, and UI governance sheets until the project reaches its completion.
Stay tuned for updates :)
The Journey
Phase I
- I Collaborated with the client to understand the user journey.
- Identified the current problems: Consultants
- Connected the rough screen flow with user journeys: Business Analysts
- Planned and prioritised user stories for design and development.
Phase II - A
- Designed key screens to get a basic layout and process flow idea.
- Feedback and approval from business and client.
- Meeting & Components export: development team.
Phase II - B
- Designed extension screens.
- Feedback and approval from the client.
- Changes
Phase III
- Exported and handed the screens to the dev team.
- UI Governance
- I identified errors/design guidelines that were not met.
- Changes / Repeat
- Verified Journey