My Role
– UX Designer
– UI Designer
– Coding
Tools
Photoshop, Figma, InVision, Visual Studio, Dreamweaver, Bootstrap, InDesign, Sisense, Power BI, Google Drive, Jira, Confluence, Slack, Beyond Compare
Responsibilities
Mockups, HTML/CSHTML/CSS, Prototyping, Branding, Iteration, Design System, Style Guide, Collaboration with multiple teams
Stakeholders
Product Team: Ronan Gallagher, Steve Rivas, Niall Carty, Nathan Jemmett, Lushanthan Vellanthurai
Business Analyst: Matias Kleisinger, Pablo Celis
IT: Carlos Pellegrino, Cristian Espeche, Carlos Canavidez, Diego Marinelli, Michael Mansour, Reema Raghava, Murugesan Govindasamy
Timeline
Started on July 2018
Alpha HUBUI is a banking solution provider for payments, risk, commerce, and blockchain vendors standardized into one API for complete back-end infrastructure.
The Goal:
- Redesign the current client portal based on the industry’s latest UI standards using prototyping in Figma, inVision, html5, Bootstrap 4, jQuery, JavaScript, and Kendo UI.
- Create a new mobile-friendly interface with functionality upgrades and the capability to quickly and easily customize colors to compliment a brand of any new white label.
- Restructure elements and layout for intuitive user interaction and page flow.
- Help implement the new business analytics software, into the portal dashboard.
- Redesign the multi-hierarchy reporting/statements section and administrative profile sections for each hierarchy.
- Redesign complex transactions search forms, confirmation, result windows, and virtual terminal.
- Work on merchant portal white label customization and pay pages for clients
Agile Methodology
I attend scrum meetings and daily standups and interact with development and product teams in different time zones (Australia, Argentina, Dublin, India) via Google Hangouts, call meetings, Slack, Mattermost, Skype, email, and Jira. I proactively self-manage tickets and tasks based on project and company priorities. Worked with the team to optimize logical design details.
Panning / Prioritization
Requirements
Design / Analysis
Implementation / Testing
Review / Retrospective
Merchant
Corporate
Bank
Global
Institution
Internal
Transaction Capture/Cancel/Refund Design
Mockups
Challenge:
When merchant users want to capture/cancel/refund multiple transactions they need to select transactions from the table, then click on the Capture/Cancel/Refund button, click to confirm, then wait for the process to finish. The user needs to stay on the page before the process is finished.
Solution:
Adding a custom animation to load captured/canceled/refunded transactions with a clear message asking a user to wait for the process to finish.
High-Fidelity Prototype
Once I received approval from the product team I moved on to creating a high-fidelity prototype. I coded html/css/js using Dreamweaver and used Codepen and other online resources to find snippets.
Redesign/Branding
Challenge:
The user has issues viewing some pages on smaller devices and navigating through some pages efficiently. The overall design is also outdated and lacks branding elements.
Solution:
Visually organized, responsive user-friendly interface with fresh branded design.
Decreased the volume and time to the call center by introducing better design and reducing time on task