RxBIO: A UX Case Study

Responsive web design for a biotech company, introducing regenerative medicine to Canadian markets.

The Client

RxBIO is a biotech distributor operating in the sphere of regenerative medicine.

Where We Come In

Our task was to design responsive webpage for RxBIO, making sure to design for both desktop and mobile platforms.

What We Started With

There was not much to RxBIO’s current site. A placeholder type landing page with a generic hero image. The About Us section with 3 links (2 of which serve as back to top buttons), and a Contact Us form for lead generation purposes.

The page did not contain any significant content about the products or the company itself. In short, we were starting from almost nothing, which could be good or bad, depending on your attitude, so we chose good! This means we had room to experiment.

The current RxBIO website

The Initial Interview

After our first meeting with the client we discovered a few key points:

  • RxBIO was still in the process of defining themselves as a business. Arriving in the fairly new market that is regenerative medicine, RxBIO has room to set the standard and stand out from their competitors. The page had to be clean and eye-catching.
  • What they do differently than their competitors, is provide the evidence and the science behind their products. Their PRP (Platelet Rich Plasma) and BMC (Bone Marrow Concentrate) products are far more efficient than their competitors and they require a large amount of evidence in order to back this up (especially given their higher price point).
  • They were really only targeting one type of customer. Seeing as the products they sell are highly specialized, they want to be targeting the orthopaedic surgeons who would be the ones buying these products as well as “championing” them to other physicians/surgeons.

So who are we designing for?

We were able to flesh a persona through information we collected from interviewing doctors, as well as sales reps from Celling Biosciences (the manufacturer of RxBIO’s products). As thus, we had Oscar!

Our Primary Persona — Oscar

It’s All About The Content

We decided to base out approach on the idiom of “dangling a carrot,” in incentivizing further probing and engagement in the site. Our content — the white papers and product info — as “the carrot,” taking a sales funnel approach with the website. Our client wants leads, and their users want content, so we put the content behind a gate.

We give the user a taste of the content, present them contact form (the gate), they fill out the form, and RxBIO gets their lead.

Our “dangling a carrot” model.

Looking back at our persona, it was important to note that they do not want to dig through necessary information, and it was contemplated whether our “gate” might dissuade from accessing the content altogether, however further interview with doctors proved otherwise.

“If they are interested in the product, they will make the effort to grab the scientific evidence behind it to convince their patients.”

Our worries were set aside, knowing a surgeon would certainly do their research when investing a large sum of money into RxBIO’s products.

At this point we were missing much of the actual content for the site. We had plenty of content kindly provided by the client in the form of Celling Biosciences’ Showpad(which was an education/sales platform they used), but we had to parse through it.

In order to determine the necessary content, we had to redefine out end goal:

Follow a sales funnel model for the site. Have content that allows RxBIO to educate clients and gather leads at the same time.

From there it was up to us to extract what we needed from all the content we were given. This video by Celling Biosciences ended up being a goldmine for us, allowing us to pull various images of their 3-D renders for use in our project. Their site was a great resource from which to generate copy.

Boxes And More Boxes

Wire-framing remains my favourite part of the process. We moved to Mid-Fi’s fairly early in the process but not before a crazy-8’s brainstorming session.

For those who haven’t read a previous case study of mine, crazy 8’s consists of 8 ketches in 8 minutes by each member of the UX team.

We started off with a simple homepage, just short descriptions and images tying them the their respective page elsewhere in the site. This had to be our attention grabber, the piece that brings our surgeons further into the site. Our homepage served as navigation for the rest of the site.

Initial Homepage Mid-Fi

The Other Pages

Each page following the homepage served its own purpose.

  • A Knowledge Base (1st screen below), to contain all the scientific papers for educating clients.
  • A Products Page to showcase the products themselves, complete with all the specs and science jargon our pal Oscar loves.
  • An About Us Page, to put a face to RxBIO and provide more info on the company itself, building trust between them and their clients.
Mid-Fi wireframes for the rest of our pages.

Iterate, Iterate, Iterate

Our homepage was still the one that went through the most iterations. This page was moved to Hi-Fi far ahead of the others because we needed to make sure it hit all our checkpoints.

  • It was eye-catching
  • Ir was clean and concise
  • It served a clear purpose of navigation
Several Iterations of the homepage, notice the colours and the hero image changes.

As you can see in the photo above, we started with dark greys , but ended up shifting to a lighter grey, and white to emphasize the clean look and let the orange accent to shine.

The rest of our work plugging in the content we generated earlier to an appropriate page. We also had to make each of the screens equally suitable for mobile, as well as applying our homepage styling to the rest of the pages.

The Finished Product!

Our final prototypes were done using Principle (micro-interactions rock!), however Principle does not provide an easy share link that allows public access, and requires someone to have the actual file. For this purpose we have created a video showcasing the main page of our prototype from Principle, as well as a desktop, and mobile prototype done through Figma.

The Video

The Desktop Prototype

The Mobile Prototype

Enjoy!

Where To From Here?

As always, it’s important to learn from your mistakes to improve your next project.

This project was new for me in that we had to create a desktop and mobile prototype. One thing i would change would be to be more communicative between the two processes. One was finished without taking the other into account and while it did not cause problems during this project, I feel like we would have benefitted greatly from beginning with a mobile-first approach.

Until next time!

Hey! If you’d like to get in touch, message me at sebmendez.id@gmail.com.
You can also find me on LinkedIn or check out my photos on @bestseb.m.

UX Designer with an engineering background. I’m a problem solver first and foremost and I like to have fun with it!