Vendors Storefronts Design

Owned by Beata Komorowska (Deactivated)
Last updated: Dec 22, 2022
6 min read

The storefront should be implemented into the Organization tab. Its main function is to let the organization owner display their portfolio more elaborately by adding more sections, motivating the user to improve the page, and highlighting the information better.

Prototype:

The link to the prototype can be found here: click the link
The prototype contains the following functionalities and screens:

  1. The main “Vendor Storefronts” page:
    -Select the “Storefront” block to be redirected to the page view.
    -Click the ”Create new” button > when the modal is displayed, click “Submit storefront” to view the modal in the filled mode > select “Submit storefront” again to be redirected to the page with more sections and details.

  2. Create page
    -Click the “Edit button” at the top left to edit the main details of the page
    -Select the “Edit” button on the top right of the background to view the upload/edit image modal
    -Select the “Camera” icon on the profile image to view the upload/edit image modal
    -Progress bar, click the arrow to collapse/expand the details of the progress bar
    -Project section: click the “Create new” button to view the “Create new project” modal, click the “Submit project” button to view the completed modal, and click again to close it.
    -Click the “edit” icon on the project list item to view the “Edit project” modal

  3. Page View (Completed sections)
    -Click the “Edit button” at the top left to edit the main details of the page
    -Select the “Edit” button on the top right of the background to view the upload/edit image modal
    -Select the “Camera” icon on the profile image to view the upload/edit image modal
    -Resources section: Hover over list items to view the functionality
    -Projects: hover over the project items

Note: You can also access the RFP tab in the prototype.

Main Storefront page:

The Vendor Storefronts filters will have a new structure:
-dropdowns: countries, sectors, use cases, building blocks, tags, specialties
-checkmark: Certifications or accreditations

Create new Vendor Storefronts

The user must click the “Create new” button on the main Storefront page to create a new Storefront. Once clicked, the modal with basic information will be displayed. When filled in, the “Submit Storefront” button will become active. After clicking it, the user will be redirected to the page with more editable sections. The user can access and change the basic information by clicking the “Edit” button at the top left corner.


“Create new vendor storefront” Modal

Storefront view:

New sections were incorporated into the current organization tab, including Background and Profile Image, Progress Bar, Expertise, Resources, Contact redesign, GDP Certificates, and Featured Projects. Those features were created to help users provide more information in a more intuitive and quicker way.

The storefront view page will consist of the following sections:

  1. Background and profile image (editable directly from the page by selecting the “edit” button)

  2. Website URL

  3. “Endorsed on” date

  4. Description

  5. Expertise

  6. Resources (pdf, ppt, doc files that can be useful for the target) NEW

  7. Office locations

  8. Contact section that will include the members of the organization with a possibility to highlight the main points of contact

  9. Sectors

  10. Countries

  11. Products

  12. GDP Certificates NEW

  13. Projects (including featured projects) NEW

  14. Comments Section

Edit/display modes of the new storefront features:

Below, you will find a description of the editing and viewing new Storefronts features:

  1. Background and Profile Image
    You can edit the background image and the profile picture by selecting the “edit” icon. Once the icon is clicked, the popup with the possibility to upload the source or drag and drop the image will appear. There will be guidance on the preferable size of the image for both components.


  2. Progress bar
    The progress bar indicates the level of filled-in sections. Once the user enters the page and completes the modal, the progress bar will indicate sections that need filling in. Each box underneath the progress bar will contain the section title, basic description, and the button that will redirect the admin to the selected section that needs to be completed.
    The admin can toggle the modal by selecting the arrow to hide/show more information.
    When the page is fully completed, the progress bar will be filled and the success message will be displayed below.



  3. Expertise section
    Adding expertise will be possible by typing a keyword (that is not connected to any database) of the user’s preferences, interests, and skills. It can be deleted by clicking the “x” icon on the tags underneath the field.
    The list of experts will be displayed in the form of bullet points.



  4. Resources section
    The user can drag and drop the files or browse them in the file dialog. Once uploaded, it can be deleted underneath the drag-and-drop area.
    The user can view the file in the browser window or download it by clicking the icons on the specific item.

     

  5. Contacts
    Each contact will have the following fields: profile image, Name, Title, Email, and LinkedIn link (optional). The user can click the “edit” icon to upload an image. The “Main point of contact” checkbox will be marked when the user should be the organization's primary contact.
    The user will select the “add new contact” button underneath the contact blocks to add a new contact.
    The contacts will be displayed in the form of profile blocks with an image and filled information. The main point of contact will have an additional tag to indicate their purpose.



  6. Featured projects
    The project section is divided into Featured Projects and Other Projects.
    Once the admin selects the projects to display, they will be displayed underneath the “Add projects” box. There’s an option to mark the project as featured - which will be displayed on top once saved.

    1. Create a new Project - directly from the Storefront page
      In order to create a project that is not displayed in the dropdown list, the admin will select the “Create new” button above the dropdown list. Once clicked, the modal with all the project fields will be displayed. Once filled in, the new project will be displayed on the list below. The project items created directly from the Storefront page will have an additional “edit” icon. The admin can edit them directly from the Storefront page.