Synovus Financial
Jump to: Salesforce nCino | Figma Make AI design | Chatbot design
Project Team
Senior UX Designer: Me || Project Manager, Product Owner, Business Analysts, Salesforce Developers
For nCino I performed an internal audit - documented all UI/UX issues, the lack of consistency, and accessibility correction needs. Also I attended in-person training of nCino to understand and experience the processes the bank staff undertakes to use the software and accomplish their daily goals. In these sessions I heard the questions and pain points of the nCino loan process which helped me plan my UX/UI and accessibility guidance and Figma mocks.
A.I. Generated Personas
The below process and personas were crested to better understand and design for current nCino users (branch managers, bank staff, underwriters, etc.) To create them I used a collection of data from User Surveys and User Research that I conducted:
User Survey: I created a user survey in SharePoint that was shared with bank staff (Branch Managers, Small Business Loan reps, etc.).
User Research: wrote questions and initiated interviews (in-person and via video) with bank staff to collect feedback (pro & con) on the nCino portal, nCino training, and their overall use of nCino.
After collecting the data - I created several Excel files to organize the data.
After crafting several detailed AI prompts I used Copilot (the Synovus preferred AI assistant) and uploaded those documents to find trends, top enhancement requests, and more.
Used AI to create 10 detailed personas (with pain points, demographics, etc.) with persona cards, journey maps and empathy maps for each. Iterating the AI prompts to clean the information, eliminate bias and vagueness, and to remove unrelated content and generic outputs.
Lastly, I put all the collected data into a PowerPoint file to present to the project team and management to continue the discussion and planning.
User wanted portal enhancements collected from the User Survey (Excel).
User Satisfaction Ratings collected from user research & interviews (Excel).
Graph representation of Satisfaction Survey (PPT).
Copilot prompt I wrote for 10 personas, with bank role, demographics, and more.
Initial prompt results, a list of 10 personas.
Build Journey Maps
Visual Persona Card
Pain Points (detail)
Journey Map
Empathy Map
Q2 nCino Experience Survey graphic - shared with the project team and business partners (FigJam)
Salesforce nCino Portal UI/UX/Accessibility Guidance
Below is work created in Figma and FigJam I created a quick reference Salesforce style-guide and UI/UX/Accessibility recommendations for the developers to follow.
The Problem
The current implementation of nCino is greatly lacking in UI consistency, has User Experience concerns, and numerous Accessibility concerns. For development the Salesforce developers are limited to out-of-the-box development and no customization.
The Solution (My Role)
I created mocks providing guidance on how to standardize the UI, address accessibility fixes and provide a consistent User Interface and User Experience — keeping out-of--the-box development in mind.
Even though Salesforce has a lot of great LDS (Lightning Design System) documentation on their website, it is not all in one place and can be overwhelming for some developers and people not familiar with LDS. I took the initiative to create a quick-reference style-guide of basic Salesforce assets used in nCino: colors, icons, notifications, and other assets the Synovus developers could use for out-of-the-box development and guidance. I chose SLDS1 instead of SLDS2, because I preferred the color options in “1” - the colors in “2” are too dark in my opinion.
The Results
A more consistent and clear UI, an easy to follow guide for the development team template of mocks they can continue to use over time. The nCino Project Manager was extremely satisfied and the developers were appreciate of this work and said it would make their jobs easier and faster. Also, when tested with users - they said the improvements reduced their loan processing lag times, greatly reduced their need to leave nCino to read the separate help guide. Tasks that used to take hours with needing to call the help-desk, ask colleagues for help, or research documentation outside nCino now were easier and faster and could be completed in less than half the time — creating a more than 50% reduction in off-line research/colleague help and a more than 50% increase in speed an efficiency.
FlowChart - document the end-to-end nCino Loan Package journey in Loan Wizard (FigJam)
LEGACY - nCino Loan Wizard initial page. Problem: the red text looks like an error but it is meant to be informational.
LEGACY - nCino Loan Wizard success. Problem: no icon, green is not readable to some color-blind users, odd bold blue text.
LEGACY - Users if lost or confused had to stop their input to leave nCino and read the separate Help PDF or ask bank colleagues for help.
PROPOSED - A cleaner UI letting the user know what is information and I rewrote the lead content.
PROPOSED - Removed the green text, used Salesforce icons as a clear indicator. The icon makes it accessible to all, regardless of color.
PROPOSED - First iteration (not final) - added Help accordion to display useful direction. This will help the user avoid leaving nCino to find the needed help.
A basic but easy to understand quick reference guide for Salesforce developers.
A.I. Created Designs with Figma Make
Overview
Synovus Financial Bank use a SaaS cloud-based software named ‘nCino’ along with Salesforce to help their bankers process business loans. nCino requires extensive training and documentation. The internal nCino team created a SharePoint page for enterprise-wide internal bankers to access related training, news, updates, videos, and other related documentation.
The Challenge
The team previously created a SharePoint page which contains training information, PDF documents, and news. However, the bankers found it extremely cluttered, confusing, and didn’t know where to find what they wanted and needed.
Legacy SharePoint page
My Role & Responsibilities
Used Figma Make to create designs with improved UI and UX.
Used Figma Make an A.I. (Artificial Intelligence) design tool to create A.I. driven designs by using natural language prompts. Iterated those designs within further prompts.
Met with Branch Managers to collect their feedback (pro & con)
Met with the nCino team to collect their feedback and further iterate.
Collaborated weekly with the stakeholder team, implementing their feedback.
Discovery & Research
Held in-person and virtual meetings with bank Branch Managers to collect their experiences using nCino.
Met with an internal nCino training lead to understand the training process, learning from users, and which materials should be highlighted first.
Consulted with the Business Analyst to learn from their view what was most crucial to use nCino and collect any feedback they have heard about the software ease or lack of use.
Next Steps
Continue meeting with the product team to finalize requirements, discuss next steps.
Continue to iterate the UI and content using Figma and Figma Make.
Create and develop the mocks in SharePoint using components and custom code when possible.
A.I. Chatbot UI Design
The A.I. team needed a Chatbot design initially for internal use, it may be expanded to external at a later time. This current Chatbot is being used on Microsoft Teams and other internal portals and applications including SharePoint.
I did the design and wrote the content.