Role: Lead Designer, Brand Management, User Interface Design, Product Design
Tool Used: Figma
The objective.
Pfizer-BioNTech needed an unbranded CRM sign up form that would capture the interest of patients who were were interested in receiving updates on recent information.
Something to be solved.
The Experience Design team was asked to create an unbranded Sign Up Form. The given the potential high traffic to the site, the team UX designer and myself explored a design option that would create the best mobile experience for users while limiting the amount of survey bloat so that we could ensure the client would receive the most accurate data results.
A scaled, step-by-step, process was chosen to solve for any potential roadblocks in the user journey. Having the form content broken into sections allows for important information and other content in layout to be more consumable and limits user frustration and drop-off.
Single Column Pattern
To offer the clearest path to completion for users the CRM form was designed in a single column. This design approach would decrease the risk of users missing important information.
Input fields
Form fields and labels were sized to the expected user input in order to hint towards what action is expected. As a solution for site user that may have visual impairments or prefer navigating through the "tab" button, the input labels were written to descriptive the action that will be taken after selection.
Error States
Descriptive error messages were created to help the user fix any mistake. Icons were also used in conjunction with the error message as a clue for color blind users to use in addition to decreasing frustration for those engaging with the site.
Progress Tracker
A progress tracker was included in the design of the sign up form as a way to guide users through, what could be, a complex process. Allowing users to know where they are in the process would allow the user flow to be easy and intuitive. To prevent any misguidance and keeps users informed on where they are on the completion path, the brand's blue color option highlights previous sections completed of currently being visited by the site user.
User Testing
In collaboration with the UX architect, the team conducted remote and unmoderated testing on each mobile and desktop view. Responses were gathered from 40 users on each platform; a total of 80 people.
The goals for user testing was to...
• explore whether the users understood the options presented
• identify willingness to give information
• understand whether users would like to receive additional information
Users seemed to prefer email over entering their phone number. Some responses had a neutral stance with receiving messages via mobile as it is becoming standard.
Recommendation:
Removing the phone number input as a required field
Users were able to understand the options presented to them for each age group and condition.
Some users responded saying the design was not what they expected from a clinical site. Their skepticism seemed to primarily targeted the hero imagery and color choices provided by an internal team. Additionally, the user response to SMS messaging deterred some users from trusting its intention.
Recommendation:
Re-evaulate page copy, brand imagery, and color chosen for future iterations of the website.
◆ ◆ ◆
More Case Studies...
