Augusto Garcia
Principal Designer

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.

Payment Estimator

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.

Payment Estimator

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.

Payment Estimator

Sketches

After completing my initial research, I sketch ideas. This allows for many leading iterations through varying design options.

Wireframes
Payment Estimator

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.

36
Usability Tests
83%
Confused
100%
Wanted to know more
6
cups of coffee
Payment Estimator

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.

Interface exploration
Payment Estimator

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.
20
Usability Tests
80%
Understood their buyout option!
100%
Trusted us more
3
Very happy executives
Payment Estimator
I'm scrollable!

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.

Feature still in development