Vidora Website

Project type: Website
Industry: Pharmaceutical

Tools: Illustrator, Inventor, Dimension.

Mesa vista de cima com um celular sobre uma folha de papel ao lado de cápsulas coloridas de medicamento sobre uma mesa roxa.

Overview​

Vidora is a pharmaceutical industry based on Porto Alegre, Brazil. Despite being one of the youngest pharma companies on the country, it’s already being recognized by the quality of its products.

Challenge

How to design the new website with content for two complete distinct types of users (pharmaceutical customers vs end users)?

Design Process

Personas

Two personas were created to summarize all the info that came out on user research, representing the differences of the main users of the website.

Competitive Analysis

The website of the biggest competitors and business partners were analyzed according to these characteristics:
  • Desktop and mobile experience;
  • Features and navigation;
  • Acessibility;
  • Visual design

Product Analysis

There was also an analysis on the Vidora website itself to understand the content, structure, user flow and visual choices that were part of the pages.
Click on the images to expand

Interviews

Three interviews were conducted with the chiefs of Marketing, P&D and Sales department to gain a better understanding of their view about the new directions the website should take and what aspects should remain the same. Key findings of the interviews, in order of priority, were:
  • reinforce brand identity;
  • make the site content more visible;
  • more technical content about the company’s industrial plant;
  • more information about the products.

Information Architecture

After defining the main changes that needed to be adressed, all the necessary information was organized to define the hierarchy of the content.
Previous Site Map
Updated Site Map

Wireframes

The new structure and content were then visually organized with wireframes, defining the basics of navigation and visual hierarchy.
Desktop wireframes
Mobile Wireframes

User Experience

Ease for new costumers

For people that are not used to pharmaceutical products or are looking for a better understanding about the product lines, each product category has filters for a better searching experience.

Faster and simpler contact

To make it easier for customers from all over the country to find the product on their location, a form to register their interest was inserted. Before it, the process usually started with a phone call, in which the consumer called to find out about a product and left their contact for a return. With the form, the request is sent by email along with the contact, speeding up the first step of the process and avoiding possible mistakes that could occur by sharing address on a phone call.

Specifications

Typography

The font family Lexend Deca is used along all the website, which has a resemblance to the company logo with its round design.

Lexend Deca Medium
Lexend Deca Regular

Colors

To reinforce the brand identity, the brand’s shade of purple was chosen as the main color for the website header and titles. This shade of purple was already part of the visual consistency maintained by the use of a purple element on the brand packaging (e.g.: Flacodin)

The color scheme provides the necessary contrast between the elements, following the standards on WCAG Guidelines.

Scroll to Top