For our application, it was needed the definition of common UX patterns . These patterns are repeatable solutions to recurring design problems, giving the easiest way that users can interact with your site or application. After defining this, we created the user journeys based on business requirements, working closely with stakeholders, PO, BAs & FE Devs.
1. Defininition & creation of global UX patterns for the new app based on business user needs
We started to incorporate known patterns so users often have an easier time getting where they’re going or accomplishing their goals, using UI object & screens that will intuitively implies its use (like save buttons, empty states, dialogs, contextual menus, etc). This patterns where then slightly tweaked to fit the current business user needs.
Some of the relevant patterns that we incorporated are the following:
A. Validation for data entry
B. Feedback Guidelines
A. Validation for data entry
On the application, long forms where needed to be done all the time, most of them having 95% mandatory fields to be correctly filled in and even some of them with dependencies among each other.
To make it easier for the user during the completion of long forms we developed a pattern that in order to save a form we have an alert button next to the save button that checks on validation alongside the validation on the actual form field.
New form screen example.
The interaction consists on having the save button disabled until all the mandatory fields are filled in correctly, the “alert button” will indicate when any of the fields have errors or warnings on the current form.
Form completed. No Alert Button. Save button enabled.
Warnings: Shows information related to specific sensitive input values on fields that could assist a user in decision making or at least acknowledge the presence of the warning. This alert allow the user to save the form.
Warnings on form. Save Button enabled.
Errors: Shows that mandatory fields are still empty or that the input value on it conflicts with other fields (dependencies). This alert will prevent the user to save the form (save button disabled).
Errors on form. Save Button disabled.
B. UI Feedback Guidelines
Effective feedback instills trust in the system and communicates relevant information to the user at the right time. Common UI elements implemented on the web-application for UX feedback where implemented to build patterns. Some of the most relevant where the following:
Info snackbars are related to a user’s create or edit actions where the action triggers an event that needs processing time and will result in a notification providing the user with a link to access the processed information e.g. creating a Snapshot.
Success Snackbars should be used to confirm any actions that have been successfully acknowledged by the system in conjunction with a user’s create/edit/delete actions.
Warning Snackbars are related to a user’s create or edit actions where the action triggers an event that could assist a user in decision making when entering data e.g. sanction warnings or price information.
Error Snackbars should be used to confirm any errors that have occurred related to a user’s create/edit/delete actions.
Dialogs: Confirmation Dialog
Confirmation Dialogs are used to confirm that a user’s action is intentional and not accidental e.g. switching “on screen tabs” before saving and losing unsaved data, confirm deleting, among others.
Dialogs: Closing Browser Tab
A system confirmation dialog will appear to warn users when closing browser tabs before saving and losing unsaved data.
Loading Spinner: Page Load
It appears on pages that are newly opened and where a delay occurs between the page/content container being opened and the content itself being fully loaded i.e. on new pages opened in CORE TRADE.
2. Mapping patterns to business requirements and improving existing application journeys/task flows
After defining our global UX patterns, we went forward to map them to business requirements improving significanlty all user journeys inside the application.
We used prototyping tools like Invision to tests user flows with the business, once they where signed off, development started, once finished, a fully functional demo was presented to the users for testing, where final feedback was collected to refine and improve flows, only when needed.
3. Working closely with the PO, BA´s & FE Devs during solution design & development
During the process of the solution design, creating user journey flows & prototypes I worked hand on hand with the Product Owner & Delivery BAs to ensure that business requirements where followed correctly. After sign off from the business, I participated actively on FE grooming sessions and keeping close contact on implementation, all of this during bi-weekly sprints.