Biotex Inc.
Biotex specializes in developing, launching, and manufacturing medical biotechnologies. Biotex collaborates with entrepreneurs, start-ups, and established companies to bring concepts to life through their complete range of medical device development and manufacturing.
Role:
Sr. UX Designer
Date:
2022 - Present
1/6
Digital Proposals
Our latest digital proposals offer a fresh platform for B2B communication. Clients can now view and provide their input before the R&D team executes the proposal, thanks to the feature that allows multiple users to comment and leave notes.
Although Biotex had a former digital proposal, it was outdated and lacked web responsiveness, with a primitive chat interface.
As a solution, I redesigned a modern digital proposal with an improved chat interface, modern visuals, with a responsive design.
Now, digital proposals can be viewed comfortably on any mobile device for easy access to comments and signatures.
Proposals
2/6
CSS Mods
I used clear and concise organization to explain the process of separating the CSS styles into modular style sheets. I provided examples of how the new design system has improved the design process to isolate CSS problems by its modality. I emphasized the importance of implementing rules and organization in the design process, and how it can benefit both designers and developers in the long run.
- CSS Stylesheets: The content is not overwhelming and there is no unnecessary repetition. It is easy to organize
- Fonts: For better legibility, let's keep all the text in one place. This way, we can easily switch to different UI-friendly fonts and see how they look.
- Buttons: All the buttons have been organized in one sheet, which is a common practice to keep buttons and states separated. This is because there are numerous types of buttons and states to manage.
- Cards: Various types of data cards, information cards, and pop-ups require their style sheet.
- Icons: We recently had numerous sets of icons made, and it was in our best interest to keep icons in their style sheets with different families. Although there are online libraries.
3/6
Icon System
The previous MES system lacked a consistent icon system, as they were using icons from three different repositories: Ionic, Google, and Bootstrap. To improve this, we opted to use Google’s new icons due to their flexibility in stroke widths and ease of integration for both designers and developers through the front-end. However, we also had to create custom navigation and module icons to complement the interface’s main screen components.
4/6
Trackerly
The device tracker is one of the most complex designs we have had to create. It is a device that is placed on shipment boxes containing certain medical devices that are sent to hospitals. The device tracks the logistics of the shipment, as well as the expiration dates and temperatures during travel that could potentially compromise the medical devices. There are 4 major stakeholders involved.
-
Stake Holder 1
The account executive is responsible for sales oversees all device shipments from the manufacturer and possesses data that indicates the device expiration date, reports of device malfunctions and missing devices, as well as notifications and a wealth of analytical data available.
-
Stake Holder 2
The packager is the next important stakeholder responsible for handling the packaged lots. They scan the ordered lots and activate the tracking device, making it ready for shipping. Once the scanning is complete, the system is activated and ready to proceed.
-
Stake Holder 3
The administrator of a hospital can access device data on al ordered devices, including information on when devices are nearing expiration. This allows the administrator to make informed decisions and manage device logistics and effectively. He is also relying on other significant data analytics that triggers critical information when a device reaches specific data points.
-
Stake Holder 4
As product owner, one has the authority to manage accounts and monitor data from all clients and users. This gives one a comprehensive understanding of the situation of each client and institution, allowing you to make informed decisions on how to handle clients and products.
Examples
5/6
Voyager
Introducing Voyager, a revolutionary dialysis device designed to simplify the process and improve patient safety. The device features a porous titanium structure that supports the main vein and makes it easier for needles to enter without damaging the vein. It’s surprising that medical devices like this take so long to innovate. To help spread the word, we’ve created a microsite for doctors to access information, highlights, and marketing materials about the device.
Website
6/6
Duedenoscope
If you’re looking for an improved tool for ERCP procedures, you might want to consider the Duodenoscope. This is a new and innovative option that features a plastic build and an ergonomic joystick that makes it easier to use. Unlike older models, which can be uncomfortable and difficult to handle when trying to perform multiple tasks simultaneously, the Duodenoscope is designed to make these procedures more efficient and comfortable for both you and your patients. With its lightweight plastic construction and intuitive joystick controls, this is a great option for anyone looking to improve their ERCP procedures.
MS app
