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 multiple platforms, brochures, logos and packaging that serve the purpose of 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 of the company’s high standards, and that was consistent in all its forms.

OUR CONTRIBUTIONS
  • Research and concept definitions
  • Branding
  • Information architecture
  • Interaction design
  • Visual design
  • Packaging and 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 FDA approved and laboratory developed tests as ordered by physicians. Their tests include the Gut Zoomer, Wheat Zoomer, CardiaX, among others. They offer special services for patients such as mailing the necessary equipment for them to draw blood or other biological samples at home. For physicians, they offer a web app from where they can keep track of their patient’s test results.

We worked with the Vibrant company 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 this company over time.

img work

The problem

Vibrant America is a big company that offers multiple services across several 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 seamlessly fit into the health mental model of target users, that would also be appealing, modern and coherent as a system.

The online platforms we designed included:

Process

Discovery phase

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

The methodology to kickstart the project consisted in analyzing the content with the goal of digesting it and separating it into smaller pieces of information that 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 that was later discussed and tweaked until a consensus was reached between the client and our design team.

The services offered on the platforms were targeted to women and men generally between the ages of 30 and 60 that were concerned about their health and interested in making lifestyle improvements.

img work

Interaction design phase

From the approved site maps, we produced low resolution prototypes (wireframes) that would convey 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 partialized 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 that were to be met on a particular project for this company, was well versed in the content and terminology, and had a clear definition 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 to be communicated and a brief description of the visual treatment. This document was presented to the client, discussed and polished if needed, until there was one option that stood over the others and was considered to be fit for the goals of the website or app.

This definition was also a cornerstone in the design process, that would guide all future efforts.

img work
img work
img work
img work
img work

Visual design phase

For each project, after having the brand defined and approved by the client, we started to polish general aspects of the visual design such as color palette, typography, imagery style and so on. 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 on the general visual parameters, we moved forward with the visual design for the entire platform.

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

Collateral

For each project, we received posterior requests for complimentary design materials such as brochures, banners, packaging and infographics. We created these design pieces within a consistent system and delivered them ready for print.

img work

Front-end development

The designs were implemented using semantic HTML, CSS3 and JS, complying with W3C standards. The development effort took place QA. The entire source code was available both at 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
Doctor portal – Mobile
img work
Vibrant America – Marketing site
img work
Patient portal – Reports
img work
Vibrant Wellness – Mobile
img work
Physician Portal – Dashboard