Works

Overview

Vibrant America is a medical company that offers FDA-approved and laboratory-developed tests as ordered by physicians. They hired The UX Department’s design services to create platforms, brochures, logos, and packaging for communicating the company’s wide range of medical services to both patients and doctors. The main goal for the agency was to create visually appealing material that spoke to the company’s high standards, and that was consistent in all its forms.

SERVICES PROVIDED
  • Research & Concept Definitions
  • Branding
  • Information Architecture
  • Interaction Design
  • Visual Design
  • Packaging & Collateral Design
  • Front-end Development

Context and challenge

Project background and description

Vibrant America is a medical company based in San Carlos, California. They offer tests for physicians to use including the Gut Zoomer, Wheat Zoomer, CardiaX, and others. They also offer special services for patients, such as mailing the necessary equipment for them to draw blood or other biological samples at home. For the physicians, they provide a web app where they can keep track of their patients’ test results.

We worked with Vibrant America for many years, and we still provide design services for them on demand. We have built marketing websites, brochures, logos, packaging, and web apps for the company over time.

img work

The problem

Vibrant America is a big company that offers multiple services across multiple platforms, for different purposes and audiences with distinct needs. Our challenge was to design a coherent system that would allow us to produce design pieces that were different, yet brand-oriented and consistent.

Project goals and objectives

Our goal as a UX design studio was to create a series of logo designs and marketing sites that would fit seamlessly into target users’ mental models of a healthcare platform, and that would also be appealing, modern, and coherent as a system.

The online platforms we designed included:

Process

Discovery phase

The services offered on Vibrant’s platforms were targeted towards women and men from 30 to 60 years old that were concerned about their health, and interested in making lifestyle improvements.

For every project we collaborated on with the Vibrant team, we received documentation with content to guide our design efforts. The documentation could include graphs or small infographics.

Our methodology for kickstarting each project was to analyze this content with the goal of digesting it and separating it into smaller pieces of information. That information would later be presented in a more visual, easier to consume manner.

After the content was organized, we worked on the information architecture for the site or app at hand, and we produced a site map which would then be discussed and tweaked until a consensus was reached between the client and our design team.

img work

Interaction design phase

From the approved site maps, we produced low-resolution prototypes (wireframes) that conveyed what content and UI elements were to be included in each page of the website or app, and how those pages would relate to one another.

These wireframes included guidelines for graphs and infographics, the content strategy, and any necessary notes that would help the design team and the client work towards a design solution that met the needs of the project.

At the end of this process we delivered the wireframes for all the key pages of the website or app.

img work

Branding

At this stage, the design team had a very clear idea of the communication goals of any particular project for this company, was well versed in the content and terminology, and had a strong grasp of the website’s audience and objectives.

With this knowledge the team created several brand design options, presented in a document that expressed the source of the idea, the message being communicated, and a brief description of the visual treatment. This document was presented to the client, discussed, and polished as needed until there was one option that stood over the others.

img work
img work
img work
img work
img work

Visual design phase

For each project, after the brand was defined and approved by the client, we started to polish general aspects of the visual design such as color palette, typography, and imagery style. We created a style guide that later served as a foundation for the production of high resolution prototypes (mockups) for the website or application.

img work

Once approval from the client was obtained for the general visual parameters, we moved forward with the visual design for the entire platform.

After a few rounds of iteration, we delivered high-resolution mockups for each of the platform’s screens and the exported assets, ready for implementation.

Collateral

For each project, we received follow-up requests for complimentary design materials such as brochures, banners, packaging, and infographics. We created these pieces consistently with the overall design style and delivered them ready for print.

img work

Front-end development

The designs were implemented using semantic HTML, CSS3, and JS in compliance with W3C standards. The development effort took place in our own staging environment to allow testing and QA. The entire source code was available both on our staging server and on a Github repository specifically created for these projects.

At the end of the process, we delivered source files for each screen of the website or application.

Solution

img work
Vibrant Genomics – Homepage
img work
Physician portal – Mobile
img work
Vibrant America – Marketing site
img work
Patient portal – Reports
img work
Vibrant Wellness – Mobile
img work
Physician portal – Dashboard