Designing Mockups for an AI/ML infused system

Fian Rodrigues
Bootcamp
Published in
4 min readDec 29, 2023

Step 1: Draw two storyboards

First Storyboard:
Jan is on her lunch break at work, excitedly discussing with Pat about the house they found. She opens the mortgage app on her smartphone, browsing through various loan options. She feels confident as she explores the app’s simple and intuitive interface, looking at interest rates and payment plans.

Jan taps on a specific loan package and finds a feature that allows her to calculate potential monthly payments based on different down payment amounts. She shares this information with Pat, feeling reassured that they can afford the house.

Jan smiles, feeling empowered and informed as she finishes her browsing session. She texts Pat, “I found a great option! Let’s talk more tonight!”

Second Storyboard:
Pat engages with an interactive module on understanding credit scores. The app uses gamification and quizzes to help her grasp the concept easily. He’s gaining more confidence with each correct answer.

Pat finishes a module on loan types, feeling much more knowledgeable. He excitedly tells Jan, “I just learned so much about loans! Let’s look at options together tonight.”

Pat is at home, feeling a bit uncertain about mortgage factors. He opens the app on her smartphone and navigates to an educational section. He sees various modules on credit scores, down payments, and loan types.

Step 2: Choose one storyboard, and list out AI/ML requirements for your classifiers
For the first storyboard where Jan is exploring loan options on her smartphone, the technical requirements for the classifiers would revolve around providing accurate and easily digestible loan information to match her needs. Given that she’s looking at various loan options and their associated details, these classifiers should facilitate a smooth exploration experience for her.

  1. Loan Package Classifier:
    Requirement: A classifier that categorizes and sorts different loan packages based on location of the home, salary, loan amount, credit score. This classifier should accurately identify and present various loan options available to users, ensuring accurate grouping and easy comparison of details like interest rates, payment frequency, and potential savings.
  2. Monthly Payment Estimator:
    Requirement: An estimator that takes into account loan amount, interest rate, and down payment details to calculate potential monthly payments. This should provide accurate and quick estimates, aiding users like Jan to make informed decisions based on varying down payment amounts and different loan types. The accuracy and speed of this estimator are crucial for Jan’s confidence in understanding the affordability of different loan options.

These classifiers are essential to ensure a seamless and informative experience for Jan as she explores loan options on her smartphone. The Loan Package Classifier helps organize and present diverse loan options, while the Monthly Payment Estimator enables quick and accurate calculations, aiding her in making well-informed decisions about their potential mortgage.

Step 3: Mockup UI

Screen 1

Browse different available loans and choose the required one.

Screen 2

Browse different available loans and choose the required one.

Screen 3

Depending on the loan amount, income and credit score, loan package classifier will show different banks to choose and compare the loan.

Screen 4

Depending on your requirement, it will show the interest and total due

Screen 5

The monthly payment estimator will show the monthly payments depending on the loan amount, interest and the down payment.

Step 4: Write up
Part A: Design Decisions Based on Heuristics

The heuristics shown in bold are the one which are implemented and the rest are the ones which could be implemented with more time.

Part B:

Co-author:
Tanmay Sameer Shravge

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1