Thinkful: check out flow

Online education platform for becoming a developer
This project was a beautiful growing pain. As the company and its products grew, new payment methods were added. My job was to figure out a smooth user experience for all the different payment options. 


The problem

There were numerous scenarios as to how a user could pay for Web Development Career Path; with a discount, with a scholarship, with a loan, with deferred payments or month-to-month payments. There was even talk about including an option for a one-time pre-paid payment.


The goal

When a new user decides to sign up for Thinkful’s Web Development Career Path, the student needs to know how to pay for the course from the various options available to them while not being confused when signing up. The student needs to sign up and pay for the account quickly.


The design steps

Heuristic evaluation of current sign up flow

User journey maps



Project requirements and edge cases to consider

  • Pricing page with clear explanations of each plan
  • Sign up page that catered to these user edge cases
    • New user
    • Older user signing up for a new course who has an account but forgot about it
    • Old user signing up for a new course with a credit card on file
    • A user signing up with a discount
    • A user signing up with a scholarship
    • A user signing up with monthly payment, deferred payments or a student loan
  • Log in page
    • Older user signing up for a new course who has an account but forgot about it
    • Forgot password
  • Settings page need to reflect the plan a user is on

The design process

The problem was complicated, and now that it's over the solution seems obvious. But, during this project,  there was a big question hovering "How do you provide an easy user experience with so many different payment options?" Whatever the solution, it had to not put a burden on the user to make the user flow oh so smooth. Majority of time was spent discussing and understanding the various payment options and how they fit in with one another.

Let's take discounts, for instance. Thinkful doesn't give out promotional codes in their newsletter nor does the company have sales. But, they do have discounts on sites like Course Report that provide a discount of $150 via a specific link. This told me that the design did not need to have a prominent discount field in the sign up form. Instead, it needed to accommodate a discount display if a user came from one such URL. 

On top of that, Thinkful does not combine scholarships with discounts. If you are a woman or a veteran you receive a $400 off your monthly payments but you can't combine it with the $150 discount from Course Report. It's one or the other. The issue is now how to display the fact that you can't have both. In this case, the decision was made to display a toggle that allowed a user to pick one; the user decided whether they wanted a discount or a scholarship.

The process was similar to the different payment plans. At one point there were four different plans: monthly, deferred payments, student loan and prepaid. Throughout the discussions, prepaid did not make the cut which made things easier.

Through prototyping and analyzing the user journey with Thinkful, I uncovered something useful. A student should not be picking a plan that's best for them while they are in the process of signing up for a course. This may sound a little backward but hear me out. Thinkful is an expensive monthly purchase. It's not something that will be purchased on a whim. Deciding to give up months of your own time in order to pursue a new career is a big decision. With this in mind, most students would do a lot of research on which type of program is good for them, what they can afford in terms of money and their time, etc... Therefore before a user actually signed up for Thinkful's Web Development Career Path, they would have to a user two questions. First, is Thinkful the right platform for them? If yes, then how are they going ti pay for it? 

With this information in mind, all of the different pros and cons of various plans was placed outside the sign-up flow. This significantly eased the amount of information that would be present within the sign up pages. While a user is signing up they pick the plan they decided upon beforehand. 

I chose to display the amount a student will owe each month for each plan to make sure they are choosing the right payment plan. Not everyone will remember the name of the plan. Some people remember a payments plan by their terms. For instance, deferred payments is the plan you pay $500/month. The payment plans amount update based on any discounts or scholarships applicable to the student.


Design delivrables



Would you like us to get started on your project?