While at RED Academy, I was given the challenge of designing the website for RxBIO, a biotech product distributor that had just started up.
With them being a brand new entity, RxBio’s current site was a placeholder — no significant content, product information or copy about the company — so we were essentially starting from scratch.
RESEARCH
We interviewed stakeholders who interact with medical products at all levels: the manufacturer, our client, sales specialists and doctors. As RxBIO’s products are fairly esoteric – they’re blood or bone marrow concentrate harvesting systems, including a canister you put into a centrifuge to separate the material collected, in order to then re-inject selected portions of it back into the patient for its healing benefits – we needed to understand each product top-to-bottom and to get a clear idea of the entire process involved in selling it and the reasons surgeons would buy it.
USER PERSONA
RxBIO
Team:
Michael Mabee - UX Design
Sebastian Mendez - UX Design
Shubhani Jindal - UX Design
Gerald Bautista - UI Design
Time Frame:
3 Weeks
Software Used:
Figma
Principle
Prototype:
Case Study:
Oscar was the user persona we created after our research stage. He would be our guide for building the site and his interactions with it would determine the success of the site.
Key insights into Oscar's needs:
-
doctors need to be fully educated about the procedure before they'll consider engaging in it
-
doctors want to see the latest and most thorough studies on procedures so that they can gauge short and long-term effectiveness
-
doctors need their equipment to perform up to given standards
-
hospitals need their equipment to fit within their budget and be from a trustworthy source
CONTENT INVENTORY
In speaking with RxBIO & Celling Biosciences (the manufacturer of the product), we were told that RxBIO would have access to Celling’s client-education/sales platform (Showpad), which opened up a wide variety of content to us. The bulk of that fell into two categories, white papers and product info, with a single high-quality video that explained the product and its usage perfectly.
PLANNING
In order for this website to be a success (even as a secondary sales channel, as in-person sales are their main avenue), we would have to integrate RxBIO’s CRM platform and give doctors like Oscar a reason to sign on to it.
We needed a carrot to incentivize engagement, to open up the relationship with the company. We went back to one of the sales specialists we’d spoken to earlier and asked for input on what had worked for them.
We developed the idea of a site built around a sales funnel, with the white papers and product info set up as gated content. People looking to get in-depth information about RxBIO’s products or to read up on the science behind them would have to trade a little bit of information about themselves for access to their full library of content.
Our goal became to build a site around a sales funnel, allowing RxBIO to educate, build trust with their prospective clients, and gather warm leads for the sales team.
DESIGN
In the design phase, we explored ways that we could be everything that the competition was not: clean, clear & digestible. Surgeons like Oscar could not be expected to spend hours divining their way through screen-filling menus and parsing giant walls of text. They need a succinct presentation, backed by solid science, on a site that could be a resource going forward.
Each page was oriented around a goal: Home was for clear navigation, the Knowledge Base was to educate, Products was to convince Oscar that these were the right products because they met or exceeded all of his requirements, and About Us was to build trust by giving Oscar information about — and direct access to — the RxBIO team.
See V1 of the wireframe prototype here.
In testing we found that the site needed some tweaks:
-
We needed additional information to make what the business actually is clearer on the home page, so that Oscar could be certain he had come to the right place and was on the trail to the right information
-
We needed to emphasize the visual hierarchy, so Oscar would have clear landmarks to navigate by
-
We needed to refine and unify the tone of the language, so that it would speak clearly to our educated user, allowing him to access information quickly and easily
-
We needed to do a better job of targeting Oscar’s needs and getting him to engage with the site
With all of this in mind, we upgraded the mid-fi’s before moving on to the high-fi stage.
In moving to the high-fi stage, we had to define the visual language of the organization. In wanting to look cutting edge and revolutionary, we started out with a dark look that evolved over the course of the final week of the sprint into a bright and clean beacon of usability for Oscar.
See the high-fi desktop prototype here and the mobile prototype here.
And finally we had a takeaway gift for our clients, the champions of the products and gatekeepers of the content, after the presentation: a reminder to always make sure that Oscar has a reason to engage with them.
To see my full case study for this project, please visit Medium.com.