Abbvie
Tracking Sales Events
Peer to Peer Events is an app for sales teams
to easily create and track events.
OVERVIEW
At AbbVie, a pharmaceutical company, the sales teams plan many events throughout the year. Due to industry regulations and also internal processes, it was difficult for the teams to use the existing app to capture essential data before and during the events. To tackle this issue, they decided to redesign the app to allow the team members to track attendees and budget quickly.
my Role
UI Design
Tools
Axure, Figma
Platform
iOS iPad
Business problem
AbbVie’s events represented opportunities to share their expertise with the healthcare industry. When organizing them, the regulations gave the teams limitations such as :
All required steps need to be done within a limited timeframe.
The content has to be approved by authorities.
USER problem
For the sales teams, setting up an event demanded good organizational skills on top of other pain points such as:
Using an app with a non-intuitive interface and that was not fully adapted to tablets.
Pharmaceutical regulations required many steps to validate the creation of an event.
Limited online guidance.
LEGACY DESIGN problem
AbbVie’s design system was deployed in other apps and to build on familiarity, we decided to carry it over to redesign the app. Although we benefited from good design principles and components, some elements needed adjustments to be fully adapted to the app.
Some considerations we had to go over before using the existing design system include:
Pros
Visual consistency across apps
Main components ready to use
Up-to-date documentation
Cons
Elements not specific to the app
Need approvals to submit updates
FLOWS
After interviews with the sales teams, the user flows were revised. The goal was to quickly access the main actions right from the summary list view. Then, at each screen, I applied the design system principles to create a seamless experience for the users:
Create a Program ⇢ Review and Pay
To create a new event, the sales representative had to make sure to provide details about specific categories. By using different tabs, the information was quickly accessible at a glance. I applied on the pages the background colors theme defined in the design system, ensuring a good visual hierarchy: all primary content was displayed on a white background and the secondary items used a colored background.
STYLING THE BUTTONS
The most important actions used a filled button
to indicate a higher emphasis than the text buttons.
Summary List View ⇢ Close Program
Each card displayed all the main event details with a highlight on its current status. The sales representatives were able to take action after reviewing all the elements. If the timeline was not respected, the event had to be closed. If it was the case, a final questionnaire had to be submitted to provide feedback and proceed with the closing.
ADDING CUSTOM NOTIFICATIONS TO CARDS
Cards displayed essential information with the option
to include a notification bar indicating details.
Sign In ⇢ Add Attendee
Once the event is created, sales representatives can use the app to track attendance. When the attendee was already registered, the card would display the main information and the action to validate the person's presence. If an attendee needed to be added, the sales representatives had the option to quickly fill up all the required information by tapping on the “Add Attendee” link close to the list.
CREATING MENU STYLE
The exposed menu was styled as a secondary action,
keeping the emphasis on the content.
PROTOTYPE exploration
simplified Cards
Improved grid
Alignment and spacing revised
to improve readability.
Increased legibility
Typography sizes and colors optimized
to read better on the page.
Micro interaction
Smooth animations providing
feedback to keep engagement.
TAKEAWAYs
The redesigned app benefited the sales teams, making them more productive by speeding up the process of creating and tracking an event.
Although I was new to the pharmaceutical industry I was eager to jump in and start learning. My team offered lots of guidance, especially about the design system they were using. The interaction with the designers and researchers allowed me to develop my ability to be concise and precise when asking for feedback or presenting new ideas. I also learned how important it was to share feedback in a constructive way to keep pushing the project forward. I will definitely reapply those crucial lessons in future projects as well as those other takeaways listed below:
A good design system is flexible
It was crucial to the project to be able to reference a good design system. It accelerated many decisions I had to make during the creation of the layouts. I saw the real strength of the design system when I was able to submit additional components to it. The design system was an evolving library of assets and not a fixed documentation.
Adapted content can elevate the overall layout design
The tone of the content went hand in hand with the redesign: a more friendly and minimalist style. When the users were asked to accomplish a task through the app, they were more confident in using it and less confused about the functions, labels, or steps required to be done.
Restrictions can create opportunities to improve UX
The simplification of the process to create an event helped the users to be more efficient. However, it was important to retain all detailed information accessible. This step was necessary in order to be compliant with the pharmaceutical regulations. At first, I was concerned about this extra content, thinking it would complicate the page layout. But, it was helping the users to go over the details ahead of time, ultimately saving them time in the overall process.
Next project
We Are Alexander
