The Challenge

Biogard Technology is a new company born out of COVID-19. It specializes in nanotechnology that protects surfaces against deadly micro-organisms. They needed a website that introduces the nanotechnology and educates potential clients about its product. 

Role: Research Information Architecture, Wireframing, UI, UX, Copy, Graphics

 

Tools: Pen & Paper, Figma, Webflow

 

Timeline: 8 Weeks (website only)

High-level Goals

1. Introduce new product and company

 

2. Attract and convert visitors into new customers

 

3. Educate visitors about the product

Empathy

UNDERSTAND THE USER

To design a website that represents Biogard Technology and convert visitors into new customers, I needed to understand the potential users and how the product works. I used the company's previous research, performed my own secondary research on their competitors, and an on-site visit to gain a better understanding of who I'm designing for.

PROTO-PERSONA - JAMES NEWMAN

ABOUT

  • 38 years old

  • North Vancouver

  • Property Manager at a development company

MOTIVATIONS

  • Wants to learn about new technologies

  • Versatility

  • Price

GOALS

  • To provide safe and clean environment for workers and residents

  • Stay within budget

  • To find the most effective cleaning product to combat COVID-19

PAINPOINTS

  • Too many types of cleaning products 

  • Uncertainty about new products

Since this was a new company, the executives and I both agreed upon making the website clean and simple but with enough detailed information for introduction. The product page needed to be set as the home page for proper new product introduction. It is then supported by sub-menus inside the technology drop-down menu (ATP Testing, Certified Tests, How It Works, and Nanofilm) in order to further educate James, our proto-persona. 

Main Menu

Drop-down Menu

Sub-menus

Wireframes

Home (Product)

Certified Tests

About

Contact Us

FAQ

How It Works

ATP Testing

Nanofilm

Information Architecture

High-Fidelity Design

Menu Bar - About Page (active state)

Menu Bar - Product Page (active state)

Menu Bar - FAQ Page (active state)

CTAs

The entire website was designed and developed on Webflow. Live version of the website is available for viewing by clicking the link below.

Key Learnings

It is always exciting to introduce a new product into the market. It was a fun experience building a website and brand from the ground up. Working directly with executives and sales team, I was able to pinpoint the needs and goals of our target users. The persona helped greatly in emphasizing the essential information and incorporating them into the creative vision. The learning curve for Webflow was quite steep. However, the platform was quick to pick up as I had previous basic knowledge of HTML and CSS. Biogard Technology is a new, thriving company and I look forward to helping them add more products, services, and features to their website in the future.