Enterprise biz profile

New enterprise biz profile design

All designs:
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.

Top CTAs

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
Filled if 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
No elevation from click
Request proposal should act as previously.

On scroll

Most current:
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.

On mobile

Most current:
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.

Custom fields

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

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”

Notes

Most current:
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:
Most current:
Header should show the business logo then read “[Biz name] Media and Files”.
If there are no media and files:
Most current design:
On desktop
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.
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
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.