1 designer (me!)
1 design mentor
Figma
Stripe
WebFlow
UI design
Product thinking
Web implementation
3 weeks
As an early startup, a quick onboarding process was built for pharmacies to sign up for MedMe through. There were many details that were overlooked at the time as timelines and capacity was tight. This led to missing customer information, miscommunication and frustration regarding pricing plans and loss of potential users.
Here’s how the sign up used to look:
.png)
Now with over thousands of pharmacies onboarded, MedMe’s current flow was simply not scalable.
With data from user interviews and experience from the Customer Success team in the past, I outlined two major pain points regarding the current sign up flow for this project.
The current process was a high friction sign up flow that did not express the value of the platform.
The objective of this project was to create a new onboarding and sign up process for independent pharmacies. To achieve this objective, I created two goals for the project to alleviate the two pain points.
Collect all mandatory information from new users for internal processes to not have to manually reach out for missing information. Ensure users are not feeling frustrated with an unnecessarily lengthy process.
Revamp the visual design of the process to match MedMe’s new branding and provide an overall cleaner look. Help users understand the purpose behind the information they are asked to enter and reduce any questions they may have.
Concept of Friction
Friction is the amount of effort it takes for the user to complete the signup flow before gaining access to the platform.
There are three sources of friction:
The number of decisions the user must make, and the number of additional activities required (e.g., email confirmation, CAPTCHA, etc.)
The number of steps or the series of pages that the user is expected to pass through.
The number of fields that a user has to fill up.
A friction-based sign up flow takes longer to complete, but brings more value later. It is typically used when the product is too complex to demonstrate value by itself. Whereas, it is much easier to complete a frictionless sign up flow, but it’s then on the user to figure out the value of the product by themselves.
The goal was to optimize the amount of friction.
I also spent the research process asking questions for the account management, customer service and technical side of things to define any specific considerations and constraints before ideating.
.png)
Looking at what’s already out there
I looked into common patterns in sign up flows in SaaS businesses especially those with booking software and in the healthtech industry as those have similar amount of information required from new users. I analyzed how much friction their flows entailed and how they kept new users engaged throughout the process.
Time to build some user flows
From here I came up with seven types of user flows for this project. After having some discussions with my design mentor, we finalized on three to present to the rest of the team.
Let’s start wireframing (iterate, iterate, iterate)
Once I narrowed down potential user flows, I went through four iterations of wireframing and received feedback from the product and customer success team before finalizing on a design.
.png)
After my first two iterations though, I realized that I had to go back to the drawing board because I had not addressed the second pain point to help users better understand the value of the product and why they are asked to input so much information.
Here's the final design!
Let's dive deeper into the design...
Pre and post sign up page
This page gives the users an idea of what to expect from the sign up flow before getting started so there are no surprises.
%201%20(1).png)
%201.png)
Helper text and diagrams
On top of simplifying terminology, adding more contextualized clues such as visuals and extra information provides users with more clarity regarding what information they’re giving and why we’re asking for it.
Mandatory fields
Clearly indicating required information so users are not confused on why their form is not submitting.
Pricing plans
Simplified information about the pricing plans in the sign up form and sent more traffic to the pricing page with a built-in calculator on the general website for more information.
Revamping the UI
By reskinning the flow, adding subtitles and sticking to a one column approach for the structure of the form, the sign up process now looks less overwhelming.
%201.png)
WebFlow Limitations
Once the final design was created, it was time to build it out in WebFlow!
I spent a couple weeks getting the hang of WebFlow through creating other pages for MedMe’s website while I was waiting on feedback for the sign up flow designs.
However, while building out the sign up flow, I ran into a few restrictions:
I ended up going with option 1 and writing custom code for form validation with the Slider option to navigate each step of the multi-form.
Stripe Integration
MedMe recently made the switch to Stripe for all their payments. From the initial user research, it was made clear that it is very important to collect new users’ billing information before they gain access to the platform to avoid missing customer situations (users we cannot track that use MedMe for free).
However, after looking into Stripe, integrating it with Webflow with the functions we required, was more difficult than I anticipated :/
Side note: Stripe cannot be integrated in the form made on WebFlow; instead,we must redirect users Stripe.
Stripe’s newest and code-free connection. Adding this link to a button on the sign up flow redirects the user a Stripe page to enter their information through.
More flexible method Stripe has that can be integrated in the website itself and it does not charge users anything for entering their information.
These platforms have built-in integrations for Stripe so it would be possible to submit billing data with the rest of the form submissions.
Since this required an executive decision, I presented all the details with these options to the team.
We ended up sticking to using WebFlow with the separate Stripe payment links and charging users for a $0.50 setup fee since we had flexibility with custom branding and got form validation to work on WebFlow.
The flow is live on MedMe’s website where there are analytics set up to track improvement in usage as flu season ramps up. We just had the first US pharmacy sign up through this flow!
Revisiting initial goals
By implementing an automatic customer profile creation on Stripe and creating mandatory sign up fields, internal processes were decreased by 21-28%, shaving 1-2 days off of this flow for the team.
Now MedMe has a cleaner and more professional looking sign up process for new users and enterprise clients. It is projected that there will be less questions and miscommunication, but this will be tracked that in the next few months.
.JPG)
Team picnic on a beautiful summer day for my last day :(
Working on a brainstorming session for a research study I took the intiative to kickstart in my last couple weeks!
The intern family <3
.png)
