Overview
MetaOptima Technology is a digital health company based in Vancouver, BC. Canada that strives to empower people with advanced technologies to lead a healthier and happier life. MetaOptima is dedicated to revolutionizing the dermatology and skin care industry with advanced, effective, affordable, and intelligent tools for better patient outcomes.
MetaOptima’s products and services include MoleScope™, a portable mobile dermoscopy solution for quality imaging and DermEngine™, artificial intelligent cloud-based analytical dermatology software for imaging, documentation and analysis of skin conditions including skin cancer.
MoleScope is an award-winning affordable solution that transforms the most popular smartphones into devices capable of capturing medical-grade high-quality images for skin imaging. This portable solution comes in two models to accommodate the respective needs of patients (in-home users) and medical professionals (nurses, dermatologists, family physicians, etc.). Both mobile dermoscopes (mini-microscope) work seamlessly with DermEngine.
MoleScope has gained international attention as well as won numerous competitions and awards including the BCIC-New Ventures Competition Wavefront Wireless Prize (2013), the Plug & Play Silicon Valley Competition (2014), and the Coast Capital Savings Venture Prize Competition (2014).
Throughout my time at MetaOptima, I’ve worked on a large number of projects related to MoleScope and MoleScope II, especially during the first few years as MoleScope was released three months before I joined the team. All my focus was on creating brand identity stationery for MetaOptima, as they didn’t have any at the time and marketing material and packaging for MoleScope. It wasn’t until 2017 that I started to work branding, packaging, and overall material for MoleScope II before it was presented to the public.
As the only designer from 2015 to 2019, I was able to work directly with a cross-functional team of developers, engineers, researchers, as well as the C-Suite on a variety of projects that ranged from marketing collateral, packaging, web and mobile UI/UX, to the development of our websites.
I started my journey designing icons, illustrations, and UI assets for MoleScope's website and apps while also creating promotional marketing material for conferences such as presentation slides, brochures, ads, flyers, and banners. I was in charge of making sure all products followed the visual branding while also preparing and coordinating files for quoting and printing with third-party companies.
Aside from all print material, I also worked digitally by enhancing images, creating wireframes, mockups, diagrams, user flows, and graphics to be used on business proposals, trade shows, and websites. UI/UX design and iconography for the MoleScope mobile app for patients and medical professionals was also something I was involved in while translating our mobile app, videos, and customer support emails into Spanish.
As the only in-house designer for the three-office company, I get a lot of requests from different colleagues and departments ranging from the C-Suite, sales, marketing to hardware, and the development teams. For me to keep track of all my projects and their status, I must have a consistent workflow; however, it changes from time to time depending on the urgency and size of the task or project.
The detailed process for projects like graphics, marketing material, business slides, packaging, and more is slightly different than the process I use for mockups, experience workflows, and web design.
A more detailed process for projects like graphics, marketing and sales material, business presentations, packaging material, and more that I follow looks like this:
For most of the ui/ux and app related projects, the process I followed can be found in the DermEngine project process section.
After the documents are ready, I share them with the team for feedback and review. Usually, these are done either through Slack, comments in shared documents, quick meetings, or a mix of them. Depending on the number and types of updates involved, I would either send out the finalized version or create the next version to send it out for another round of revisions and repeat the same process as above. The comments either come from the same colleagues that requested the tasks or by anyone who is also involved in the project.
When I send out files for review, colleagues who are involved in those projects often request several changes, so I have to take initiative and explain my design decisions when I believe those elements shouldn't be changed. After that, we bring up reasons for each request and try to find a compromise or come up with solutions that will work for everyone. After that, I'm back to Illustrator, Photoshop, or InDesign to update and incorporate all the decisions and feedback.
It is hard to have a proper process with revisions and iterations when being the only in-house designer who works on all design-related projects including but not limited to packaging for MoleScope products, presentation slides for partners, and brochures for clients while working with different departments. I tend to send my drafts and latest designs to the people I think are involved in the project for their feedback, but it is a long process as people from different departments have different goals and opinions.
MoleScope is the first mobile home-use skin screening device to connect patients and doctors. This mini magnifier is designed to empower patients to manage their skin health and experience peace of mind. The medical dermoscopy device attaches to smartphones and tablets for professional high-quality skin imaging to provide an affordable solution. With a magnification of ~50x, this non-polarized device comes with disposable contact plates and hand sanitizer to limit light reflected off the skin.
Additionally, the dermoscope is designed to work with a free associated app (by the same name) where patients can organize, store, and track their images over time as well as send them to a medical professional for fast, affordable feedback in a secure accessible manner.
MoleScope
In my first few years, I designed and created various icons, ui elements, and screens for the MoleScope mobile app. Some of the screens designs I worked on included the splash screen, the login screen, the main screen for users to add spots, and some tutorials/guides. Along with that, I worked with our mobile developers to ensure the user interface and user experience were user-friendly as well as learnable for all types of users.
The MoleScope website is the first website the company created. Since it was the first and only website, it targeted everyone, including patients and medical professionals, which meant there were two different audiences with different types of knowledge and interests consuming the same content. A year later, after the release of DermEngine, we decided to move all the content for physicians to the new DermEngine website and to keep all patient and general user material on the MoleScope website.
Aside from many icons I illustrated to showcase the MoleScope app’s different features, I also designed the platform’s login page and worked with our front end developers to execute it.
One of my main tasks was to create an array of marketing collaterals to help the team during events, exhibitions, presentations, sales, and overall advertisement. The first half a year were the hardest ones as the company didn’t have any material other than a simple brochure.
The first challenge was to figure out what the company’s tone and style were for this specific product to create something that showcased the product correctly by highlighting its potential. Not only that but also to make it attractive and easy to use so that all users could understand how to operate it, as both the product and app were new in the market.
Once we decided on the style, I helped build a few simple landing pages with downloadable material to promote our content online (before we had a team of front end developers).
As the company grew, we started creating marketing material for some of our clients to hand out during appointments and to promote skin check services that used our products.
Similarly, I helped brainstorm, film, and execute a few promotional and educational videos regarding our products while also translating them to Spanish for our Spanish speaking market.
Producing illustrations for social media was something I spent a lot of my time doing at the beginning as I wasn't sure what was the preferred style. However, I enjoyed it as it allowed me to present more personalized ideas compared to using stock images. These illustrations were mainly used as cover photos, posts, and promotional material on Facebook, Instagram, Twitter, and our website.
The tasks started by redesigning some of our packaging material such as our Quick Start Guide and Instructions Manual. As time went by, I started helping with the ideation and creation of new box redesigns, sleeves for white labelling, and all the materials included in the product box such as cleaning cloths, cardboard covers, and the “Please Remove Before Use” tab that comes inserted in the device. I’m also in charge of creating ready print and packaging design files for china and external parties.
MoleScope II is designed for advanced dermoscopy by medical experts. Featuring ~60x magnification, polarized lighting, interchangeable contact and non-contact imaging caps, and a contact scale on the plate, the device provides medical-grade quality images.
In addition, the device is designed to work seamlessly with DermEngine, our intelligent dermatology platform for the imaging, documentation, and diagnosis of skin conditions. Available as both an app and web platform, dermatologists are able to capture medical-grade quality images via MoleScope and the app, where they will be instantly synced with the web platform for further analysis.
Update: The company recently decided to discontinue the production of the original MoleScope device, which means that all patients will be encouraged to purchase the second generation dermoscope.
MoleScope II
The application MetaOptima encourages physicians to use is DermEngine as it has more features aimed to assist in the management of patients, cases, diagnosis, and more. To find out more about it, click here. Nevertheless, now that patients are encouraged to purchase the MoleScope II for any self-check, they will continue using the same patient application as the patients using the original dermoscope.
There is no website for MoleScope II but rather a webpage located in the DermEngine website as they are both focused for medical professionals use. I assisted with the design and creation of this webpage including illustrations, iconos, visuals, animations, and Spanish translation. Most users that own a MoleScope II dermatoscope are physicians that use the DermEngine login page.
However, now that the second generation dermoscope is also aimed at patients, they will be using the same login page as the patients using the original MoleScope, mentioned above.
Along with creating marketing material for the original MoleScope, I was also in charge of creating any marketing and sales material for the second generation. In terms of the variety of projects, I created almost the same range of materials, such as brochures, flyers, presentations, downloadable one-pagers, conferences and exhibition material, and much more. A lot of the material I created, I either created one for MoleScope and one for MoleScope II, or one that included both.
Similarly to MoleScope, I created many illustrations and visuals for social media and marketing purposes. A lot of the graphics developed for MoleScope and MoleScope II were used together to increase awareness of our device, a mobile dermoscope.
The overall packaging for this device, which includes the box, Quick Start Guide, Instructions Manual, microfiber cloth, and pouch are the same as the MoleScope packaging but customized with the proper content, visuals, and branding for this device. The remaining components are specific to the second generation device.
As MoleScope is one of the main products from MetaOptima, there’re a large number of projects to work on since the beginning as the company released its first product into the market a few months before I joined the team. The company’s first product to hit the market was the first generation MoleScope, which was also the first mobile home dermoscope that physicians and patients could buy and take with them. After I learned about the healthcare industry and what a dermoscope was, I realized how a product that isn't common for many countries could be such a powerful product for preventing skin diseases like melanoma and saving lives.
If I had more time, I would spend more time researching and testing to make sure what I create is what users need and not what they think they need. Also, I would spend more time generating more appealing and out of the box material that could be tested for customer feedback or reaction, but most of the time I had short timelines to complete most tasks and projects by myself. If the company allocated more budget for design, I would like to assemble a design team to support and create a variety of projects for the company and all the patients out there so there would be more time for new projects and brainstorming sessions.
Throughout the years, I was able to design and create a large number of projects that I'm proud of, especially because I joined the company without any knowledge about the healthcare industry nor melanoma. MoleScope projects challenged me to produce illustrations, icons, diagrams, and all types of material for a range of users from people who had no idea what dermoscopes were nor how to use them to experts in the field that had years of experience.
If you would like to read more in-depth reflections about my MoleScope experience, the projects I was involved in, and my time at MetaOptima creating a vast number of projects for the company, I’ve created a section in my MetaOptima study case page. To read about it, click here.
Reflection
