Feature Redesign, UX Research, User testing, UI Design
We offer a lease to own application for various e-commerce plugins.
- 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.
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.
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.
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.
After completing my initial research, I sketch ideas. This allows for many leading iterations through varying design options.
User Testing: Round 1
- 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.
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
- 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.
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.