Payment
Estimator
Feature Redesign, UX Research, User testing, UI Design
The product
We offer a lease to own application for various e-commerce plugins.
The problem
- The customers don’t understand the lease, so we needed to add a payment estimator to make the product more comprehensive.
- The current estimator is using old UI.
- Several assumptions were made on what the user wants to see, and none of it was validated.
- We need to show our Truth in Lending (TLA) disclosures.
The project
Create a new estimator using our new design system. Identify what information the user wants to see, and whats important for us to show them.
User flow
Before I started any research, I build a user flow for our current payment estimator. My goal here is to highlight redundancies in our current workflow and target opportunities for improvement.
Competitive Research
I studied a few payment calculators across different industries to identify patterns and catalog their offerings to users.
- Strong hierarchy (one our our proprietary weak points).
- Most important information was BIG, or highlighted using Color.
- They used a graph to explain complex information.
- TLA disclosures were not on their estimator.
Sketches
After completing my initial research, I sketch ideas. This allows for many leading iterations through varying design options.
User Testing: Round 1
Using invisionapp.com and usertesting.com, I launched a small test using a wireframe prototype to identify what our user's needs are.
Feedback
- Minimum payment at the top was helpful.
- Overall, information was confusing.
- TLA disclosures created a lot of repetition and confusion.
- Wanted to know all their options when leasing with us.
- Users felt like their only option is a 12 month lease, when they have several early payoff options.
- Emotionally, the user felt this was a bad investment.
- No trust in our product.
Pivoting
Once I identify the user's needs, I revisit previous work and create new mocks using Sketch. I also introduce a new element, a graph that will help visualize some important information about being on a lease.
Now, we want to test the newest version with the latest mocks containing the new element.
User Testing: Round 2
Using invisionapp.com and usertesting.com, we are validating ideas, and testing if we improved comprehension and user emotions around leasing with us.
Feedback
- Better understanding of their early buyout options
- Huge win!
- Moving TLA to it's own section help a ton in comprehension.
- User trusted us more because of the graph.
- User didn't feel hoodwink in a 12 month lease.
- Allow user's to plan how to pay off a lease before applying.
UI Design
After finding all usability mistakes through testing, I began designing the final screens in Sketch. Using the design system components and guidelines, I started creating mobile screens first.
I am especially proud of the graph and slider. Being transparent with our user's by showing them cost and savings instills a substantial amount of trust in our product.
