Client: Biovital Medical Inc.

Duration: 4 Weeks

Tools: Figma , Adobe Photoshop, Maze, Adobe Illustrator

Responsibilities: User research, UX & UI design, Prototyping, User Testing


People with cardiac complications who need to monitor their vitals regularly, cardiologists and cardiovascular care providers, and professional athletes.

Project Goals

The main goal of Biovital website was to introduce a set of new wearable devices to the market for the first time. Being a new brand in the market, Biovital needed a responsive website that provides customers (patients and health care providers) with the information and instructions they needed. They also needed a set of logos to establish their brand.


It was very important to ensure technical and scientific information are presented in an aesthetic format that can target a large population of professionals and patients. A high-level introduction to SenWatch devices and their function for general users, and more detailed information for health care professionals needed to be provided on the same website. While an online store was not planned, the website needs to encourage the visitors to contact customer service or request a quote conveniently.

Project Background

Biovital is a biomedical startup that tries to introduce its FDA-Approved product to a specific group of users. The main products are wearable watches capable of collecting physiological signals to inform clinicians about the cardiopulmonary conditions of patients. All products are branded under SenWatch and three versions of the device are available; Lite (primary), CAM (cardiac ambulatory monitoring), and MCT (mobile cardiac telemetry).


Competitive Analysis

Since BioVital was a completely brand new company, I found it useful to analyze the websites of the competitors as a first step to understand the level of information and features usually provided to users.

User Interview

The initial research was followed by interviewing potential users who are familiar with cardiac disease and monitoring devices. Initial screener questions were prepared to select the potential users from a poll of participants.

Competitive Analysis Insights

  • Clear and clean design helps user to navigate through the website easily.
  • Descriptive information about the products should be presented.
  • Responsive web design gives product page consistency, that help users to use any device they want without having an unpleasant experience.
  • The processes a should learnable which leads to the a pleasant experience.

Interview Findings

Due to the COVID-19 situation, it was a bit challenging to plan for in-person interviews and I had to schedule virtual meetings. However, preparing an interview script helped to guide the discussion and I found the results very helpful:

  • A responsive design is a must for all users
  • Different ways for contacting the company and sending inquiries need to be provided
  • Information about the targeted indications and technical information of products should be provided
  • Users would like to easily subscribe and receive information from the website
  • The website looks must be more modern and less like the traditional medical websites

Persona and Empathy Map

Based on my gatherings from the interviews and competitive analysis, I organized the information by creating a persona . Having a persona as a potential user and understanding the expectations, concerns, and motivations of targeted users, making it easier to think through a design that satisfies a wide range of users with different needs and fears.
To Provide sufficient information about:
- Products
- Disease
- Technologies
To avoid
- Outdated website look
-Irrelevant information

Next, I created the empathy map to have a deeper understanding of the user and summarized key insights from research in one visual reference.

Information Architecture

While the research direct outcomes were very valuable qualitative data, I quantified those by creating a road map that categorizes the features I wanted to include in my design into “must-have”, “nice to have”, and “optional”. Structuring the roadmap facilitated the creation of sitemap and preliminary ideation sketches of different pages to a large extent.

The sitemap helped me to see the connections and a clear visual hierarchy of the website in simplest way. Based on the personas needs and considering the roadmap, I structured the main categories and then subcategories.

User Flow

I considered different task flows and thought about an optimum and clear way of accomplishing those.
The flow allowed me to realize how a user could interact with the interface in order to
- Get a quote from selected product
- Contact with professional care through the website


Ideation and Wireframes

  • Home Page
  • Products Page
  • Knowledge Center
  • Product Detailed Page
  • Contact Page
  • Quoting Process

The thinking process led to the creation of initial wireframes that provide the minimum functionalities required by the user flow.

Branding and UI Design

Having the structure of the website and functionality of different parts and features defined, I started to think about the aesthetic aspects and visual components in a multi-step design process:

  • mood Board creation
  • brand and product logo curation
  • UI kit

Hi Fidelity Designs v1

Iteration And Implementation

Usability testing and iteration on the design was a vital part of the design process. The decision matrix I created out of testing helped me improve the design to a large extent and to target iterations that were more important to the users while relevant to the business requirements.


  • Move the search icon close to sign in CTA
  • Remove the logo background
  • Change the video display and added the name
  • Added products name
  • Made the links more recognizable
  • Added products name for the videos and also change the display
  • Revised the product description
  • Added a map
  • Changed the color for the message inputs
  • Reformatted the team members names and titles


It is always challenging to create a completely brand new website, exciting though! Working in start-up environment with limited inputs from the client, requires an extremely well-structured strategy and a well-established communications.

In this project: 

  • I was able to develop the designs gradually while getting tons of feedback from the client.
  • Through conversations with my client, I was able to help my client to understand the new aspects of their design input and outputs based on my user research.
  • This constant communication was the key factor led to completion of the project.

Final Design

We can do amazing things together!