New enterprise biz profile design
Never show “Claim this business” box under left info-box for enterprise users.
Don’t show heart icons that were indication reviews. We want to remove these for now.
Response time will not yet be implemented.
Tags for “New venue” and “Critically acclaimed” over the cover photo will not yet be implemented.
Show all buttons for all businesses, independent of current state of enterprise data. Two slight exceptions:
Hide “Request proposal” for certain business statuses (like Closed businesses) CTA should be “Add Note” if the user has no note saved, should be “Edit Note” if there is some note saved
Each button should call its corresponding elevation:
Edit fields calls Custom Attributes elevation with editing ability Add/Edit note calls Notes elevation with editing ability Upload file calls Media and Files elevation with upload button and ability
Save bookmark icon should act as previous:
Empty if not saved by user Count to left of bookmark displays number of saves in the user’s enterprise, including the viewing user’s save If clicked, the saved state is toggled
Request proposal should act as previously.
CTAs should always be available on screen.
If the user scrolls down the page past the buttons, they should be incorporated into the black banner.
The buttons should have the same hover states as when they’re in the section for business name.
Should call the same elevations and have the same handling if selected from the black banner.
Business name should show in 20px “light”-type font. If it overflows the space it should be cut off with ellipses.
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.
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.
All custom fields elevation designs:
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
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.
“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.
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.
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.
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.
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.
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 should show the business logo then read “[Biz name] Media and Files”.
If there are no media and files:
This elevation should read: 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.
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.
Duplicates are a serious layer of complication here.
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) 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:
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) 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
Filter options should be ordered as follows (top filter listed as 1):
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.
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:
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. 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
Unlike the other elevations, this is not called by a CTA button on new enterprise profiles; it will still be called in other contexts.
Header should show the business logo then read “[Biz name] RFP History”.
This is already built so not going to go into too much detail here.
“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).
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.
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