Knowledgebase CTAs should be accessible from the hamburger menu next to the “Request proposal” button in the bottom sticky banner. This bottom sticky banner should always be on screen and there should be no “Request proposal” anywhere else on the page in mobile.
On scroll, the business name and bookmark section should become a black top sticky banner where the bookmark should be selectable to save.
Knowledgebase space should shrink to fit mobile dimensions, and leads to “Edit” for custom fields and “Edit note” in notes should always be available.
Elevations
For all enterprise elevations, the header space should show the business (not enterprise) logo then read the business’s name, then the category of the elevation (Custom field, Notes, Media and files, RFP history). No headers should show any counts in parentheticals, those have all been removed.
For all enterprise elevations, the header should be sticky, and should not move on scroll.
Dimensions for all enterprise elevations should:
Always keep a 2:3 dimension
Max at 600:900px elevation dimension, and for small screens take this down while keeping the ratio
While all elevations should have maximum heights and height-to-width ratios, elevations can have reduced height if the content in them (1 item in RFP history for instance) would not take the full height-space. This is what is currently implemented for RFP History and Notes.
Header should show the business (not enterprise) logo then read “[Biz name] Custom Fields”.
All enterprise custom attribute fields should show in the field order that is prescribed by enterprise admins, this order should not be affected by whether or not a custom attribute field is filled in for the viewed business. All custom fields that apply to venues or vendors (depending on the type of business) should be shown in this elevation.
For now, the custom fields elevation should only show in “Edit mode” and changes to custom fields should only be saved by selecting “Save” (no autosave, no View Mode).
The bottom banner of Custom fields elevation should be sticky and should include:
Float left: “Contact your company admin to add or edit the fields available.” Note that this is a slight change from the copy in Zeplin designs.
Float right: “Save” button
Editing fields
Edit presentation by field type:
Single-select: Drop down menu appears leveraging UI from single select like “Vibe” in /my-profile/business-info. User should see an X beside the selected field to clear selection.
Multi-select: Drop down menu appears with check boxes for each selection. Selections should be shown in a top space as they are selected and deselected, these changes should be shown immediately in this top space.
Text: Text becomes editable (unformatted) when clicked into. This text space should be static length, if a user overflows that length the box should become scrollable.
Number: Text becomes editable (unformatted) when clicked into.
URL: Text becomes editable (unformatted) when clicked into.
Saving
“Save” button should start in a deactivated state (light purple current, or gray after component change) and should not be clickable. As soon as any edit is made to any custom field, the button should become activated (purple) and should become clickable to save those changes.
Changes to custom fields should not be saved until the “Save” button is selected and a save is complete. Changes to multiple fields can be made and saved in the same save instance. When the “Save” button is selected, a loading indicator should overlay the save button until the save is either completed or rejected.
In the same save instance, some fields could be saved while others are rejected and show error messages.
If all fields save successfully:
The Save button should return to Gray as it is no longer clickable until there are new unsaved changes to save
“Changes updated” should show in purple text beside the Save button
This text should disappear (along with the save button reactivating) if a new edit is started
No additional text in each field section
If >0 fields do not save:
The save button should remain purple and clickable as there are unsaved changes
“Something didn’t save” should show in red text beside the Save button
This text should disappear if a new edit is started
In each field that did save (if any), green text for “Field saved” should appear under the field name
In each field that did not save, an error message specifying what went wrong should appear in red text under each field name
In each field that did not save, the outline of the value input space should be made red
Take best reasonable efforts to show all errors for all unsaved fields at each failed save (so these aren’t coming in in layers, where after one error is fixed another is exposed)
If the custom fields elevation is exited while a user has some unsaved changes to fields, that user should see a popup (immediately above) asking if they want to save changes before exiting the elevation with option “Ok” to return to the elevation and “Cancel” to continue the exit from the elevation and lose data.
OR
If the custom fields elevation is exited while a user has some unsaved changes to fields, the user should not be blocked from exiting but if the user returns to the custom fields elevation in the same session should see their drafted changes as they left them with the save button activated to immediately be able to save those outstanding unsaved changes.
OR
For now, if the custom fields elevation is exited while a user has some unsaved changes to fields, the unsaved changes will be lost and when the user returns to the custom fields elevation they should see the most recent saved contents.
Collision handling
If User A updates custom fields but was working from an outdated view of saved fields (so another member of enterprise, User B, has updated fields between the time of User A opening the custom fields elevation and saving new changes to the fields), User A’s changes should not be saved successfully. Instead, User A should receive an error message explaining that their changes were not saved and they are being shown the most current custom fields data, which was includes unseen changes from another enterprise member.
OR
User A could just override, I actually think this could be better? Especially if we can do per-field override to not revert back untouched fields. I have an extremely weak view on this and however engineering wants to roll on this I’m happy with and happy to make instructions clear however I can.
Field validation
Number and URL fields should attempt validation on save.
For URL validation, reuse link validation from messaging. If validation fails, display the error message: “Invalid URL”
For number validation, reuse number handling from proposal generation for budget price input. If validation fails, display the error message: “Invalid number”
Header should show the business (not enterprise) logo then read “[Biz name] Notes”.
The viewing user’s note should show at the top of this list, then notes should be listed by recency of the last edit.
On open, the notes elevation should always show with the viewing user’s note as text editing space. If the viewing user has not made a note, this should be empty text editing space.
The text editing space should be a static length. If text expands past that length, the space should become scrollable.
We should offer the same text-editing tools in notes editing as we do for text of RFP details in RFP-issuance. These are: text size, bulleted list, numbered list, bold, italicize, and underline.
Once edited, the text editing space should show the time of last edit in the top right corner. If the note has been edited in the last 10 minutes, that corner should read “Updated just now.” If the note has been written or edited, but not in the last 10 minutes, the corner should read “Last updated [date of last update],” where date should be written out in the same format as the date indicator for other user’s notes. If the note has never been written or edited, the corner should not contain any text.
If a coworker’s note is >3 lines, it should contain an in-line link to “Read more,” that if selected should expand the note to view all text. Once expanded, there is no need to include a “Read less” option.
Elevation should be scrollable if needed.
If notes elevation is totally empty, then it should only show the viewing user’s empty text editing space.
Media and files library
We’ll have a later task to introduce a Files section on business profiles that will always show business public files. For now those business public files will only be relevant to this section when they show in some filters of file upload context:
Header 1: Your organization doesn’t have any files yet
Header 2: Upload files to be associated with this [venue/vendor] by dragging and dropping them onto this screen, or by using the Upload button below. Don’t worry, these files will only be viewable to you and other members of your organization.
This elevation should not include file filters, but should include the Upload button and should receive for upload any files dragged onto it.
On mobile
This space should read:
Header 1: Your organization doesn’t have any files yet
Header 2: Upload files to be associated with this [venue/vendor] by using the Upload button below. Don’t worry, these files will only be viewable to you and other members of your organization.
Space should only include the Upload button
File previews should on hover show buttons for “Preview” and a top-right selection checkmark. Preview should raise the selected file as an elevation overtaking the entire screen. This handling is already built in the current media library in proposal generation.
Once >0 items are selected, the “Clear selection” and “Download selected items” button should become selectable. Follow the same handling of these items as in the current Media library in proposal generation.
Filters
Duplicates are a serious layer of complication here.
Two filters:
File type (jpg, pdf)
File upload context
Modes of upload context:
Biz -> biz generic (this is business public files; we built this ability like 2 months ago and still need to put in on the frontend; note that we want to start including space floor plan files in this group)
Enterprise user -> biz generic (this is planner file upload, incoming feature)
Biz -> RFP
Enterprise planner -> RFP (we’re going to pretty much pretend these don’t exist)
Categories of file upload contexts. We’ll offer all of these filters in all contexts of the Media and Files library, and depending on where the modal is drawn from may have a different default first filter:
“RFP Name”
ONLY Biz -> specific RFP of filter
Does not include files sent by any enterprise member to biz, we’re going to pretend those don’t exist (nobody feels very confident on this call; could have our minds changed but mostly just want a clear plan to roll with)
“Enterprise Name”
Biz -> any RFP with this enterprise
Any enterprise member -> Biz generic (not in RFP communication, only as planner file upload which we implement with Media and Files elevation in biz profiles)
All (doesn’t actually include everything; effectively “Enterprise name” files + business public files; I think we should call this “All” rather than “All RFPs” as we’ll also include files uploaded to the generic biz profile here, I don’t see a need for an “All RFPs” filter)
Biz -> any RFP with this enterprise
Any enterprise member -> Biz generic
Biz -> Biz generic
Filter options should be ordered as follows (top filter listed as 1):
All
Enterprise name
RFP name
Filters should only be shown in dropdowns if there are some files that would be shown in that filter. If no files were exchanged in the correspondence of an RFP (not possible until we allow proposals without pictures) or if there are no .jpg files, those options should not be shown for filtering. If there is only one available filter, still show that dropdown, but only offer that single filter option and don’t let it be deselected.
Always show all filters that would show >0 file items. Even if the files shown for “Enterprise Name” filter and “All” filter would be the exact same group, show both filters.
Upload
Most versions of the Media and Files library should allow for enterprise users to upload files to be associated with the enterprise-business relationship.
All files planner-uploaded to a business from the Media and Files elevation should be categorized as Enterprise user -> biz generic.
Two methods for file upload from Media and Files elevation:
Drag-and-drop
If a user is holding a file over the Media and Files elevation, the elevation should show a top layer that signals to the user to drop their file and it will be uploaded.
Upload button
Available on all possible views of the Media and File library when upload is enabled
When selected, should draw the device’s/browser’s default method of file upload. No further design needed for this flow.
If a user uploads a file while they have an upload context filter set that would not show the uploaded file (for instance, the user has filtered to “RFP123”), their context filter should be automatically changed to “All,” where their new file should be the top left file as it is the most recent.
It’s okay if duplicates are not immediately detected during planner file upload. For duplicates, ideally the upload date of the most-recent upload should be the date represented by the file’s order.
Media and Files library with upload disabled
Upload should be possible for most versions of the Media and Files library elevation. Only disable upload functionality when this is specifically called for (the only instance currently in mind is from proposal drawer in 3.0).
The upload diabled version of the Media and Files library should:
Not show the “Upload” button
Not change presentation if a user is holding a file over the screen, and should not allow for drag-and-drop upload
“Knowledgebase space” refers to the gray info space at the top of business profiles that houses all enterprise information with a business.
Knowledgebase space should only show if there is any enterprise information to show within the space. If the enterprise has no information saved to the business and no RFP history with the business, the gray box should not show.
Knowledgebase space should offer “Collapse” and “Expand” options in the top tab space only.
Knowledgebase space should show icons for each subsection and the count of items: Custom fields (number of fields with content), Notes (number of notes with content), Media and Files (number of media and files that fit the “Enterprise” file filter), and RFP History (number of RFPs in enterprise history).
Custom fields
Should only show fields with content filled in. Should not show empty fields.
Should show fields in the order of enterprise set order, skipping over empty fields.
Display the entirety of each custom attribute content. No “Read/Show more” for any custom attribute fields shown.
Display all filled in custom fields. No limit to the number of fields shown in this space.
When the Custom fields space is hovered over, a link for “Edit fields” should be shown beside the section header. If selected, this link should call the Custom fields elevation. Hover space shown in blue outline above.
Notes
If the viewing user has a note, always show this note first. Otherwise, display all notes in order of most recent edit (most recent edit at top).
Show up to 3 notes (including the user’s if it exists). After 3 notes, offer “View X more.” This button should call the Notes modal with editing ability. This modal should be opened with the same three notes at top (user may have to redundantly scroll past the top notes, that’s okay for now).
When the Notes space is hovered over, if the viewing user has a note then a link for “Edit Note” should be shown beside their name. If selected, this link should call the Notes elevation. Hover space shown in blue outline above; hitbox to call elevation should be the link text only.
Media and files
Display (and count) files that would pass the “Enterprise name” filter in the Knowledgebase space. These are:
Media and files sent by the business in any proposal to or messaging about any enterprise RFP
Media and files uploaded to the business’s profile by any enterprise member
Up to 6 files should be shown in the Media & Files space. After that, the user should be offered a “View X More” button that should call the Media & Files elevation with upload ability.
The hitbox for each previewed file should be the perimeter of its name and upload info space, as shown in the above mock.
When selected, an elevation should overtake the screen previewing the file (if it is a compatible file type). This handling is currently used in the 3.0 Media & Files tab seen above.
The elevation previewing a file should offer arrows on the right and left edges to change between files previewed (like file preview elevations from 3.0 Media & Files tab). If there are additional files available through the View More button in the full Media and Files, those do not need to be available as scroll options from the file previews, only the 6 items shown in the Knowledgebase space.
RFP history
Do not show column titles, these column contents should be self-explanatory for the context of this preview.
Do not show the RFP Issue Date in this preview context.
Otherwise, same presentation and hover handling as the RFP History elevation:
RFP name should be a link to RFP if the viewing user is an admin of that RFP
Active RFPs should show a green indicator dot to right of the name that when hovered over should read ____
RFP admins should be shown by profile picture previews that
RFPs should be listed with most recent (by RFP issuance) at top
If >3 RFPs, user should be offered a “View X More” button that draws normal RFP History elevation.
RFP 3.0 drawer
Introduce enterprise knowledge through side tabs (like originally planned).
Addition of “Custom fields” tab immediately above “Notes” tab
“History” tab should be called “RFP History”
“Media and Files” tab should be called “Media, files, and links”
Did we make a change to “Send email” here? Was that just for Pending?
Custom fields tab
No counter displayed beside the tab title. No enterprise logo. Only “Custom fields.”
Should call the Custom Attributes elevation. Fields should be editable from this elevation. No changes to this elevation due to context.
Notes tab
The counter beside the tab title should reflect the number of notes about the business that are associated with the user’s enterprise, including the user’s note if they have one. This should be the same count as beside the Notes icon at the top of the Knowledgebase space.
Should call the Notes elevation. The user’s note should be editable from this elevation, and immediately opened to its text editing space. No changes to this elevation due to context.
Media, files, and links tab
Current:
Currently, on the user’s first click, the “Media, files, and links” tab is expanded to list all media, files, and links.
Currently the media and files shown in the “Media, files, and links” tab should be all Media and Files that would pass the “RFP Name” upload context filter, with all URLs exchanged during this RFP messaging.
Proposed addition:
Make no changes to the expansion of the tab, the only change is the addition of a link at the bottom of this expansion to “More files (#)”.
When selected, this should show the “Media and Files” elevation. The presentation of all media and files should not be changed due to this context.
However, this elevation should not handle user file upload. The “Upload” button shown in other contexts of the elevation should not be offered. A user should not be able to drag-and-drop a file into this elevation and have that file uploaded.
The parenthetical count in the “More files (#)” link should represent the total number of files shown in the “All” filter of the media library elevation.
Show the “More files” text and link only if there are additional files to those previewed in-tab.
Because the “Files, media, and links” tab counts links and the “More files” media library elevation does not, it is possible that the count beside “More files (#)” is less than the count beside “Files, media, and links (#)” even if “More files” contains additional new files.
Tags over biz profile cover photo
This is being moved to future work.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
