Madeline Portfolio
© Madeline Portfolio

Aservo® EquiHaler®

VMLY&R client case study

Live Site

This prescription launched in both the UK and Germany currently, so we were catering to the european market exclusively and had to take translations into account before starting. Here are the site links for both:


Aservo® EquiHaler®UK Site

Aservo® EquiHaler® German Site

Page Anchor Functionality, content sectioning demo

Overview

Aservo® EquiHaler®is a prescription offered by Boehringer Ingelheim that treats severe equine asthma, which means it is an inhaler for horses. Originally designed by a group of German product designers, the inhaler has special technology to make it the most comfortable solution for horses. We were tasked with creating a site to advertise the prescription, but it needed to have many layers of empathy and cater specifically to horse people. We also designed 2 sites, one for horse owners and another for veterinarians with more detailed information.

Process

Our design process started with a series of meetings with the client and extensive white boarding sessions, where we drew out the layouts of the site. After the drawings, next came Lo-Fi wires, which were presented to the client before moving onto Hi-Fi wires.


Originally, we were provided with an information booklet with the product branding and some infographics that we needed to synchronize with. It was challenging, but we managed to persuade the client to not go with a dark version of the site. We wanted the site to feel more clean and modern.

Our Goals

As you can see from above, although very well done, all our branding material included a very drastic gradient, usually which isn’t best practice, and it is very busy. There is a lot going on in the booklet on every page. Our goals were to simplify the information, make it more digestible, and use all the branding in a way that is much more minimalistic. Also, I tried to stray very far away from the image of the horse with wings.

Lo-Fi Wires w/annotations

Home Page

About page

Treatment page

How To Use page

About Equine Asthma page

Technology page

Landing page concepts

User Filtering concepts

Popup modal example

Tool Tips or modal concepts

More educational modals

Changes

Some changes you might notice between Lo-Fi and Hi-Fi are mostly about feeling. It was extremely important to our clients that we hit an emotional level with the users on the site, people who REALLY LOVE horses and we had to pull their heartstrings. Feedback included that the horse did not have the right expression in particular images or that we were not expressing the importance of the disease enough. I did my best to bring this feeling forward on every wireframe.


We also had feedback that we were not showing the most accurate living conditions of these horses or the most accurate representation of the vets. Every image is authentic on this site. We also have slightly different content on each site due to country specific requirements, so some changes there.

Lo-Fi to Hi-Fi Comparison

Segmenting Users

The idea was that this landing page would help us separate users by country, by language, and secondary by their profession, Horse Owner vs. Veterinarian. We had different technical requirements for each site that also varied per country. You often see the components that I designed were later mixed into different pages or rearranged, this provided quick scalability and turnaround across deliverables.

Requirements for proof that the user is a veterinarian.

I was under the impression that we would have more countries at first.

Current Landing Screen

Lessons Learned

Before you jump to any assumptions, I realize that the accessibility of this page is atrocious. White text over an image with a stark gradient and a button color with no contrast… However, it is clear the initial requirements had changed at this point and the clients were very persistent on using horse photos everywhere and making the gradient have both branding colors, so let’s cut some slack. Making the client happy is the best we can do! ON another note, I am not super pleased with content that was centered and how large it is/how it wraps on different screen sizes. Also, due to the amount of information we have to have available and switch out frequently, we have many buttons stacked on top of each other. I think that this could’ve been thought through better compared to just stacking buttons. It would be nice to have a resources page or section laid out visually in a table with view and download icons to streamline the process.

Thank You