Affirm with Decked
A page created to educate the users on financing their purchase with total estimator tools, visual guides and value props.
Timeline |
Aug. 2023
Team |
Solo designer, E-commerce Team and 1 Engineer.
Role |
Re-design the Affirm display page and integrate a price estimator based on user selections.
Company |
DECKED
Problem |
We noticed that our original Affirm page didn't effectively explain how Affirm works on our site. This lack of clarity led to customers bouncing at checkout, potentially due to uncertainty about financing options and a reluctance to pay the full price upfront.
Solution |
Revamp the Affirm page to enhance transparency and provide a more informed shopping experience. Develop a pricing tool that allows users to clearly see the estimated total price of our products based on their chosen financing terms. Additionally introduce a new "How It Works" section to provide clear guidance on utilizing Affirm for purchases on our site.
Estimated Total Price Tool |
Easily see the estimated total price of our products based on the selected financing term. This feature helps the user plan their budget effectively and make informed purchasing decisions.
"How It Works" Guide |
A new "How It Works" section to guide customers through the Affirm process on the site. Learn how to navigate the financing options available and choose what best fits their needs.
Design Features
Design Process
Research |
In my research looking for examples of how other companies educate their customers on how to use their Affirm tool.
This example that i found was perfect for what we needed, with 80% of site traffic being on mobile we took mobile visuals and marked out the steps it takes for the user to purchase their product.
Wireframes |
The wire framing process for this project moved fast and used some existing components. You can see the evolution from the original page to the updated design that included a filtering element, steps walkthrough and value props.
