.png)
.png)
Project Context
-
Lucro Marketplace is an online marketplace for healthcare solutions (specializing in digital health), providing lightweight project management tools for seamless vendor discovery, intake, and decision making.
-
Core to the Marketplace is the vendor profile, which vendors create and fill out for buyers to see. While we had an existing design, we wanted to address feedback from both buyers and sellers to make this important page more user friendly and better support user goals.
My Role
-
Conducting user interviews to understand what information health system buyers need to decide if a vendor is worth considering for their purchasing project.
-
Requirements gathering and authoring.
-
Create wireframes to test with users.
-
Complete final designs to Engineering for development.
The Problem
-
Health Systems need to find vendor solutions for their purchasing projects.
-
Health System users find it difficult to navigate vendor websites and sales materials to find the information they need to consider that vendor for their project.
-
Buyers want dynamic, up-to-date content to understand the vendor as a whole such as case studies, social media, and whitepapers.
-
Vendors setting their profile(s) up for the first time described it as a long, arduous process, so we also looked at ways to help automate and guide them in set up.
The MVP version of the vendor pages in Lucro
The Solution
-
Audit and redesign the existing vendor profile page (called a ‘Solution Card’) to better display their information in an attractive, engaging manner to gain interest from buyers and stand out from their competition.
-
The Solution Card should contain some structured fields to allow health system users to easily scan and understand what the vendor offers and if it is applicable to the project they are working on.
-
Incorporate more robust and engaging content to the Solution Card so vendors feel like they are putting their best foot forward and buyers get all information that helps understand if this vendor is worth pursuing for their project.
-
Vendors are used to creating profiles on social media and other sites; therefore, we wanted this profile builder to feel and behave like one of these familiar experiences.
Auditing the Existing Design
-
The first version of the editable Solution Card had a very different look than the ‘display state’, which made it difficult to understand what the final result would look like as they were making their changes.
-
The Solution Card sections were broken out in 5 different navigation tabs, making it difficult to understand what the final page looks like.
-
Each saved data well required the vendor to click edit to adjust or remove that content. This led to lots of extra clicks for users updating their Cards.
-
The look of this page is very different from the rest of the platform, which further contributed to the separate/ different feel of this page.
-
Internally to Lucro, this eternally editable state created more technical load on the page, which used more server resources.
Wireframing the New Design
Vendor View State
-
The primary design shift was going from the unique design (meaning, it only existed in the vendor portal, in the edit-only state) to the same design as the buyer side of the platform.
-
Edit icons were added to each data well, which would turn that well into an editable state.
-
Also included in the wireframe is information on how well that product is performing in the Marketplace, Recent Activity, and suggestions to improve their profile.
-
These were all questions that would come in through customer service and were included in this iteration of the design.
Vendor Edit State
-
When an edit icon is clicked from the View state, the selected well becomes editable.
-
The edit state happens inline with where the data is shown when it’s back in a view state.
-
This helped vendors better visualize the changes they are making as they create and improve their Solution Cards.
Vendor Empty State
-
The empty state has placeholder text that explains to the vendor what they can add to their Solution Card.
-
Serves as education for vendors as well as how adding that information to their Solution Card helps buyers understand what they offer.
-
Has a placeholder for Premium (paid) content and links them to upgrade.
Wireframing: User Test Learnings
-
Buyers liked structure to the pages so they can scan Solution Cards easily to qualify/ disqualify the vendor.
-
Buyers found the Overview and Media sections (especially videos) most helpful in understanding what vendors offer and wanted that info higher on the page.
-
Buyers asked for better insight into whether that vendor has done business with their organization at some point; this is usually part of their diligence process but can be difficult to track down internally.
-
Vendors were much more clear on what their Solution Cards look like to buyers with the inline edit format and felt greater control and confidence when editing their Cards.
-
Vendors found the statistics shown in the wireframes helpful but ultimately found them distracting (“who else can see this info?”) and would rather see all their Solutions' statistics in one place, rather than clicking in to view for each product.
The Final Design: Buyer View
The Overview gives a character-limited description of the vendor.
The Video section was moved up and expanded, showing thumbnails and descriptions for the video content the vendor uploaded.
The About section reformatted the existing free-text fields into one, clean section (buyers want to easily scan this information).
Featured Content was requested by vendors and buyers, especially evidence-based case studies and whitepapers.
Categories introduced our new category scheme, applying 3 dimensions to help match vendors and buyers.
Company Info gives basic contact info for the vendor, as well as external links (website, socials, etc).
%20NO%20Cover%20Photo.png)
Activity History is a new section that gives buyers better insight on whether that vendor has previously done business with or been in the diligence process with their organization.
Social Media feeds were added; vendors and buyers alike wanted access to fresh, relevant information about a vendor, as well as get a better sense of their brand personality.
The live social feeds also give a ‘living’ feel to the Solution Card.
Photos have always been part of the Solution Card, but vendors and buyers felt this section isn't as helpful as other media sections.
Related Pages shows other product offerings from that vendor.
The Final Design: Vendor View
Header with optional custom image.
I included a message that only the vendor can see, proactively telling vendors 1) what their page looks like to buyers and 2) who can see their information.
.png)
All wells are editable when the user clicks the edit icon.
When clicked, multiple edits can be made for each section for quick updates.
The Results
-
Vendor calls into support decreased by over 90% for the most common vendor question (asking what their Solution Card looks like to buyers).
-
Buyers reported the new format was more clear and more efficient for their project sourcing.
-
User volume and retention increased for both buyer and vendor users.
-
This was more clear and more technically efficient.
-
Allowed us to consolidate code by using 1 design of the Solution Card (at one point there were 3).
Vendor Design Before and After
Slide the line to the right to see the 'before' design and left to see the final vendor Solution Card design.