Allergan Rewards Website

alergan-hero

CLIENT

Allergan – Brilliant Distinctions

DATE

2016

MY ROLE

Principal UX, Associate Creative Director

The Situation

Brilliant Distinctions is a loyalty program for the pharmacy company Allergan. Members earn points by purchasing products or treatments from Allergan’s prescription beauty line. Brilliant Distinctions has enjoyed active, loyal relationships with its female customers, but not as much with their male counterparts. I was approached to lead and create a UX framework for the male website version of the rewards program.

The Approach

My team and I took a closer look at the male consumer, and what influences and motivates his shopping habits. Based on our findings, we developed a male landing page experience & email campaign utilizing registered female brand loyalists, prompting them to encourage the man in their life to sign up—with a deep incentive for both parties. This project was very challenging due to working with government pharmaceutical regulations and sign off. I actually inherited this project when it was behind schedule and off budget, I lead my team in turning the project around.

We first looked at the female page designs and talked to the client about what they wanted to see in the male pages. We came to the conclusion after discussing the options that keeping the same shell components (i.e. navigation, sign in process) the same would mitigate user frustrations. On the left, you will see the female page design and on the right is the initial round of wireframing based on early conversations with the client.

ALG_DESKTOP_Home_r8_0002_3 – BUBBLE_ Earn Points
UXB-Copycat-Designer-Lyft-Wireframe

Wireframe Rounds

In the wireframing rounds, we would produce  4-5 pages in the wires to show feature placement and content hierarchy. We would then populate these designs in Axure for basic prototypes to walk the client through. These rounds of wires saw a lot of feature sets come and go based on requirements from the client. There were 15 rounds of wires that were produced.

Round 2 (10) homepage wireframe
Round 4 (10) profile page wireframe

We set up ongoing weekly check-ins with the client and implemented a scrum/sprint mentality on the design team. I lead the design efforts on the UX side by conducting user interviews, persona development, and interactive prototypes that helped speed up the approval process. In the end, we needed to hand off design/interactive annotations of every single component on the site for FDA approval. This was a very arduous process but in the end, we were able to meet the project deadline and come in on the budget.

Final Design Comps

ALG-1
Mens profile page High Fidelity wireframe

Annotations and Design Specs

Based on government regulations we had to produce page by page annotations to hand off to the FDA for review. These annotations had to be very detailed and show every action that could be taken on the website along with a functionality write up.

Landing page with annotations
Landing page with dropdown annotations

Final Design

Brilliant Distinctions Male sites

The Results

  • 40% offer redemption
  • 15% of men went on to schedule a cosmetic treatment