BioShield
Website Design for Safer Public Spaces
Click/tap image to expand
Summary
BioShield designs and manufactures a series of products that are infused with Silver Nanoparticles (Ag NPs), which are clinically proven to speed up the deterioration of bacteria and viruses. As businesses attempt to reopen safely following the Covid-19 shutdown, these products provide an added sense of safety for high touch, high traffic areas, like office buildings, public transit, and classrooms. For this project, I worked closely with BioShield's head of Marketing to design and build the company's website from start to finish. I completed my competitive analysis and made wireframes in Figma, and then used Wix to create and iterate on my designs. You can see the finished product at https://www.bioshield.io.
Tools: Figma, Wix
Duration: 3 Weeks, 2020
Defining Priorities
With limited time and resources, I decided to approach this design by going back to the now age-old venn diagram showing the UX Designer at the center balancing the User's Needs, the Business's Goals, and the Technical Constraints. Through several meetings with BioShield's leadership, a comparative analysis, and some good ol' designer's intuition, I began to create a framework for my design.
While a UX designer is an advocate for users, they also need to balance business goals and technical constraints.
These concerns were the foundation for my designs.
User Needs
The user's primary need is to be able to understand the products and services BioShield offers, and to be able to access those services easily.
Business Goals
The business wanted their website to stand out against their competition, while promoting the scientific validity of their products and the company's Safe Environment Strategy.
Technical Constraints
My primary concern here was making sure the site was easily editable after I handed it off to BioShield. In doing so, I created a modular design system and instructed my clients on the easiest ways to make changes.
Comparative Analysis
What Works and What Doesn't
I started my work by looking at the websites of several competitors in the antimicrobial surfaces space. I wanted to pay particular attention to the layout and visual design elements on the sites. By running this analysis, I could present to the BioShield leadership what works well on these sites, and what we could improve upon. Below are some examples.
Image-Heavy Headers: Many of the sites had large images as their site headers. This was an engaging way to show the products in action and give a good sense of the brand from. first glance. This example from Silver Defender shows a dynamic image with text over it.
Simple, symmetrical layouts: While some sites did this better than others, overall the sites were laid out simply, with clear information hierarchies. This example is from NanoSeptic's website, showing the different use cases for their products.
Online Stores, Without Context: Many of the competitor sites had online stores where customers could purchase antimicrobial products directly. BioShield is primarily a wholesale company, so this was not a major concern for my design. However, it struck me how these stores often showed the product with little to know information about what the individual products were, how they worked, or what context someone would use them in. This left a sort of, "you figure it out" feeling, which I wanted to make sure to avoid.
Scientific Claims, Without Scientific Evidence: All of the sites I analyzed made claims about the science behind their products. However, none of them linked to peer reviewed scientific articles or studies. It was important to me to be able to set BioShield apart in this matter, to make sure their customers felt the product was both trustworthy and effective.
Wireframes
Structuring the Content
Now that I knew what was working with our competitor sites, and what could be improved upon, I set out to create wireframes of each of the site pages in Figma. First, I needed to plan the sitemap. Through consultation with the client and the comparative analysis, I created a very simple 4-page website. Those 4 pages are:
Home
A high level overview of the whole company, products, and mission.
Products
BioShield's product range, and the science behind how it works.
Company
Information about the company's philosophy and leadership.
Contact Us
Self-explanatory: the contact form for customers to get in touch.
I built the wireframes using a wireframing UI kit. I had a few reasons for doing this:
-
I was only dealing with high level placement and organization, so I didn't need anything very detailed.
-
I wanted to save time and budget for my client, so I avoided creating components from scratch.
-
I knew I would be working within Wix's component system, and didn't want to overly customize elements before I knew what I'd be capable of on the finished site.
Home
First and foremost, I wanted to make sure each page used a strong hero image that grabbed attention and had a clear, concise overview and call to action. It was important to me that users knew what the page was about quickly, and were invited to learn more by scrolling further through the page.
Products
The product page consisted of two main sections, general product information and the scientific information regarding the efficacy of silver nanoparticles. I originally opted for a more condensed, symmetrical layout, but you'll see in a later section that this changed later. I also wanted to make sure there was plenty of breathing room on the page, and to break up the text-heavy sections with visual elements.
Company
BioShield takes a strong stance on what they call their Safe Environment Strategy, meaning that BioShield products are just one part of the plan to reopen commercial spaces safely. The highlight of the Company page was an easily accessible, visual forward explanation of the Strategy.
If you're interested in seeing the complete wireframes, you can download them as a PDF using the button above.
Branding & High Fidelity Design
Bringing Ideas to Life
Images & Branding: For the brand identity, I wanted to emphasize BioShield's core values, which I learned about through discovery sessions with my client. These boiled down to the ideas of professionalism, scientific soundness, and helpfulness.
Because BioShield is such a new company, and many of their products are invisible, I relied heavily on stock imagery, that I found through Wix, Adobe Stock, and Unsplash.
One of the mood boards I created using stock images.
I then used these images as the basis for the color story for the site.
Another important aspect of the BioShield brand is that their products have been scientifically tested, and are proven safe and effective. As a not-very-scientific person myself, I consulted with a microbiologist (and my friend) to make sense of the research studies that BioShield conducted, and the literature about Silver Nanoparticles. I used this information to create several graphs showing the efficacy of BioShield's products.
Click/tap on the image to expand
Click/tap on the image to expand
Check out the finished site
Testing & Conclusions
Where do we go from here?
Overall, I'm very pleased with the design and functionality of the BioShield site. Of course, if I had the opportunity to follow the UX Design process to a T, I would have conducted usability tests and more iterations on the design. However, the client and I both agreed that the site met the brief, and they were eager to get the site published.
Fortunately, when I published the site and posted about it on LinkedIn, several members of my network reached out to me with feedback. Below, I've identified some known issues and next steps from this feedback.
Alignment
Just before launching, I received feedback that several users in different browsers were having difficulty with sizing and alignment of elements. I made adjustments to ensure that all the content could be seen, no matter what browser was used.
Accessibility
I received some feedback regarding accessibility issues, namely low contrast and improper HTML tags for headers. I fixed what I could, though some of these were unfortunate artifacts of the Wix no-code platform.
Shop Feature
After handoff, the client decided that they wanted to add a Shop feature to the site. Adding the shopping cart and indicator crowded the main navigation. To avoid that, I decided to make the Shop and Science pages sub-pages of the Products tab.
Post Hand-Off
I built the site in Wix so that the client could easily make changes. However, I realized that there were some key components that needed to be addressed, so I met with BioShield's team to talk about best practices going forward.
After completing the project and handing it off to BioShield, they decided to re-hire me to continue doing more work for them. In particular, I will be building out a new page on the BioShield website for their Safe Schools campaign, and I will be working on the site for their parent company, Chainable Corp. I'm grateful and proud to have work that I've designed out in the world, and excited to continue working with such a great organization.