Content
...
Passwords
...
Documentation
...
Assets
...
Design System
...
Projects
Content
Passwords
Documentation
Assets
Design System
Projects
Final notes
👉 1. Passwords
...
We also gathered some best practices and guides on how to develop future Finova Design System:
A. Replacing icons in the Design System
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
...
Check every icon that is used within the component
To do it, simply select an icon, and “Go to the main component”. If the main component is still Ant Design, it means it has to be replaced.
Find the corresponding icon from in the font awesome library
Update the main component with a font awesome icon (video tutorial)
Move the updated component to Font Awesome icons artboard, and leave the old one (detached from the component) in Ant Icons artboard for reference
Make sure that it worked properly and that the icon has been replaced in the components
B. Adding new icons to the Design System
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
...
All the conditions above must be met in order to be able to switch properties within other components and keep the structure clean
C. Maintaining icons in the DS
As updating icons across the DS is gonna take some time, I’ve decided to keep 2 artboards on the Icons page.
...
All icons without a green mark are still Ant Icon main components that may be living somewhere in other DS components, therefore they might need to be replaced in the future.
Font
...
Awesome icons:
These are the main components that have been taken from the Ant artboard, or added from the local file.
Blanked icons above each component are just old Ant icons for reference, and they are not linked to anything. They can be removed anytime. If there’s no icon above a component, it means that the icon has been added to the DS and had no equivalent in Ant.
D. Design System component updates
In the Pages menu - the ✅ icon next to a page title means that the page has been aligned with the Finova brand style. It means that if in the future you want to use a component from a page that hasn’t been updated yet - you will need to do this by yourselves because it still has the initial Ant DS style
All fonts have been updated automatically so most likely you don’t need to worry about it, but it is still worth check
The corner radius is 8px
Make sure that icons connected within a component, are updated and linked to Font Awesome artboard. Lots of icons that haven’t been used across FF designs will require to update them manually (check the video for reference)
Setting the proper colours will probably require the most work. Check pages that are marked with ✅ as a reference, and use the same colours for hover, clicked etc
It’s worth checking auto layout and resizing components, as I’ve already found a few components not set up properly that required an update
E. Mobile & Tablet responsiveness
Important to know on this one is that eventually, we have established 2 component types/behaviours. Mobile, and Desktop
...
The maximum size of containers with forms is 802px. So regardless of how big the screen is, panels with forms will never stretch bigger. They will be aligned to the left side of the screen, and if there’s enough space for 2 columns - they will break into 2 columns (see designs for reference)
👉 5. Projects
Figma Files notes
Fact Find - FINAL
...
Projects in Figma are divided into Products, which then contain specific files for each Feature. Space like 🎨 Exploratory & concept work is for discovery designs, concepts and mockups.
...
A. Figma Files notes
Feature | Figma | Comment |
|---|---|---|
Fact Find - FINAL | The latest version of fact find, including all changes in agreement with Dev team, updated icons and documentation. Layers are tidied up, structures are built with auto layout and components - where it was possible or made sense Up to date pages that matter:
Prototypes are not updated, and they might not work properly. In order to check interaction it’s best to use the previous version of Fact Find (Legacy). Everything else in the file is legacy, contains |
...
Fact Find - Legacy
...
| panelIconId | 1f4c3 |
|---|---|
| panelIcon | :page_with_curl: |
| panelIconText | 📃 |
| bgColor | #FFFAE6 |
research or some old designs. | ||
Fact Find - Legacy | It’s the first version of FF, before the big dev review after which many things required to be redesigned. Some things that have been descoped, are still in this file - e.g. multi column layout for applicants, creating applicants during FF. |
...
| ||
Case |
...
https://www.figma.com/file/DMH6gCMeery6pHOOzl20Zb/Case?t=rbqT7LNOySPtaUzv-1 | Everything is up to date in this file |
...
(except some product panels wireframes in 3.2 Product Wireframes. Will need to be updated to 3.1 Product individual features). Most of the layers in the file are a mess, so don’t rely on layer names or structure. As these are concept wireframes that often required to be changed, moved around, redesigned etc - I wasn’t paying too much attention to layer names or the proper structure. However when you move to the UI stage, everything should be named and structured properly (See fact find file for reference). |
...
B. Additional Documentation
...
Feature | Figma |
|---|
...
Comment |
|---|
...
Fact Find Documentation | https://www.figma.com/file/5BXe5BtM3cJyIRNe7CHzpJ/Fact-Find---FINAL?node-id=2154%3A61790 | In this file you will find the most important information about some components logic and behaviour used across the Fact Find. Some of them will apply to future designs, such as product tags and some other will answer some questions, like why is one icon blue, and the other one grey. The future designs should be consistent with what’s in this file. |
C. Product Panels Redesign
...
...
| bgColor | #FFFAE6 |
|---|
Feature | ||
|---|---|---|
Product Panels | https://www.figma.com/file/DMH6gCMeery6pHOOzl20Zb/Case?node-id=2490%3A36604&t=zt76nIseOSZkZvHQ-1 |
...
Some of the core changes and improvements of each panel are listed in Mike’s Miro board used for the Forum presentation
|
...
’ve divided the redesign process into 2 steps. In the 1st step, that is almost finished - I focused on the high level UX of each panel. That covers all actions within a panel, such as uploading files, editing details, creating participants etc. There are ideas and improvements to to be validated by the Product Team, and that will be probably most important at this stage. It should be focused on overall panel’s logic and usage. Due to the complexity of some of the panels, after their review, there might be things that are missing, things that I was not aware of at the moment, or proposed solutions that might not work. Once those designs are confirmed, my plan was to start phase 2 - and that includes reviewing each panel in details. That means understanding every field, and label that may appear there, and then improving labels that are not explicit to the brokers. We heard a lot of feedback, especially from brokers new to the system - that some labels don’t make sense to them, and they don’t know what they mean. All designs and improvement ideas are based on what I’ve learned during my personal tests of each feature in the CRM, interviews with the brokers and sessions with Alan. |
...
Email panel |
...
Ideas 💡 | I’ve decided to separate Document History and Email features. In the current system, you can both produce documents and create emails in the same place. That means that the panel not only records produced documents, and when the documents were sent to a client but also it records contact emails that doesn’t contain any documents. In the redesigned Document History panel you can no longer create emails to contact customers, but the panel is now dedicated to documents only. That means that you can produce a document - and in order to send it, you have to select a document (or multiple documents) and hit Send button. The documents will be attached to the message, and sending this message will be recorded as documents sent. I think it makes sense to have a separate panel dedicated to regular contact with the customer. My assumption is that email is the main way of contacting clients. So in this panel users would be able to create new emails to contact the customer, maintain correspondence and track email history. Because we no longer show all applicants details at the top of the screen, my idea was to include all contact details to the customers that are on the product. So presumably that could be one of the panels that should be at the top, displaying phone number, (address?) and email along with the history of contact | |
Some loose thoughts & considerations | Ideas 💡 |
|
...
|
...
|
...
|
...
|
...
|
👉 6. Final notes
If any questions, here are the contact details:
| Tip |
|---|
Matt Gluszek |