Pharmacy Website Login Flow Redesign
Project Type
Audit | Redesign | Prototype
Role
Product Design Intern at Mille Luci
Growing the subscriber base
When I joined Mille Luci as a Product Design intern, my first assignment was to evaluate and redesign the product's existing login flow. The client is a pharmacy and their business goal was clear: to grow their subscriber base. The login experience was one of the first places where that growth was being undermined.
This case study documents what was failing users in the original design, the specific decisions made to fix it, and the reasoning behind each one.
The name and brand of the client have been blurred out for non-disclosure reasons.
What Users Were Experiencing
The flow supported three distinct authentication methods: email passcode, email and password, and Google SSO. The experience of using it, however, told a different story than its feature set suggested.
Inconsistent Visual Design
The email passcode flow used inconsistent typography: after entering an email address, the prompt to enter the passcode appeared in a noticeably different font, breaking visual continuity. The Google SSO button was visually mismatched with the other two login options, lacking consistent sizing, spacing, or style treatment.
Difficult Account Creation Discoverability
The option to create an account was only exposed within the email-and-password flow. Users navigating the passcode or SSO methods had no visibility into account creation, making the feature easy to miss.
Incorrect Feedback & Error States
The selected state on the input form was a hard to see slight boldening of the outline. The error state was not context dependent, and gave incorrect feedback (Ex: The error state reads 'incorrect user or password' in the submit code flow).
The Redesign
The new modal layout was implemented into the first two login structures, login with code and login with email and password.
Modal Placement & Focus
The login interface was converted to a centered overlay modal that dims the background content. This draws the user's attention directly to the task, signals its importance, and reduces visual noise.
Structure & Hierarchy
A clear title and supporting subheader were added to orient the user and provide contextual guidance without overloading the interface. All three login options are now consistently spaced and visually aligned. Input fields are wider and uniformly sized across methods.
Account Creation Visibility
The account creation prompt is now present across all screens in the login flow, not hidden behind a single method. Users can discover and access account registration regardless of which authentication path they begin.
Clear Error & Selected States
Selected states are now a blue outline for better visibility. Error states now use red typography and exclamation mark icons to clearly communicate when something has gone wrong. Error messages are specific to the authentication method in use, eliminating the misleading "invalid email/password" copy for the passcode flow.
