Components Design System

Project Desciption: An easy-to-use UI Framework and toolkit that offers all core components (for designers, engineers and cross-platform teams), used to design and build feature-rich financial applications.

My Role: Product Design Strategy and UX lead for HTML5 Platform Migration project that influences global design direction for current and all future Enterprise financial apps.

Core Responsibilities: Define UX/UI Best Practices & Patterns Library, Formulate Product Requirements Documentation, Wireframes, Prototyping (Axure Pro), Visual Styleguide, Design Sprint Planning (Jira/Rally), Roadmap Planning, Collaborate with Global Teams, Provide Functional Specs & Documentation for UX & Engineering Teams, User Testing & Demos (with Clients, Sales & Internal teams)

Goals: 

• Provided robust UX enhancements for current user pain-points
• Collaborated with designers and stakeholders to gather requirements and formulate functional UX specs
• Influenced product vision and strategy by defining design best practices, standard patterns (useful for auto-migration)
• Defined fluid grid to establish responsive design standards for multi-platform design implementation
• Introduced Font Awesome as icon kit for scalable vector icon sets, that are easy to customize in CSS
• Worked with engineers and architects to define functionality and review implementation feasibility
• Liaison between global UX and engineering teams

Design for the End-User  

Past data from user-testing demos and client-site testing sessions indicated:

• Users interacted with various screens based on their tasks and role at their financial institutions
• Priority list with new product feature was created to map out solutions for each pain-point
• Enhanced workflows for pro-users
• Quick report generation and better user-guide documentation

Domain Modeling Map & Comprehensive Persona Chart

Created comprehensive user personas and domain modeling map to understand user behavior. Detailed mapping helped understand business use-cases and overlapping patterns. 

Component Inventory and Patterns Breakdown

Panel Module Construction 

• Use-cases to map out panel construction in app database
• Component behavior and constraints are defined based on conditions set in the back-end 

Styleguide and Visual Design Best Practices Created for icons, buttons, charts, diagrams, and other visual design elements.

Button Anatomy, visual guidelines and CSS specs

Data-grid editing: Inline editing and error example

Comprehensive Snapshot of Design System & Components Library

Hi-fidelity design exploration for components (shown above: tabs)

Dashboard design exploration (low-fidelity)

User Journey Map

Deep dive into user persona and individual tasks helps identify areas of product improvement, and pain-points. Anna's user journey provides insight into her day-to-day tasks 

Patterns Breakdown by Application Suite

Detailed Wireframe for Error Validations Solutions

• One of the biggest user pain-point was lack of validations
• Detailed interaction notes were made to close this gap and provide scalable, robust solutions

Application Chrome and Navigation System Design
 

Notifications, Messaging and Tooltips

Inline editing and multi-cell error validations

Auto-migration test design from old to new screens (1:1 mapping)

Tab component validations at primary and secondary levels

Detailed interaction specs for dashboard modules and filters panel

Problems Solved:

- Migrating legacy Flex screens (to HTML5) that are not supported by major browsers
- Consistency and Continuity across all hosted and installed apps
- Ease of implementation for engineers
- Reduce cost for implementation services and support
- Scalability & Sustainability: Introduce latest technology and bring apps to industry standards (through market research and competitive analysis)
- Increased data processing time
- Solve real-estate issues (every pixel counts!)
- Ability to provide data visualization, support third-party plugins
- Easy of report generation
- Accurate and enhanced error validations
- Accessibility Compliance
- Keyboard Shortcuts
- Client feedback for new product features and enhancements
- Introduce Responsive Design & touch screen compatibility

Project Challenges:
- Domain knowledge for over 20 applications with over 1,000 screens. Auto-migration was a problem. 
- Federal regulations and compliance
- Banking security (User research and interviews were a challenge)
- Buy-in within teams due to learning curve
- Cost / Resources (lean teams) 
- Training, Support and Maintenance
- Short Timelines to release core components

Measured Project Success & User Engagement Data: 
- Early demos at Risk Practitioners Conference (RPC) rated 4.5/5 (star rating)
- Reportedly sold newly launched applications to over 12 banks (customers) since 2016
- New product licenses have been sold. Profits up by 12% targeted growth rate at the end of Q4 2016

Learnings / Takeaway

There's always room for improvement...    

• Buy-in from all teams is important (A MUST!)
• Effective Planning and strong communication across all teams that are involved (particularly among distributed / global teams)
• Save Engineering Time: Identifying edge-case scenarios is crucial. Focus on functionality and interaction design
• Detailed technical documentation for components is critical for ease of implementation and testing
• Training and continued technical support for cross-functional teams (engineering, design)
• Ability to upgrade framework (For instance: updating to Angular 2.0 without constraints)
• Robust backend services and API (legacy items can cause problems with redesigns/product enhancements)
• Ability to integrate third-party plugins (there will always be a need for more features!)
• Thorough QA and component testing
• Resource allocation